Million of thanks to you for quickly solving my problem. You are the "Man"
......
Have a great day ahead ......
On Wednesday, 1 March 2017 15:40:18 UTC-6, Daniel LaLiberte wrote:
>
> 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();
>
> On Wed, Mar 1, 2017 at 4:05 PM, Arghya chakroborty <arghya...@gmail.com
> <javascript:>> wrote:
>
>> 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......
>>
>> --
>> 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+unsubscr...@googlegroups.com
>> <javascript:>.
>> To post to this group, send email to google-visua...@googlegroups.com
>> <javascript:>.
>> 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
>>
>> <https://groups.google.com/d/msgid/google-visualization-api/23b439cb-30ba-471f-b144-6c3cd286fc41%40googlegroups.com?utm_medium=email&utm_source=footer>
>> .
>> For more options, visit https://groups.google.com/d/optout.
>>
>
>
>
> --
> Daniel LaLiberte <https://plus.google.com/100631381223468223275?prsrc=2>
> dlali...@google.com <javascript:> 5CC, Cambridge MA
>
--
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+unsubscr...@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/8c321910-688a-4f1f-95b0-c5377a8a3c1b%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
