We Keep Coding

Different color for each bar in Google Chart

I am using Google Column Chart for creating column chart for my application. I would like to be able to have different colors for each bar. I am inserting the colors attribute into the options variable but it's not working.
Can anyone help me on this?
My fiddle
var options = {
title: 'Motivation Level Throughout the Day',
hAxis: {
title: 'Time of Day',
format: 'h:mm a',
viewWindow: {
min: [7, 30, 0],
max: [17, 30, 0]
}
},
vAxis: {
title: 'Rating (scale of 1-10)'
},
tooltip: {isHtml: true},
colors: ['red','yellow', 'blue', 'red','yellow', 'blue', 'red','yellow', 'red','yellow']
};

each color in the colors config option maps to each series in the data table
a series is represented by each column after the x-axis column in the data table
here, there is only one series / data table column after the x-axis
[{v: [8, 0, 0], f: '8 am'}, 46], // <-- one series column
[{v: [9, 0, 0], f: '9 am'}, 46],
in order to use colors, it would need to look something like...
[{v: [8, 0, 0], f: '8 am'}, 46, null, null, null],
[{v: [9, 0, 0], f: '9 am'}, null, 46, null, null],
[{v: [10, 0, 0], f:'10 am'}, null, null, 34, null],
[{v: [11, 0, 0], f: '11 am'}, null, null, null, 4],
instead, we can use a 'style' column role,
this allows us to change the color for each row...
[{v: [8, 0, 0], f: '8 am'}, 46, 'red'],
[{v: [9, 0, 0], f: '9 am'}, 46, 'yellow'],
see following working snippet,
a 'style' column is added to the data view,
the colors are pulled from the existing colors option...
google.charts.load('current', {
packages: ['corechart']
}).then(drawBasic);
function drawBasic() {
var dataTable = new google.visualization.DataTable();
dataTable.addColumn('timeofday', 'Time of Day');
dataTable.addColumn('number', 'Motivation Level');
dataTable.addRows([
[{v: [8, 0, 0], f: '8 am'}, 46],
[{v: [9, 0, 0], f: '9 am'}, 46],
[{v: [10, 0, 0], f:'10 am'}, 34],
[{v: [11, 0, 0], f: '11 am'}, 4],
[{v: [12, 0, 0], f: '12 pm'}, 5],
[{v: [13, 0, 0], f: '1 pm'}, 6],
[{v: [14, 0, 0], f: '2 pm'}, 7],
[{v: [15, 0, 0], f: '3 pm'}, 8],
[{v: [16, 0, 0], f: '4 pm'}, 9],
[{v: [17, 0, 0], f: '5 pm'}, 10],
]);
var options = {
title: 'Motivation Level Throughout the Day',
hAxis: {
title: 'Time of Day',
format: 'h:mm a',
viewWindow: {
min: [7, 30, 0],
max: [17, 30, 0]
}
},
vAxis: {
title: 'Rating (scale of 1-10)'
},
tooltip: {isHtml: true},
colors: ['red', 'yellow', 'blue', 'red', 'yellow', 'blue', 'red', 'yellow', 'red', 'yellow'],
legend: {
position: 'none'
}
};
// create view with tooltip columns for each series
var viewColumns = [0];
var dataView = new google.visualization.DataView(dataTable);
$.each(new Array(dataTable.getNumberOfColumns()), function (index) {
// ignore x-axis column
if (index === 0) {
return;
}
// add series column
viewColumns.push(index);
// add tooltip column - column role should directly follow the series it represents
viewColumns.push({
calc: function (dt, row) {
// build tooltip
var tooltip = '<div class="ggl-tooltip"><div><span>';
tooltip += dt.getFormattedValue(row, 0) + '</span></div>';
tooltip += '<div>' + dt.getColumnLabel(index) + ': ';
tooltip += '<span>' + dt.getFormattedValue(row, index) + '</span></div>';
tooltip += '<div>Add whatever you want for column: ' + index + ', row: ' + row + '</div></div>';
return tooltip;
},
p: {html: true},
role: 'tooltip',
type: 'string'
});
// add style column for color
viewColumns.push({
calc: function (dt, row) {
// get color based on row index
return options.colors[row];
},
role: 'style',
type: 'string'
});
});
dataView.setColumns(viewColumns);
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(dataView.toDataTable(), options);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
note: using a 'style' column role invalidates the legend,
which will only show the first color (color for first series)

google.charts.load('current', {packages: ['corechart', 'bar']});
google.charts.setOnLoadCallback(drawBasic);
function drawBasic() {
var dataTable = new google.visualization.arrayToDataTable([]);
dataTable.addColumn('timeofday', 'Time of Day');
dataTable.addColumn('number', 'Motivation Level');
dataTable.addRows([
[{v: [8, 0, 0], f: '8 am'}, 46],
[{v: [9, 0, 0], f: '9 am'}, 46],
[{v: [10, 0, 0], f:'10 am'}, 34],
[{v: [11, 0, 0], f: '11 am'}, 4],
[{v: [12, 0, 0], f: '12 pm'}, 5],
[{v: [13, 0, 0], f: '1 pm'}, 6],
[{v: [14, 0, 0], f: '2 pm'}, 7],
[{v: [15, 0, 0], f: '3 pm'}, 8],
[{v: [16, 0, 0], f: '4 pm'}, 9],
[{v: [17, 0, 0], f: '5 pm'}, 10],
]);
var options = {
title: 'Motivation Level Throughout the Day',
hAxis: {
title: 'Time of Day',
format: 'h:mm a',
viewWindow: {
min: [7, 30, 0],
max: [17, 30, 0]
}
},
vAxis: {
title: 'Rating (scale of 1-10)'
},
tooltip: {isHtml: true},
colors: ['#FFD700', '#C0C0C0', '#8C7853']
};
// create view with tooltip columns for each series
var viewColumns = [0];
var dataView = new google.visualization.DataView(dataTable);
$.each(new Array(dataTable.getNumberOfColumns()), function (index) {
// ignore x-axis column
if (index === 0) {
return;
}
// add series column
viewColumns.push(index);
// add tooltip column - column role should directly follow the series it represents
viewColumns.push({
calc: function (dt, row) {
// build tooltip
var tooltip = '<div class="ggl-tooltip"><div><span>';
tooltip += dt.getFormattedValue(row, 0) + '</span></div>';
tooltip += '<div>' + dt.getColumnLabel(index) + ': ';
tooltip += '<span>' + dt.getFormattedValue(row, index) + '</span></div>';
tooltip += '<div>Add whatever you want for column: ' + index + ', row: ' + row + '</div></div>';
return tooltip;
},
p: {html: true},
role: 'tooltip',
type: 'string'
});
});
dataView.setColumns(viewColumns);
var chart = new google.visualization.ColumnChart(
document.getElementById('chart_div'));
chart.draw(dataView.toDataTable(), options);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

Google Charts upside-down area chart

How to create an area chart which has both normal area and "upside-down" area?
Already looked at their docs, but didn't find a solution there.
The end result should look like this:
You can see my current status in this jsfiddle.
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Blue', 'Red'],
['0', 0, 20],
['2', 0, 20],
['4', 0, 20],
['6', 1, 19],
['8', 2, 18],
['10', 3, 17],
['12', 4, 16],
['14', 5, 15],
['16', 6, 14],
['18', 7, 13],
['20', 8, 12],
['22', 9, 11],
['24', 10, 10]
]);
var options = {
title: 'Company Performance',
hAxis: {title: 'Year', titleTextStyle: {color: '#333'}},
vAxis: {minValue: 0}
};
var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
chart.draw(data, options);
}

The Google Charts AreaChart fills the area from the data line down or up to the baseline. But baselines (currently) only apply to axes, and you effectively want two different baselines, one at the top for one series and one at the bottom for the other series, so you'll have to do some trickery to get what you want.
Basically, target each series to a different axis, each with its own baseline, and align the two axes with the same viewWindow. Like so:
var options = {
title: 'Company Performance',
hAxis: {title: 'Year', titleTextStyle: {color: '#333'}},
vAxes: {
0: {viewWindow: { min: 0, max: 20 }, baseline: 0},
1: {viewWindow: { min: 0, max: 20 }, baseline: 20},
},
series: {
1: { targetAxisIndex: 1 }
}
};
See the update to your jsfiddle.

Is there a way to display the children labels in Google Charts' TreeMap

I'm trying to create a TreeMap using Google Charts that not only shows the parent label along with the children's color breakdowns, but also the children's labels. I basically want this (save possible children coloration):
I haven't found any online examples or questions on it, is this possible?

not sure that you can get exactly like the picture,
but if you want to show both the parent and child labels,
use option --> maxDepth: 2
note: duplicate child id's are not allowed,
here, object notation is used to provide a unique id,
but still display the same name on multiple nodes
{v: 'Rick0', f: 'Rick'}
{v: 'Rick1', f: 'Rick'}
where...
v: = value
f: = formatted value
see following working snippet...
google.charts.load('current', {
packages: ['treemap']
}).then(function () {
var data = google.visualization.arrayToDataTable([
['Person', 'Fruit', 'Size', 'Color'],
['Global', null, 0, 0],
['Bananas', 'Global', 0, 0],
[{v: 'Rick0', f: 'Rick'}, 'Bananas', 100, 0],
[{v: 'Anne0', f: 'Anne'}, 'Bananas', 40, 0],
[{v: 'Peter0', f: 'Peter'}, 'Bananas', 5, 0],
['Apples', 'Global', 0, 0],
[{v: 'Anne1', f: 'Anne'}, 'Apples', 20, 2],
[{v: 'Peter1', f: 'Peter'}, 'Apples', 20, 2],
[{v: 'Rick1', f: 'Rick'}, 'Apples', 15, 2],
['Oranges', 'Global', 0, 0],
[{v: 'Rick2', f: 'Rick'}, 'Oranges', 20, 1],
[{v: 'Peter2', f: 'Peter'}, 'Oranges', 20, 1],
[{v: 'Anne2', f: 'Anne'}, 'Oranges', 10, 1],
['Susanne', 'Global', 10, null]
]);
tree = new google.visualization.TreeMap(document.getElementById('chart_div'));
tree.draw(data, {
maxDepth: 2,
minColor: 'yellow',
midColor: 'orange',
maxColor: 'red',
noColor: 'lime',
});
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

Trying to get multiple Google Charts on one page, no luck

Ive been doing some research on stackoverflow however I cant seem to pinpoint my problem. This code worked for a little bit but it stopped working almost as fast. I am trying to get 3 google charts to show up on one page. Is there something wrong with the code?
Here it is below
<html>
<head>
<!--Load the AJAX API-->
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
// Load the Visualization API and the piechart package.
google.load('visualization', '1.0', {
'packages': ['line', 'corechart']
});
// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawChart);
// Callback that creates and populates a data table,
// instantiates the pie chart, passes in the data and
// draws it.
function drawChart() {
var chart0 = document.getElementById('curve_chart0');
var data0 = new google.visualization.DataTable();
data0.addColumn('string', '');
data0.addColumn('number', 'Altitude');
data0.addColumn('number', 'Speed');
data0.addRows([
['05:22:57', 6519, 0],
['05:24:00', 6519, 0],
['05:24:57', 6519, 0],
['05:25:57', 6519, 0],
['05:26:57', 6519, 0],
['05:27:58', 6519, 0],
['05:28:57', 6519, 0],
['05:29:58', 6519, 0],
['05:30:58', 6519, 0],
['05:31:58', 6519, 11],
['05:32:58', 6519, 0],
['05:33:58', 6519, 11]
]);
var options0 = {
chart: {
},
legend: {
position: 'none'
},
series: {
// Gives each series an axis name that matches the Y-axis below.
0: {
axis: 'Altitude'
},
1: {
axis: 'Speed'
}
},
width: 400,
height: 150,
axes: {
// Adds labels to each axis; they don't have to match the axis names.
y: {
Altitude: {
label: 'Altitude'
},
Speed: {
label: 'Speed'
}
}
}
};
chart0 = new google.charts.Line(document.getElementById('curve_chart0'));
chart0.draw(data0, options0);
var chart1 = document.getElementById('curve_chart1');
var data1 = new google.visualization.DataTable();
data1.addColumn('string', '');
data1.addColumn('number', 'Altitude');
data1.addColumn('number', 'Speed');
data1.addRows([
['05:39:58', 116, 0],
['05:40:58', 116, 0],
['05:41:58', 116, 0],
['05:42:58', 116, 0],
['05:43:58', 116, 0],
['05:44:59', 116, 1],
['05:45:59', 116, 0],
['05:46:59', 116, 0],
['05:47:59', 116, 0],
['05:48:59', 116, 33],
['05:49:59', 116, 19],
['05:50:59', 116, 21],
['05:51:59', 116, 7],
['05:52:59', 116, 85],
['05:53:59', 3019, 196]
]);
var options1 = {
chart: {
},
legend: {
position: 'none'
},
series: {
// Gives each series an axis name that matches the Y-axis below.
0: {
axis: 'Altitude'
},
1: {
axis: 'Speed'
}
},
width: 400,
height: 150,
axes: {
// Adds labels to each axis; they don't have to match the axis names.
y: {
Altitude: {
label: 'Altitude'
},
Speed: {
label: 'Speed'
}
}
}
};
chart1 = new google.charts.Line(document.getElementById('curve_chart1'));
chart1.draw(data1, options1);
var chart2 = document.getElementById('curve_chart2');
var data2 = new google.visualization.DataTable();
data2.addColumn('string', '');
data2.addColumn('number', 'Altitude');
data2.addColumn('number', 'Speed');
data2.addRows([
['23:58:54', 30, 0],
['23:59:54', 30, 0],
['00:00:54', 30, 1],
['00:01:54', 30, 1],
['00:02:54', 30, 0],
['00:03:54', 30, 0],
['00:04:54', 30, 0],
['00:05:54', 30, 13],
['00:06:54', 30, 17],
['00:07:54', 30, 21],
['00:08:54', 30, 5],
['00:09:55', 316, 178],
['00:10:55', 3770, 209],
['00:11:55', 6308, 241]
]);
var options2 = {
chart: {
},
legend: {
position: 'none'
},
series: {
// Gives each series an axis name that matches the Y-axis below.
0: {
axis: 'Altitude'
},
1: {
axis: 'Speed'
}
},
width: 400,
height: 150,
axes: {
// Adds labels to each axis; they don't have to match the axis names.
y: {
Altitude: {
label: 'Altitude'
},
Speed: {
label: 'Speed'
}
}
}
};
chart2 = new google.charts.Line(document.getElementById('curve_chart2'));
chart2.draw(data2, options2);
}
</script>
</head>
<body>
<!--Divs that will hold the charts-->
<div id="curve_chart0"></div>
<div id="curve_chart1"></div>
<div id="curve_chart2"></div>
</body>
</html>

The following displays as you want though it uses the classical charts.
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1.0', {
'packages': ['line', 'corechart']
});
google.setOnLoadCallback(drawChart);
function graph(div,data)
{
var data0 = new google.visualization.DataTable();
data0.addColumn('string', '');
data0.addColumn('number', 'Altitude');
data0.addColumn('number', 'Speed');
data0.addRows(data);
var options = {
chart: {
},
legend: {
position: 'none'
},
series: {
// Gives each series an axis name that matches the Y-axis below.
0: {targetAxisIndex: 0},
1: {targetAxisIndex: 1}
},
width: 400,
height: 150,
vAxes: {
// Adds labels to each axis; they don't have to match the axis names.
0: {title: 'Altitude'},
1: {title: 'Speed'}
}
};
var chart0 = new google.visualization.LineChart(document.getElementById(div));
chart0.draw(data0, options);
}
// Callback that creates and populates a data table,
// instantiates the pie chart, passes in the data and
// draws it.
function drawChart() {
graph('curve_chart0',[
['05:22:57', 6519, 0],
['05:24:00', 6519, 0],
['05:24:57', 6519, 0],
['05:25:57', 6519, 0],
['05:26:57', 6519, 0],
['05:27:58', 6519, 0],
['05:28:57', 6519, 0],
['05:29:58', 6519, 0],
['05:30:58', 6519, 0],
['05:31:58', 6519, 11],
['05:32:58', 6519, 0],
['05:33:58', 6519, 11]
]);
graph('curve_chart1',[
['05:39:58', 116, 0],
['05:40:58', 116, 0],
['05:41:58', 116, 0],
['05:42:58', 116, 0],
['05:43:58', 116, 0],
['05:44:59', 116, 1],
['05:45:59', 116, 0],
['05:46:59', 116, 0],
['05:47:59', 116, 0],
['05:48:59', 116, 33],
['05:49:59', 116, 19],
['05:50:59', 116, 21],
['05:51:59', 116, 7],
['05:52:59', 116, 85],
['05:53:59', 3019, 196]
]);
graph('curve_chart2',[
['23:58:54', 30, 0],
['23:59:54', 30, 0],
['00:00:54', 30, 1],
['00:01:54', 30, 1],
['00:02:54', 30, 0],
['00:03:54', 30, 0],
['00:04:54', 30, 0],
['00:05:54', 30, 13],
['00:06:54', 30, 17],
['00:07:54', 30, 21],
['00:08:54', 30, 5],
['00:09:55', 316, 178],
['00:10:55', 3770, 209],
['00:11:55', 6308, 241]
]);
}
</script>
</head>
<body>
<!--Divs that will hold the charts-->
<div id="curve_chart0"></div>
<div id="curve_chart1"></div>
<div id="curve_chart2"></div>
</body>
</html>

Try this it works:-
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1.0', { packages: ['line'] });
google.setOnLoadCallback(drawCharts);
function drawPageViews(chartReady) {
var data = new google.visualization.DataTable();
var div2 = document.getElementById("div2");
var labels = ['m', 'n', 'o', 'p', 'q', 'r', 's'];
data.addColumn('string', 'Day');
data.addColumn('number', 'PageViews');
var rows = new Array();
for (var i = 0; i < labels.length; i++) {
rows.push([labels[i], getRandomInt(0, 100)]);
}
data.addRows(rows);
var options = {
chart: {
title: 'Page views'
},
width: 900,
height: 500
};
var chart = new google.charts.Line(document.getElementById('div2'));
if(typeof chartReady !== 'undefined') google.visualization.events.addOneTimeListener(chart, 'ready', chartReady);
chart.draw(data, options);
}
function drawEventViews(chartReady) {
var data = new google.visualization.DataTable();
var div1 = document.getElementById("div1");
var labels = ['a', 'b', 'c', 'd', 'e', 'f', 'g'];
data.addColumn('string', 'Day');
data.addColumn('number', 'EventViews');
var rows = new Array();
for (var i = 0; i < labels.length; i++) {
rows.push([labels[i], getRandomInt(0, 100)]);
}
data.addRows(rows);
var options = {
chart: {
title: 'Event views'
},
width: 500,
height: 500
};
var chart = new google.charts.Line(document.getElementById('div1'));
if(typeof chartReady !== 'undefined') google.visualization.events.addOneTimeListener(chart, 'ready', chartReady);
chart.draw(data, options);
}
function drawCharts() {
drawPageViews(function(){
drawEventViews();
});
}
function getRandomInt(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
</script>
</head>
<body>
<div id="div2"></div>
<div id="div1"></div>
</body>
</html>

Customize Google line chart

I am working on project that need a line chart and I chose Google line chart because that is easy to get and fast to use but I have problem with customizing some feature in Google line chart is there a way to can customize Google chart like the this image?? I tried and use rotation but I didn't get the my outcome of that!!!
Here is the Google Line chart Sample Code
function drawChart() {
var data = google.visualization.arrayToDataTable([
['X', 'Y'],
[1, 100], // keep linked points adjacent
[1, 200],
[null, null], // insert blank row in between
[2, 150],
[2, 275],
[null, null],
[3, 75],
[3, 200],
[null, null],
[4, 100],
[4, 300]
]);
var chart = new google.visualization.LineChart(document.querySelector('#chart_div'));
chart.draw(data, {
height: 400,
width: 600,
pointSize: 20,
pointShape: 'triangle', rotation: 180
});
}
google.load('visualization', '1', {packages:['corechart'], callback: drawChart});

You can do this by splitting your data points into separate series and drawing them with different point shape options:
function drawChart() {
var data = google.visualization.arrayToDataTable([
['X', 'Y', 'Direction'],
[1, 100, 'down'], // keep linked points adjacent
[1, 200, 'up'],
[null, null, null], // insert blank row in between
[2, 150, 'down'],
[2, 275, 'up'],
[null, null, null],
[3, 75, 'down'],
[3, 200, 'up'],
[null, null, null],
[4, 100, 'down'],
[4, 300, 'up']
]);
var view = new google.visualization.DataView(data);
view.setColumns([0, 1, {
// down triangles
type: 'number',
calc: function (dt, row) {
return (dt.getValue(row, 2) == 'down') ? dt.getValue(row, 1) : null;
}
}, {
// up triangles
type: 'number',
calc: function (dt, row) {
return (dt.getValue(row, 2) == 'up') ? dt.getValue(row, 1) : null;
}
}]);
var chart = new google.visualization.LineChart(document.querySelector('#chart_div'));
chart.draw(view, {
height: 400,
width: 600,
series: {
0: {
// this will draw the line
pointSize: 0,
color: '#3366cc' // set the color so they are all the same
},
1: {
// this will draw the down triangles
lineWidth: 0,
pointSize: 20,
pointShape: {
type: 'triangle',
rotation: 180
},
visibleInLegend: false,
color: '#3366cc' // set the color so they are all the same
},
2: {
// this will draw the up triangles
lineWidth: 0,
pointSize: 20,
pointShape: {
type: 'triangle'
},
visibleInLegend: false,
color: '#3366cc' // set the color so they are all the same
}
}
});
}
google.load('visualization', '1', {packages:['corechart'], callback: drawChart});
http://jsfiddle.net/asgallant/6dhm8u3y/