Bars are colored by data series (columns in the DataTable), so if you want
your bars to be different colors, you have to split them into different
series (which it looks like you already did in your code). To fix the bar
width problem, you can set the "isStacked" option to true.
var options = {
title: "Job State Overview",
width: 600, height: 400,
vAxis: { title: "Number Of Jobs" },
hAxis: { title: "Job States " },
colors: ['blue', '0086ab', '00b2d9', '89bec7'],
isStacked: true
};
On Wednesday, October 23, 2013 7:00:10 AM UTC-4, Colm McLaughlin wrote:
>
> I have encountered a frustrating issue while using a bar chart.
> I have 4 columns each with one distinct value.
> I want to make the columns different colours.
> The colour assignment seems to assume there will be multiple bars in each
> column ie for 2001 you'll have Gross Profits & Net Profits and again for
> the next year.
> It seems to allow you to colour different sub bars within each column but
> not each column separately.
> I Have only one value in each year and want them to be different colours.
>
> This is the work around I have come up with but it makes each bar really
> skinny on a blank page essentially as it only showing 1/4 bars per column:
> Any Help would be gratefully appreciated.
> <script type="text/javascript" src="https://www.google.com/jsapi";>
> </script>
> <script type="text/javascript">
>
>
> google.load("visualization", "1", { packages: ["corechart"] });
> google.setOnLoadCallback(drawChart);
> function drawChart() {
> var data = google.visualization.arrayToDataTable([
> ['Job State', 'link', 'Total Jobs', 'Live Jobs', 'Draft Jobs', 'Closed
> Jobs'],
> ['Total Jobs', '/Activities/level1?job_Type_Id=5', 37, 0, 0, 0],
> ['Live Jobs', '/Activities/level1?job_Type_Id=2', 0,37, 0, 0],
> ['Draft Jobs', '/Activities/level1?job_Type_Id=1', 0, 0,0, 0],
> ['Closed Jobs', '/Activities/level1?job_Type_Id=3', 0, 0, 0,0]
> ]);
> var view = new google.visualization.DataView(data);
> view.setColumns([0, 2,3,4,5]);
>
>
> var options = {
> title: "Job State Overview",
> width: 600, height: 400,
> vAxis: { title: "Number Of Jobs" },
> hAxis: { title: "Job States " },
> colors: ['blue', '0086ab', '00b2d9', '89bec7']
> };
>
>
> var chart = new google.visualization.ColumnChart(
> document.getElementById('chart_div'));
> chart.draw(view, options);
>
>
> var selectHandler = function (e) {
> window.location = data.getValue(chart.getSelection()[0]['row'], 1);
> }
>
>
> google.visualization.events.addListener(chart, 'select', selectHandler);
> }
>
>
> </script>
>
>
--
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 [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/groups/opt_out.
