CODEWITHSUNDEEP
javascriptgoogle-visualization
neeraj bharti
neeraj bharti

Reputation: 361

Color is not changing in column chart

The color is not changing in my application. I have to make a column chart but the color is not changing on each of the labels on the x axis.

<html>
  <head>
    <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([
          ['Year', 'Sales'],
          ['2004',  1000],
          ['2005',  1170],
          ['2006',  660 ],
          ['2007',  1030]
        ]);

        var options = {
          colors:['#A2C180','#3D7930','#FFC6A5','#FFFF42','#DEF3BD','#00A5C6','#DEBDDE','#000000'],
          title: 'Company Performance',
          hAxis: {title: 'Year', titleTextStyle: {color: 'red'}}
        };

        var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 900px; height: 500px;"></div>
  </body>
</html>

or any one tell me how to add or show x axis labels on the given code....

<html>
  <head>
    <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 = new google.visualization.DataTable();
    var raw_data = [
    ["January", parseFloat('120')],
    ["Februry", parseFloat('150')],
    ["March", parseFloat('50')],
    ["April", parseFloat('90')],
    ["May", parseFloat('100')],
    ["June", parseFloat('130')]
    ];
  var years = [' '];

    data.addColumn('string', 'sales');
    for (var i = 0; i  < raw_data.length; ++i) {
        data.addColumn('number', raw_data[i][0]);
    }

    data.addRows(years.length);

    for (var j = 0; j < years.length; ++j) {
        data.setValue(j, 0, years[j].toString());
    }
    for (var i = 0; i  < raw_data.length; ++i) {
        for (var j = 1; j  < raw_data[i].length; ++j) {
            data.setValue(j-1, i+1, raw_data[i][j]);
        }
    }
        var options = {
          colors:['#A2C180','#3D7930','#FFC6A5','#FFFF42','#DEF3BD','#00A5C6','#DEBDDE','#000000'],
          title: 'Company Performance',
          hAxis: {title: 'Year', titleTextStyle: {color: 'red'}}
        };

        var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 900px; height: 500px;"></div>
  </body>
</html>

Upvotes: 0

Views: 498

Answers (1)

cchana
cchana

Reputation: 4990

With Google's charts, it considers the data you have as just one series of data with 4 values, rather than for separate bits of data and applying colours to each bar in the series is not actually possible.

There are ways to almost achieve what you want, as seen in this question/answer, but nothing that will give you exactly what you're expecting, unfortunately.

Upvotes: 1

Related Questions