CODEWITHSUNDEEP
chartsgoogle-visualization
Banditvibe
Banditvibe

Reputation: 347

Google charts different colors w/ single series Material bar chart

Using {role: 'style'} I can apply different colors to a single series bar chart. But if I use the new Google "Material" barcharts, I can't.

"regular" Google charts (works):

google.load("visualization", '1.1', {packages:['corechart']});
google.setOnLoadCallback(drawChart);

function drawChart() {

   var data = google.visualization.arrayToDataTable([
       ['Element', 'Density', {role: 'style'} ],
       ['Copper', 8.94, 'color: #FF9900'],
       ['Silver', 10.49,'color: #109618'],
       ['Gold', 19.30,'color: #3B3EAC'],
       ['Platinum', 21.45,'color: #0099C6']
    ]);       

    var view = new google.visualization.DataView(data);


    var options = {
        title: "Density of Precious Metals, in g/cm^3",
        width: 600,
        height: 400,
        bar: {groupWidth: '85%'},
        legend: { position: 'none' },
    };

    var chart = new google.visualization.ColumnChart(document.getElementById('barchart_values'));
    chart.draw(view, options);
}

Same chart but using Google "Material" bar chart (different colors are not applied)

google.load("visualization", "1.1", {packages:["bar"]});
google.setOnLoadCallback(drawChart);
function drawChart() {

   var data = google.visualization.arrayToDataTable([
       ['Element', 'Density', { role: 'style' } ],
       ['Copper', 8.94, 'color: #FF9900'],
       ['Silver', 10.49,'color: #109618'],
       ['Gold', 19.30,'color: #3B3EAC'],
       ['Platinum', 21.45,'color: #0099C6']
  ]);   

  var view = new google.visualization.DataView(data);


  var options = {
    title: "Density of Precious Metals, in g/cm^3",
    width: 600,
    height: 400,
    bar: {groupWidth: '95%'},
    legend: { position: 'none' },
  };
    options = google.charts.Bar.convertOptions(options);
    var chart = new google.charts.Bar(document.getElementById('barchart_values'));
    chart.draw(view, options);
}

Upvotes: 4

Views: 2324

Answers (2)

Aravindh Gopi
Aravindh Gopi

Reputation: 2166

This one helps me out 

 var tmpColors = new Array(['orange'],['purple'],['red'],['green']);
    loop{
    .....
    .....
    options.colors = tmpColors[i];
    ....
    ....
    }

Upvotes: 0

davidkonrad
davidkonrad

Reputation: 85578

It really seems impossible. There is no clou anywhere for Material Charts using individual colors, and if you set a color array the old way, like colors: [...] the Material Chart just adopt the first color and add this to all the bars. I believe this is not implemented in Material Charts at all (yet?).

But if you really want to colorize the bars, you can do it by code :

function colorize() {
   var colors = ['#FF9900', '#109618', '#3B3EAC', '#0099C6'],
       svg = document.getElementById('barchart_values').querySelector('svg'),
       bars = svg.querySelectorAll('path');

   for (var i=0;i<bars.length;i++) {
       if (i !== selected) bars[i].setAttribute('fill', colors[i]);
   }    
}

colors[] are the colors from your data DataTable above. It is safe just to target <path>'s, since the paths that visualizes the bars are the only one present inside the <svg>.

This function can be triggered by the ready event :

google.visualization.events.addListener(chart, 'ready', colorize);

Since the chart is continuously redrawn upon select and onmouseover, attach listeners to those events too :

google.visualization.events.addListener(chart, 'select', colorize);
google.visualization.events.addListener(chart, 'onmouseover', colorize);

and let the user be able to select a bar, i.e dont redraw a selected bar :

function colorize() {
   var colors = ['#FF9900', '#109618', '#3B3EAC', '#0099C6'],
       selection = chart.getSelection(),
       selected = selection[0] ? selection[0].row : -1,
       svg = document.getElementById('barchart_values').querySelector('svg'),
       bars = svg.querySelectorAll('path');

   for (var i=0;i<bars.length;i++) {
       if (i !== selected) bars[i].setAttribute('fill', colors[i]);
   }    
}

your Material Chart added with the code from above -> http://jsfiddle.net/o00oayvu/

Upvotes: 2

Related Questions