StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POgannt chart formed by google bar chart: different color to each bar
text
Body
copied!<p>I have the following sort of gantt chart coded up using Google Charts, but I would like to assign different color to each bar. Now in my case since I am assigning a transparent color to spacer , I dont understand how I can assign a different color to each remaining bar. </p> <p>This probably comes down to assigning the same series in different bars different colors.</p> <p>Can someone help me out with fixing this?</p> <p><a href="http://jsfiddle.net/bootkick/hp2yr/" rel="nofollow">http://jsfiddle.net/bootkick/hp2yr/</a></p> <pre><code> google.load('visualization', '1', { packages: ['corechart'] }); google.setOnLoadCallback(drawChart); function drawChart() { var data = new google.visualization.DataTable(); data.addColumn('string', 'Name'); data.addColumn('timeofday', 'spacer'); data.addColumn('timeofday', 'Runtume'); data.addRows([ ['PIPE', [5, 0, 0, 0], [7, 30, 0, 0] ], ['CNI', [6, 0, 0, 0], [12, 30, 0, 0] ], ['PEVC', [11, 0, 0, 0], [17, 30, 0, 0] ] ]); var chart = new google.visualization.BarChart(document.getElementById('chart_div')); chart.draw(data, { isStacked: true, width: 900, height: data.getNumberOfRows() * 80, title: 'Host Runtimes', vAxis: { title: 'Content', titleTextStyle: { color: 'black' } }, series: { 0: { visibleInLegend: false, color: 'transparent' } } }); /*chart.draw(data, {isStacked: true, series: [ {color: 'blue', visibleInLegend: false}, {color: 'red', visibleInLegend: false} ] });*/ } </code></pre> <p>Thanks</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload