CODEWITHSUNDEEP
javascriptchartsgoogle-visualizationbar-chart
Frank Bailey
Frank Bailey

Reputation: 195

Color bars in Google Chart by their value

I'm trying to color the bars in a Google Charts bar chart by their value. I know from the documentation that I can specify a style role to color specific bars a specific color, but I haven't been able to locate an example showing whether it's possible to color bars by their value.

I have created a fiddle demonstrating my chart structure. My data is a continuous series of integers. 

var data = google.visualization.arrayToDataTable([
  ['Asset','Days in Stock'],
  ['4990/473',606],['4990/489',504],['4990/557',159],['4990/559',147],
  ['4990/578',87],['4990/581',63],['4990/582',53],['4990/586',41],
  ['4990/590',25],['4990/592',20],['4990/593',5],
]);

I haven't been able to determine from the documentation whether it's in fact possible to set threshold ranges for setting the bar colors. Ideally I'd want to be able to use a range formatter but it doesn't seem to work with the bar chart type.

var formatter = new google.visualization.TableColorFormat();
formatter.addRange(0, 60, 'green', '#00ff00');
formatter.format(data, 1);

https://jsfiddle.net/dL997yv6/

So if there is a way to do this using a format function that would be ideal, however if there isn't then I will settle for programmatically setting the color per bar using my data values in my scripting language.

Upvotes: 2

Views: 5309

Answers (1)

WhiteHat
WhiteHat

Reputation: 61212

the color formatter works on Table charts

to set the color of the bar by value, add a calculated column to the data view,
similar to the annotation column

see following working snippet... 

google.charts.load('current', {
  callback: drawChart,
  packages: ['corechart']
});

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['Asset','Days in Stock'],
    ['4990/473',606],['4990/489',504],['4990/557',159],['4990/559',147],
    ['4990/578',87],['4990/581',63],['4990/582',53],['4990/586',41],
    ['4990/590',25],['4990/592',20],['4990/593',5],
  ]);

  var view = new google.visualization.DataView(data);
  view.setColumns([0, 1,
    // style column
    {
      calc: function (dt, row) {
        if ((dt.getValue(row, 1) >= 0) && (dt.getValue(row, 1) <= 60)) {
          return 'green';
        } else if ((dt.getValue(row, 1) > 60) && (dt.getValue(row, 1) <= 100)) {
          return 'yellow';
        } else {
          return 'red';
        }
      },
      type: 'string',
      role: 'style'
    },
    // annotation column
    {
      calc: 'stringify',
      sourceColumn: 1,
      type: 'string',
      role: 'annotation'
    }
  ]);

  var options = {
    title: '',
    titleTextStyle: {
      fontSize: 16,
      bold: true
    },
    backgroundColor: 'transparent',
    chartArea: {
      left:80,
      top:30,
      bottom:60,
      right:10
    },
    legend: {
      textStyle: {
        fontSize: 11
      }
    },
    vAxis: {
      title: 'Asset',
      textStyle: {
        fontName: 'Arial',
        fontSize: 10
      },
      titleTextStyle: {
        fontSize: 12,
        italic: false,
        bold:true
      }
    },
    hAxis: {
      title: 'Days in Stock',
      gridlines: {
        count: 22
      },
      textStyle: {
        fontName: 'Arial',
        fontSize: 11
      },
      titleTextStyle: {
        fontSize: 12,
        italic: false ,
        bold:true
      }
    },
    pointSize: 3,
    pointShape: 'circle',
    annotations: {
      alwaysOutside: true,
      textStyle: {
        fontName: 'Arial',
        fontSize: 9,
        color: '#000000',
        opacity: 1
      }
    }
  };

  var chartDiv = document.getElementById('chart_div');
  var chart = new google.visualization.BarChart(chartDiv);
  chart.draw(view, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

Upvotes: 4

Related Questions