google charts dynamic multi-colors

by Vladymyr Shevchuk

HTML

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="style.css" />
  <script type="text/javascript" src="https://www.google.com/jsapi"></script>
  <script type="text/javascript">
    google.load("visualization", "1", {
      packages: ["corechart"]
    });
    google.setOnLoadCallback(drawChart);

    function drawChart() {
      var data = google.visualization.arrayToDataTable([
        ['', '0%', {role:'annotation'}, 
        		'25%', {role:'annotation'}, 
            '50%',{ role: 'annotation'},
            {
          			role: 'style'
        		},
            '75%', {role:'annotation'}, 
            '100%', {
          			role: 'annotation'
        		}, {
          			role: 'style'
        		}],
        		['Mood', 3, 'MNO', 7, 'JKL', 20,'GHI', 'blue', 25, 'DEF', 45, 'ABC', 'red']
      ]);

      var options = {
        isStacked: true,
        hAxis: {
          minValue: 0
        },
        series: {
          0:{color:'#222'},
          1:{color:'#555'},
          2:{color:'#888'},
          3:{color:'#AAA'},
          4:{color:'#EEE'}
        }
      };

      var chart = new google.visualization.BarChart(document.getElementById('mood_chart'));
      chart.draw(data, options);
    }
  </script>
</head>

<body>
  <div id="mood_chart"></div>
</body>

</html>