Customize Google line chart - javascript

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/

Related

showing the values in google-chart treemap

I have created a Treemap using google charts.
Here is the code:
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['treemap']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Location', 'Parent', 'Market trade volume (size)', 'Market increase/decrease (color)'],
['Global', null, 0, 0],
['America', 'Global', 20, 0],
['Europe', 'Global', 30, 0],
['Asia', 'Global', 10, 0],
['Australia', 'Global', 40, 0],
['Africa', 'Global', 30, 0],
]);
tree = new
google.visualization.TreeMap(document.getElementById('chart_div'));
google.visualization.events.addListener(tree, 'select', function () {
tree.setSelection([]);
});
tree.draw(data, {
headerHeight: 15,
fontColor: 'black',
showScale: true,
maxDepth: 2
});
}
</script>
</head>
<body>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
It shows the tree map as:
Now, I want to show the values of Market trade volume (size) as well on the treemap (without any action of the mouse). since It has only one layer so directly value can be shown without any calculation.
I searched in the documentation but couldn't find anything similar.
a couple assumptions are made here...
1) you do not want to show the value for Global --> Global(0)
2) you don't want to modify the values in the data table or how it is loaded
using object notation, we can provide the value (v:) and the formatted value (f:)
the chart will display the formatted value, but use the value when determining tree order
this allows us to change the display without affecting the relationships,
in case you have data with more than one layer...
as such, a DataView is used to modify the values
use the setColumns method to provide a calculated column for the label
var view = new google.visualization.DataView(data);
view.setColumns([{
calc: function (dt, row) {
var rowValue;
if (row === 0) {
rowValue = dt.getValue(row, 0); // value for global
} else {
// change display value by changing formatted value
rowValue = {
v: dt.getValue(row, 0),
f: dt.getValue(row, 0) + '(' + dt.getFormattedValue(row, 2) + ')'
};
}
return rowValue;
},
label: data.getColumnLabel(0),
type: data.getColumnType(0)
}, 1, 2, 3]);
see following working snippet...
google.charts.load('current', {
packages: ['treemap']
}).then(function () {
var data = google.visualization.arrayToDataTable([
['Location', 'Parent', 'Market trade volume (size)', 'Market increase/decrease (color)'],
['Global', null, 0, 0],
['America', 'Global', 20, 0],
['Europe', 'Global', 30, 0],
['Asia', 'Global', 10, 0],
['Australia', 'Global', 40, 0],
['Africa', 'Global', 30, 0],
]);
var view = new google.visualization.DataView(data);
view.setColumns([{
calc: function (dt, row) {
var rowValue;
if (row === 0) {
rowValue = dt.getValue(row, 0); // value for global
} else {
// change display value by changing formatted value
rowValue = {
v: dt.getValue(row, 0),
f: dt.getValue(row, 0) + '(' + dt.getFormattedValue(row, 2) + ')'
};
}
return rowValue;
},
label: data.getColumnLabel(0),
type: data.getColumnType(0)
}, 1, 2, 3]);
var tree = new google.visualization.TreeMap(document.getElementById('chart_div'));
google.visualization.events.addListener(tree, 'select', function () {
tree.setSelection([]);
});
tree.draw(view, {
headerHeight: 15,
fontColor: 'black',
showScale: true,
maxDepth: 2
});
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
Thanks to WhiteHat for putting me on the right track. Using his answer I've found another way to achieve this that deviates less from the original example.
This also allows nesting by the ID. In the example below, you can USA displays as 'United States of America', but the states below link back up to the 'USA' id.
More importantly for me is that it gives the ability for 2 items to have the same label. Notice there is a London in Europe>UK and America>Canada>Ontario.
google.charts.load('current', {'packages':['treemap']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Location', 'Parent', 'Market trade volume (size)', 'Market increase/decrease (color)'],
['Global', null, 0, 0],
['America', 'Global', 0, 0],
['Europe', 'Global', 30, 0],
['Asia', 'Global', 10, 0],
['Australia', 'Global', 40, 0],
['Africa', 'Global', 30, 0],
[{ v: 'USA', f: 'United States of America' }, 'America', 20, 0],
['Mexico', 'America', 24, 12],
['Canada', 'America', 16, -23],
['Ontario', 'Canada', 12, -9],
['Alberta', 'Canada', 24, 13],
['UK', 'Europe', 21, -5],
[{ v: '123', f: 'London' }, 'UK', 21, -5],
[{ v: '456', f: 'London' }, 'Ontario', 21, -5],
['Ohio', 'USA', 12, 3],
['Rhode Island', 'USA', 24, 4]
]);
tree = new
google.visualization.TreeMap(document.getElementById('chart_div'));
tree.draw(data, {
minColor: '#f00',
midColor: '#ddd',
maxColor: '#0d0',
headerHeight: 15,
fontColor: 'black'
});
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

Google Chart : How to change color for negative values

I currently have a nice AreaChart using GoogleCharts, however I'm trying to change the color and background color of the chart when values are negative.
From what I found, idea would be to display one area for positive values only, and another one for negative values, so that I could custom colors. However you can see below I didn't really success to do it.
Any idea?
Thanks,
Tim
google.charts.load('current', {
packages: ['corechart', 'line']
});
google.charts.setOnLoadCallback(drawLineColors);
function drawLineColors() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'X');
data.addColumn('number', 'Blue Team');
data.addColumn('number', 'Red Team');
data.addRows([
[0, 0, 0],
[3, 1700, 1600],
[6, 1800, 1700],
[9, 2500, 2423],
[12, 3000, 2500],
[15, 4700, 5800],
[18, 5200, 5900],
[21, 5500, 6000],
[24, 6000, 6200],
[27, 6800, 6700],
[30, 7500, 7000],
[33, 7800, 8200],
[36, 7900, 9756],
[39, 8000, 10752],
[42, 9000, 13753],
[45, 15000, 17845]
]);
var options = {
legend: {
position: 'top'
},
enableInteractivity: false,
width: 712,
height: 156,
backgroundColor: {
fill: 'transparent'
},
curveType: 'function',
hAxis: {
title: 'Time'
},
vAxis: {
title: 'Team Gold'
},
colors: ['#FF0000', '#0000FF']
};
var dataView = new google.visualization.DataView(data);
dataView.setColumns([0, {
calc: function(data, row) {
return data.getValue(row, 2) - data.getValue(row, 1);
},
type: 'number',
label: 'Blue'
}]);
dataView.setColumns([1, {
calc: function(data, row) {
return data.getValue(row, 1) - data.getValue(row, 2);
},
type: 'number',
label: 'Red'
}]);
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(dataView, options);
}
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
the config option for colors maps a color to each series
in this case, there is only one series (or column) -- variance
instead, use a style column role to define the color for each row
also: using setColumns multiple times, overwrites any previous calls to setColumns
provide all the columns at the same time
the columns array can contain...
an integer as a reference to a column index of the data table
or an object for a custom function
see following working snippet...
google.charts.load('current', {
callback: drawLineColors,
packages: ['corechart']
});
function drawLineColors() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'X');
data.addColumn('number', 'Blue Team');
data.addColumn('number', 'Red Team');
data.addRows([
[0, 0, 0],
[3, 1700, 1600],
[6, 1800, 1700],
[9, 2500, 2423],
[12, 3000, 2500],
[15, 4700, 5800],
[18, 5200, 5900],
[21, 5500, 6000],
[24, 6000, 6200],
[27, 6800, 6700],
[30, 7500, 7000],
[33, 7800, 8200],
[36, 7900, 9756],
[39, 8000, 10752],
[42, 9000, 13753],
[45, 15000, 17845]
]);
var options = {
legend: {
position: 'top'
},
enableInteractivity: false,
width: 712,
height: 156,
backgroundColor: {
fill: 'transparent'
},
curveType: 'function',
hAxis: {
title: 'Time'
},
vAxis: {
title: 'Team Gold'
}
};
var dataView = new google.visualization.DataView(data);
dataView.setColumns([
// reference first column by index
0,
// variance
{
calc: function(data, row) {
return data.getValue(row, 2) - data.getValue(row, 1);
},
type: 'number',
label: 'Y'
},
// variance color
{
calc: function(data, row) {
var val = data.getValue(row, 2) - data.getValue(row, 1);
if (val >= 0) {
return '#0000FF';
}
return '#FF0000';
},
type: 'string',
role: 'style'
}
]);
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(dataView, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
EDIT
or if you want separate lines for each team...
google.charts.load('current', {
callback: drawLineColors,
packages: ['corechart']
});
function drawLineColors() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'X');
data.addColumn('number', 'Blue Team');
data.addColumn('number', 'Red Team');
data.addRows([
[0, 0, 0],
[3, 1700, 1600],
[6, 1800, 1700],
[9, 2500, 2423],
[12, 3000, 2500],
[15, 4700, 5800],
[18, 5200, 5900],
[21, 5500, 6000],
[24, 6000, 6200],
[27, 6800, 6700],
[30, 7500, 7000],
[33, 7800, 8200],
[36, 7900, 9756],
[39, 8000, 10752],
[42, 9000, 13753],
[45, 15000, 17845]
]);
var options = {
legend: {
position: 'top'
},
enableInteractivity: false,
width: 712,
height: 156,
backgroundColor: {
fill: 'transparent'
},
curveType: 'function',
hAxis: {
title: 'Time'
},
vAxis: {
title: 'Team Gold'
},
colors: ['#0000FF', '#FF0000']
};
var dataView = new google.visualization.DataView(data);
dataView.setColumns([
// reference first column by index
0,
// team Y is better
{
calc: function(data, row) {
var val = data.getValue(row, 2) - data.getValue(row, 1);
if (val > 0) {
return val;
}
return null;
},
type: 'number',
label: 'Blue'
},
// team X is better
{
calc: function(data, row) {
var val = data.getValue(row, 1) - data.getValue(row, 2);
if (val > 0) {
return val;
}
return null;
},
type: 'number',
label: 'Red'
},
]);
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(dataView, options);
}
<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>

More than two Google Charts on a single page?

I've been struggling with this problem for a while now, and it seems like google has made a lot of minor changes to the Google Charts API over the years, which has been making it even harder to find an answer for why my charts aren't working.
I am simply trying to display more than two of the same chart type (Bar graphs) on a single page. Just today, I found a solution that allowed me to display 2 charts at once (link: "Google Charts stops drawing after first chart"), but this was only a minor win because I really need more than 2 charts to show, and this solution just forces one graph to render before the other.
Here is my current code:
Javascript
google.load('visualization', '1', {packages: ['corechart', 'line', 'bar']});
google.setOnLoadCallback(drawStuff);
function drawStuff() {
// Courses_Played Data
var data = new google.visualization.arrayToDataTable([
['', 'Number of Rounds Played'],
["Ken McDonald", 10],
["ASU Karsten", 8],
["TPC Scotts...", 7],
["Ahwatukee", 3],
['Other', 3]
]);
// Courses_played Options
var options = {
title: '',
width: 440,
height: 215,
legend: { position: 'none' },
axes: {x: {0: { side: 'bottom' }}},
bar: { groupWidth: "70%" },
colors: ['darkgreen'],
};
// Course_Scores Data
var data2 = new google.visualization.arrayToDataTable([
['', 'Number of Rounds Played'],
["TPC Scotts...", 81],
["ASU Karst...", 83],
["Ken McDonald", 87],
["Ahwatukee", 90],
]);
//Course_Scores Options
var options2 = {
title: '',
width: 440,
height: 215,
legend: { position: 'none' },
axes: {x: {0: { side: 'bottom' }}},
vAxis:{ viewWindow:{ min:60 }},
bar: { groupWidth: "70%" },
colors: ['darkgreen'],
};
var chart = new google.charts.Bar(document.getElementById('Courses_Played'));
google.visualization.events.addOneTimeListener(chart, 'ready', function(){
var chart2 = new google.charts.Bar(document.getElementById('Course_Scores'));
// Convert the Classic options to Material options.
chart2.draw(data2, google.charts.Bar.convertOptions(options2));
});
chart.draw(data, google.charts.Bar.convertOptions(options));
};
Again, this code currently works, but only because I used a solution that works for just two graphs. The problem seems to be in the final lines of code, because forcing chart2 to render before the first chart is what got it working. I just don't get what I need to do to allow for three or more graphs. Is there a way to force any number of charts to render one before the other?
The problem in Google Charts is that you can call google.charts.load() only once. So you need to include all the packages in this single function call and call this from head of the webpage.
You can include multiple packages like this:
<head><script type="text/javascript">
google.charts.load("current", {packages:["corechart","bar"]});
</script>
</head>
This solved my problem and allowed me to display multiple charts on a single page without changing any code.
To verify check this:
https://developers.google.com/chart/interactive/docs/basic_load_libs#basic-library-loading
The following example shows how to render 3 Google Charts (of google.charts.Bar type) on a single page:
google.load('visualization', '1', { packages: ['corechart', 'line', 'bar'] });
google.setOnLoadCallback(drawCharts);
function drawCharts() {
var chartsData = [
{
'data': [
['', 'Number of Rounds Played'],
["Ken McDonald", 10],
["ASU Karsten", 8],
["TPC Scotts...", 7],
["Ahwatukee", 3],
['Other', 3]
],
'options': {
title: '',
width: 440,
height: 215,
legend: { position: 'none' },
axes: { x: { 0: { side: 'bottom' } } },
bar: { groupWidth: "70%" },
colors: ['darkgreen'],
},
'chartDivId' : 'Courses_Played'
},
{
'data': [
['', 'Number of Rounds Played'],
["TPC Scotts...", 81],
["ASU Karst...", 83],
["Ken McDonald", 87],
["Ahwatukee", 90],
],
'options': {
title: '',
width: 440,
height: 215,
legend: { position: 'none' },
axes: { x: { 0: { side: 'bottom' } } },
vAxis: { viewWindow: { min: 60 } },
bar: { groupWidth: "70%" },
colors: ['darkgreen'],
},
'chartDivId' : 'Course_Scores'
},
{
'data': [
['', 'Number of Rounds Played in 2014'],
["Ken McDonald", 5],
["ASU Karsten", 4],
["TPC Scotts...", 7],
["Ahwatukee", 4],
['Other', 6]
],
'options': {
title: '',
width: 440,
height: 215,
legend: { position: 'none' },
axes: { x: { 0: { side: 'bottom' } } },
bar: { groupWidth: "70%" },
colors: ['darkgreen'],
},
'chartDivId' : 'Courses_Played2014'
},
];
drawBarCharts(chartsData);
};
function drawBarCharts(chartsData,index) {
var curIndex = index || 0;
var chartData = chartsData[curIndex];
var dataTable = new google.visualization.arrayToDataTable(chartData.data);
var chart = new google.charts.Bar(document.getElementById(chartData.chartDivId));
google.visualization.events.addOneTimeListener(chart, 'ready', function () {
if (curIndex < chartsData.length - 1)
drawBarCharts(chartsData, curIndex + 1);
});
chart.draw(dataTable, google.charts.Bar.convertOptions(chartData.options));
}
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<div id="Courses_Played"></div>
<div id="Courses_Played2014"></div>
<div id="Course_Scores"></div>
or using this way where charts are inserted on the page dynamically
google.load('visualization', '1', { packages: ['corechart', 'line', 'bar'] });
google.setOnLoadCallback(drawCharts);
function drawCharts() {
var chartsData = [
{
'data': [
['', 'Number of Rounds Played'],
["Ken McDonald", 10],
["ASU Karsten", 8],
["TPC Scotts...", 7],
["Ahwatukee", 3],
['Other', 3]
],
'options': {
title: '',
width: 440,
height: 215,
legend: { position: 'none' },
axes: { x: { 0: { side: 'bottom' } } },
bar: { groupWidth: "70%" },
colors: ['darkgreen'],
},
'chartDivId' : 'Courses_Played'
},
{
'data': [
['', 'Number of Rounds Played'],
["TPC Scotts...", 81],
["ASU Karst...", 83],
["Ken McDonald", 87],
["Ahwatukee", 90],
],
'options': {
title: '',
width: 440,
height: 215,
legend: { position: 'none' },
axes: { x: { 0: { side: 'bottom' } } },
vAxis: { viewWindow: { min: 60 } },
bar: { groupWidth: "70%" },
colors: ['darkgreen'],
},
'chartDivId' : 'Course_Scores'
},
{
'data': [
['', 'Number of Rounds Played in 2014'],
["Ken McDonald", 5],
["ASU Karsten", 4],
["TPC Scotts...", 7],
["Ahwatukee", 4],
['Other', 6]
],
'options': {
title: '',
width: 440,
height: 215,
legend: { position: 'none' },
axes: { x: { 0: { side: 'bottom' } } },
bar: { groupWidth: "70%" },
colors: ['darkgreen'],
},
'chartDivId' : 'Courses_Played2014'
},
];
drawBarCharts(chartsData);
};
function drawBarCharts(chartsData,index) {
var curIndex = index || 0;
var chartData = chartsData[curIndex];
var dataTable = new google.visualization.arrayToDataTable(chartData.data);
var chartDiv = document.createElement('div');
chartDiv.id = chartData.chartDivId;
document.getElementById('chartContainer').appendChild(chartDiv);
var chart = new google.charts.Bar(document.getElementById(chartDiv.id));
google.visualization.events.addOneTimeListener(chart, 'ready', function () {
if (curIndex < chartsData.length - 1)
drawBarCharts(chartsData, curIndex + 1);
});
chart.draw(dataTable, google.charts.Bar.convertOptions(chartData.options));
}
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<div id="chartContainer"></div>
I think you're having a problem with the current version, which has issues.
You shouldn't need to wait for one chart to load before loading another.
Here is an example that loads version 41 --> all 3 charts draw, without waiting on another.
google.charts.load('41', {packages: ['bar']});
google.charts.setOnLoadCallback(drawStuff);
function drawStuff() {
// Courses_Played Data
var data = new google.visualization.arrayToDataTable([
['', 'Number of Rounds Played'],
["Ken McDonald", 10],
["ASU Karsten", 8],
["TPC Scotts...", 7],
["Ahwatukee", 3],
['Other', 3]
]);
// Courses_played Options
var options = {
title: '',
width: 440,
height: 215,
legend: { position: 'none' },
axes: {x: {0: { side: 'bottom' }}},
bar: { groupWidth: "70%" },
colors: ['darkgreen'],
};
// Courses_Played2014 Data
var data3 = new google.visualization.arrayToDataTable([
['', 'Number of Rounds Played'],
["Ken McDonald", 14],
["ASU Karsten", 12],
["TPC Scotts...", 11],
["Ahwatukee", 7],
['Other', 7]
]);
// Courses_played2014 Options
var options3 = {
title: '',
width: 440,
height: 215,
legend: { position: 'none' },
axes: {x: {0: { side: 'bottom' }}},
bar: { groupWidth: "70%" },
colors: ['darkgreen'],
};
// Course_Scores Data
var data2 = new google.visualization.arrayToDataTable([
['', 'Number of Rounds Played'],
["TPC Scotts...", 81],
["ASU Karst...", 83],
["Ken McDonald", 87],
["Ahwatukee", 90],
]);
//Course_Scores Options
var options2 = {
title: '',
width: 440,
height: 215,
legend: { position: 'none' },
axes: {x: {0: { side: 'bottom' }}},
vAxis:{ viewWindow:{ min:60 }},
bar: { groupWidth: "70%" },
colors: ['darkgreen'],
};
var chart = new google.charts.Bar(document.getElementById('Courses_Played'));
var chart2 = new google.charts.Bar(document.getElementById('Course_Scores'));
var chart3 = new google.charts.Bar(document.getElementById('Courses_Played2014'));
chart.draw(data, google.charts.Bar.convertOptions(options));
chart2.draw(data2, google.charts.Bar.convertOptions(options2));
chart3.draw(data3, google.charts.Bar.convertOptions(options3));
};
<script src="https://www.gstatic.com/charts/loader.js"></script>
<script src="https://www.google.com/jsapi"></script>
<div id="Courses_Played"></div>
<div id="Courses_Played2014"></div>
<div id="Course_Scores"></div>
Am using gviz_api python module to load data.
In case helps:
change arrayToDataTable to DataTable

I can't get my pointLabels to work with my jqplot

I have a graph with 4 different lines plotted using jqplot. I don't really want to create a legend so I wanted to label each line. I saw that there's a feature called pointLabels however, my labels aren't showing.
//function for the line graph
$(document).ready(function () {
var yticks = ['Early Definition', 'Pre Alpha', 'Alpha', 'Beta', 'PV', 'Sprint To Launch'];
var line1 = [[0, 1, null], [10.4, 2, null], [20.8, 3, null], [31.2, 4, null], [41.6, 5, 'FFD'], [52, 6, null]];
var line2 = [[0, 1, null], [10.4, 1, null], [20.8, 2, null], [31.2, 3, null], [41.6, 4, 'Customer 1'], [52, 5, null]];
var line3 = [[0, 1, null], [10.4, 2, null], [20.8, 4, null], [31.2, 5, null], [41.6, 6, 'Customer 1']];
var line4 = [[0, 1, null], [10.4, 1, null], [20.8, 1, null], [31.2, 1, null], [41.6, 4, 'Customer 1'], [52, 5, null]];
var plot3 = $.jqplot('linegraph', [line1, line2, line3, line4],
{
title: 'All Companies',
// Series options are specified as an array of objects, one object
// for each series.
series: [
{
// Change our line width and use a diamond shaped marker.
lineWidth: 4,
markerOptions: { style: 'dimaond' },
//color: '#FFFFFF'
},
{
// Don't show a line, just show markers.
// Make the markers 7 pixels with an 'x' style
lineWidth: 4,
markerOptions: { size: 7, style: "x" }
},
{
// Use (open) circlular markers.
lineWidth: 4,
markerOptions: { style: "filledCircle" }
},
{
// Use a thicker, 5 pixel line and 10 pixel
// filled square markers.
lineWidth: 4,
markerOptions: { style: "filledSquare", size: 10 }
},
{
pointLabels: { show: true, location: 's', ypadding: 3 }
},
],
axes: {
xaxis: {
renderer: $.jqplot.DateAxisRenderer,
label: 'Work Weeks',
max: 55,
min: 0,
tickOptions: {
formatString: '%.0f',
},
},
yaxis: {
label: 'Phases',
renderer: $.jqplot.CategoryAxisRenderer,
ticks: yticks
}
},
}
);
});
I've made sure that I've included the script for the pointLabels too:
<script type="text/javascript" src="plugins/jqplot.pointLabels.js"></script>
You should move the point label options outside of the series array and into a seriesDefaults section:
seriesDefaults: {
pointLabels: { show: true, location: 's', ypadding: 3 }
}
Updated fiddle here:
http://jsfiddle.net/R6sFn/3/

Categories