CODEWITHSUNDEEP
chartsgoogle-visualization
mjade
mjade

Reputation: 629

Google Chart: material column chart, last column has different set of colors, using series

I'm new to google chart, so my apology if this question is too noobs of me,

i have a material column chart with 2 bars each column, and i want the 2 bars at the last column to have a different color, and i dont want these color to be seen on the legend.i know i should use series for this, but i dont know how to construct it.

currenty what i have is:

google.charts.load('current', {packages: ['corechart', 'bar']});
google.charts.setOnLoadCallback(drawchart);

function drawchart(){
var data = google.visualization.arrayToDataTable([

          ['Year', 'bar1', { role: 'annotation'}, 'bar2', { role: 'annotation'}],
          ['2015', 90, '90%', 69, '69%'],
          ['2016', 86, '86%', 96, '96%'],
          ['2017', 83, '83%', 87, '87%'],
          ['2018', 84, '84%', 78, '78%'],
          ['AVERAGE', 86, '86%', 82, '82%'],
        ]);

        var options = {
            height:500,
             vAxis: {
             gridlines: {count: 12},
               viewWindow: { max: 120, min: 0 } ,
               textStyle: { color: 'white' }
            },

      seriesType: 'bars' ,
       series: {4:{colors: ['green', 'yellow']}}, 
      legend: {position: 'bottom'},
       annotations: { 
        textStyle: { fontSize: 18, bold: true }
     }
        };

        var chart = new google.visualization.ComboChart(document.getElementById('chart-div'));
var formatter = new google.visualization.NumberFormat(
    {suffix:'%', fractionDigits: 0});
formatter.format(datasecond, 1); // Apply formatter to second column
formatter.format(datasecond, 3);
        chart.draw(datasecond, google.charts.Bar.convertOptions(options));
    }

click here to see the image of my goal output

thanks in advance!

Upvotes: 1

Views: 412

Answers (1)

WhiteHat
WhiteHat

Reputation: 61212

you can use a 'style' column role to change the color of individual bars.
add the style to the data table, similar to annotations,
use null for the values that should be the default style 

var data = google.visualization.arrayToDataTable([
  ['Year', 'bar1', {role: 'annotation'}, {role: 'style'}, 'bar2', {role: 'annotation'}, {role: 'style'}],
  ['2015', 90, '90%', null, 69, '69%', null],
  ['2016', 86, '86%', null, 96, '96%', null],
  ['2017', 83, '83%', null, 87, '87%', null],
  ['2018', 84, '84%', null, 78, '78%', null],
  ['AVERAGE', 86, '86%', '#109618', 82, '82%', '#ff9900'],
]);

see following working snippet... 

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
    ['Year', 'bar1', {role: 'annotation'}, {role: 'style'}, 'bar2', {role: 'annotation'}, {role: 'style'}],
    ['2015', 90, '90%', null, 69, '69%', null],
    ['2016', 86, '86%', null, 96, '96%', null],
    ['2017', 83, '83%', null, 87, '87%', null],
    ['2018', 84, '84%', null, 78, '78%', null],
    ['AVERAGE', 86, '86%', '#109618', 82, '82%', '#ff9900'],
  ]);

  var options = {
    chartArea: {
      height: '100%',
      width: '100%',
      top: 64,
      left: 64,
      right: 32,
      bottom: 48
    },
    height: '100%',
    width: '100%',
    vAxis: {
      gridlines: {count: 12},
      viewWindow: {max: 120, min: 0} ,
      textStyle: {color: 'white'}
    },
    seriesType: 'bars',
    legend: {position: 'bottom'},
    annotations: {
      textStyle: {fontSize: 18, bold: true}
    }
  };

  var chart = new google.visualization.ComboChart(document.getElementById('chart-div'));
  var formatter = new google.visualization.NumberFormat({
    suffix:'%',
    fractionDigits: 0
  });
  formatter.format(data, 1);
  formatter.format(data, 3);
  chart.draw(data, options);
});
html, body {
  height: 100%;
  margin: 0px 0px 0px 0px;
  overflow: hidden;
  padding: 0px 0px 0px 0px;
}

.chart {
  height: 100%;
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div class="chart" id="chart-div"></div>

note: you're actually using a classic chart, not material 

google.visualization.ComboChart

material charts use namespace --> google.charts
classic --> google.visualization

probably shouldn't use google.charts.Bar.convertOptions with a classic chart...

Upvotes: 1

Related Questions