CODEWITHSUNDEEP
javascriptchartsgoogle-visualization
mrpepper
mrpepper

Reputation: 55

Set colour of google bar chart via role:style

From a dynamically generate data array I am creating a DataTable and want to style it in a google charts as a bar chart. I am going thru every data entry and creating a label and annotation.

But how do I give the column a certain colour?

I figured out that I need to use the role "style" but could not figure out the right syntax for the colour.

var dataTable = google.visualization.arrayToDataTable(data);
        //Formatters
        var intergerFormatter = new google.visualization.NumberFormat({
            groupingSymbol: ",",
            fractionDigits: 0
        });
        for (var i = 0; i < data[0].length; i++) {
            intergerFormatter.format(dataTable, i);
        }

        var view = new google.visualization.DataView(dataTable);
        var cols = [0];
        for (var i = 1; i < data[0].length; i++) {
            cols.push({
                sourceColumn: i,
                type: "number",
                label: data[0][i]
            });
            cols.push({
                calc: "stringify",
                sourceColumn: i,
                type: "string",
                role: "annotation"
            });
            cols.push({
                //the following options are not working...
                role: "style: green"
                'color: green'
                color: "#109618"
            });
        }
        view.setColumns(cols);
        var chart = new google.visualization.ColumnChart(document.getElementById('PTCoverage'));
        chart.draw(view, options);

Upvotes: 3

Views: 4430

Answers (2)

mrpepper
mrpepper

Reputation: 55

I now managed to implement an array which returns a new color for evry bar, see below.

var colors = ['#66cc33','#3366CC','#DC3912','#FF9900','#DD4477','#994499','#0099C6','#109618'];
//...
cols.push({
    sourceColumn: i,
    calc: function () { 
        ccount++;
        return colors[ccount];
    },
    role: "style",
    type: "string"
});
//...

But this only adds the colors to the data in SR2, SR3 and SR4 have the colors as before, see pic (green color in the left chart, pink color in the midle and right for positive tested) enter image description here

I think it might be because my data looks like this

        var data = [
            ['Release', 'Test Case missing', 'negative tested', 'untested', 'partially tested','tested with restrictions','part tested with restrictions', 'positive tested'],
            ['SR2', MS2PTStatusMask.TCmissing,MS2PTStatusMask.NegTested,MS2PTStatusMask.UnTested,MS2PTStatusMask.RestTested,MS2PTStatusMask.PartTestWithRest,MS2PTStatusMask.PartTested,MS2PTStatusMask.PosTested],
            ['SR3', MS3PTStatusMask.TCmissing,MS3PTStatusMask.NegTested,MS3PTStatusMask.UnTested,MS3PTStatusMask.RestTested,MS3PTStatusMask.PartTestWithRest,MS3PTStatusMask.PartTested,MS3PTStatusMask.PosTested],
            ['SR4', MS4PTStatusMask.TCmissing,MS4PTStatusMask.NegTested,MS4PTStatusMask.UnTested,MS4PTStatusMask.RestTested,MS4PTStatusMask.PartTestWithRest,MS4PTStatusMask.PartTested,MS4PTStatusMask.PosTested],
        ]

How do I add the colors to the other bars?

Upvotes: 0

WhiteHat
WhiteHat

Reputation: 61230

use the calc function to return the value for the calculated column... 

cols.push({
    calc: function () {
      return "green";
    },
    role: "style",
    type: "string"
});

UPDATE

if the bars for every row in a specific column should be the same color,
don't need the 'style' column
use the colors configuration option instead

the colors option takes an array of colors,
one for each column / series

one series... 

colors: ["green"]

two series... 

colors: ["green", "red"]

etc...

EXAMPLE 1

using colors config option to apply colors to columns... 

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

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['x', 'y0', 'y1', 'y2'],
    ['Test 1',  500, 600, 1200],
    ['Test 2',  500, 600, 1200]
  ]);

  var options = {
    colors: ['green', 'red', 'blue']
  };

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

EXAMPLE 2

use a 'style' column to change the colors for column / series 1...
(which basically overrides "green") 

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

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['x', 'y0', {role: 'style', type: 'string'}, 'y1', 'y2'],
    ['Test 1',  500, 'cyan', 600, 1200],
    ['Test 2',  500, 'magenta', 600, 1200]
  ]);

  var options = {
    colors: ['green', 'red', 'blue']
  };

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

Upvotes: 1

Related Questions