Problem in coloring each bar in a Horizontal Bar chart

[Arghya chakroborty]

Hi,

I have been working with Google charts for quite some time now. But this time, I have an unique problem (not so 'unique' though).

My customer has asked me to build a 'horizontal' bar chart , which I opted to make using Google charts.

So far so good. But customer asked me whether they can mark some chosen bars with different color, which will be specified in some configuration file.

After lot of searching in internet , I have found "plenty" of answers, but none contributed to my problem.

Here is the code I wrote for creating the bar chart and setting colors for each bar -

---------------------------------- CODE ---------------------------------------------------------------------------------------------

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

google.charts.setOnLoadCallback(drawSPRCChart);

drawSPRCChart = function() {      

        data = new google.visualization.DataTable();

        data.addColumn('string', 'Subproject');

        data.addColumn('number', 'SPR Count');

        data.addColumn({type: 'string', role: 'style'});

        

// thRecords["rows"] contain the data. Sample is provided ......

        data.addRows(thRecords["rows"].length);

   

    for(i=0;i<thRecords["rows"].length;i++) {  

    var label = thRecords["rows"][i][0];

    var value = Number(thRecords["rows"][i][1]);

    var style = thRecords["rows"][i][2];

   

    data.setValue(i, 0, label);

    data.setValue(i, 1, value);

    data.setValue(i, 2, style);

    }

        var chart = new google.charts.Bar(document.getElementById('canvas_dahs'))

        var options = {

                bars: 'horizontal'

         };

        chart.draw(data, options);

};

---------------------------------- SAMPLE---------------------------------------------------------------------------------------------

thRecords["rows"' contain following 

[["IQ",10,"#B0E0E6"],["Detector_Accessories",66,"#B0E0E6"],["Electrical_SW",4,"#B0E0E6"],["IDC",8,"#B0E0E6"],["CSE",2,"#B0E0E6"],["IUI",2,"#B0E0E6"],["Systems",10,"#B0E0E6"],["BOSS",1,"#B0E0E6"],["ASTRA",14,"#FF0000"],["DM",2,"#B0E0E6"],["Inbox",1,"#B0E0E6"],["Service",1,"#B0E0E6"],["Calypso",5,"#FFD700"],["Hospital_Wireless",1,"#B0E0E6"]]

With the above code in place, I can see the Bar chart getting correctly displayed, BUT all in default colors . Attached the snapshot.

When I was utterly frustrated and thinking of all possible ways where my code might have went wrong, I figured out that all the examples that I have seen so far talks about column charts , not horizontal bar charts. So, I modified the code above to make it a column chart -

---------------------------------- CODE ---------------------------------------------------------------------------------------------

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

google.charts.setOnLoadCallback(drawSPRCChart);

drawSPRCChart = function() {  

        data = new google.visualization.DataTable();

        data.addColumn('string', 'Subproject');

        data.addColumn('number', 'SPR Count');

        data.addColumn({type: 'string', role: 'style'});

        // same thRecords["rows"] used as above sample 

        data.addRows(thRecords["rows"].length);

   

    for(i=0;i<thRecords["rows"].length;i++) {    

    var label = thRecords["rows"][i][0];

    var value = Number(thRecords["rows"][i][1]);

    var style = thRecords["rows"][i][2];

   

    data.setValue(i, 0, label);

    data.setValue(i, 1, value);

    data.setValue(i, 2, style);

    }

        var chart = new google.visualization.ColumnChart(document.getElementById('canvas_dahs'));

        chart.draw(data);

};

And WTF , it colored each of the columns as per the specification (see thRecords["rows"] above). Attached the snapshot of it as well .....

Could someone please tell me whether I am crazy or missing anything in my horizontal bar chart code ? Or is it the "famous" google chart , in which individual bar coloring only works for a specific chart type ?????

Thanks for reading and trying to address my problem......

[Daniel LaLiberte]

The google.charts.Bar chart has a slightly different API from the corecharts, and one difference is that it doesn't support separate colors for each data row.  If you want a horizontal bar chart that works like the ColumnChart, use google.visualization.BarChart();

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualization-api+unsub...@googlegroups.com.
To post to this group, send email to google-visualization-api@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/23b439cb-30ba-471f-b144-6c3cd286fc41%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

--

Daniel LaLiberte

dlaliberte@Google.com   5CC, Cambridge MA

[Arghya chakroborty]

Million of thanks to you for quickly solving my problem. You are the "Man" ......

Have a great day ahead ......

To post to this group, send email to google-visua...@googlegroups.com.

Visit this group at https://groups.google.com/group/google-visualization-api.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/23b439cb-30ba-471f-b144-6c3cd286fc41%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

--

Daniel LaLiberte

dlali...@Google.com   5CC, Cambridge MA