I am trying to follow the Creating Material Line Charts example in the Google Docs but I am unable to determine the format of the JSON used by the Line Chart. How can I display the JSON of the DataTable object?
google.charts.load('current', {'packages':['line']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'Day');
data.addColumn('number', 'Guardians of the Galaxy');
data.addColumn('number', 'The Avengers');
data.addColumn('number', 'Transformers: Age of Extinction');
data.addRows([
[1, 37.8, 80.8, 41.8],
[2, 30.9, 69.5, 32.4],
[3, 25.4, 57, 25.7],
[4, 11.7, 18.8, 10.5],
[5, 11.9, 17.6, 10.4],
[6, 8.8, 13.6, 7.7],
[7, 7.6, 12.3, 9.6],
[8, 12.3, 29.2, 10.6],
[9, 16.9, 42.9, 14.8],
[10, 12.8, 30.9, 11.6],
[11, 5.3, 7.9, 4.7],
[12, 6.6, 8.4, 5.2],
[13, 4.8, 6.3, 3.6],
[14, 4.2, 6.2, 3.4]
]);
var options = {
chart: {
title: 'Box Office Earnings in First Two Weeks of Opening',
subtitle: 'in millions of dollars (USD)'
},
width: 900,
height: 500
};
var chart = new google.charts.Line(document.getElementById('linechart_material'));
chart.draw(data, google.charts.Line.convertOptions(options));
}
I was able to figure out the correct format of the JSON for the line chart for the example.
{
"cols":[
{"label":"Day","type":"number"},
{"label":"Guardians","type":"number"},
{"label":"Avengers","type":"number"},
{"label":"Transformers","type":"number"}
],
"rows":[
{"c":[{"v":1},{"v":37.8},{"v":80.8},{"v":41.8}]},
{"c":[{"v":2},{"v":30.9},{"v":69.5},{"v":32.4}]},
{"c":[{"v":3},{"v":25.4},{"v":57.0},{"v":25.7}]},
{"c":[{"v":4},{"v":11.7},{"v":18.8},{"v":10.5}]},
{"c":[{"v":5},{"v":11.9},{"v":17.6},{"v":10.4}]},
{"c":[{"v":6},{"v":8.8},{"v":13.6},{"v":7.7}]},
{"c":[{"v":7},{"v":7.6},{"v":12.3},{"v":9.6}]},
{"c":[{"v":8},{"v":12.3},{"v":29.2},{"v":10.6}]},
{"c":[{"v":9},{"v":16.9},{"v":42.9},{"v":14.8}]},
{"c":[{"v":10},{"v":12.8},{"v":30.9},{"v":11.6}]},
{"c":[{"v":11},{"v":5.3},{"v":7.9},{"v":4.7}]},
{"c":[{"v":12},{"v":6.6},{"v":8.4},{"v":5.2}]},
{"c":[{"v":13},{"v":4.8},{"v":6.3},{"v":3.6}]},
{"c":[{"v":14},{"v":4.2},{"v":6.2},{"v":3.4}]}
]}
Related
I'm using google charts for my project and I have requirement of a chart both x-axis and y-axis labels should start from up to bottom , So In the below code x-axis points are moved to top , And now also i want to start the Y-axis point begin from top to bottom and not bottom to top. Here I written the code below, Can any one help us.
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['line']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'Day');
data.addColumn('number', 'Guardians of the Galaxy');
data.addColumn('number', 'The Avengers');
data.addColumn('number', 'Transformers: Age of Extinction');
data.addRows([
[1, 1, 80.8, 41.8],
[2, 1, 69.5, 32.4],
[3, 1, 57, 25.7],
[4, 1, 18.8, 10.5],
[5, 1, 17.6, 10.4],
[6, 1, 13.6, 7.7],
[7, 7.6, 12.3, 9.6],
[8, 12.3, 29.2, 10.6],
[9, 16.9, 42.9, 14.8],
[10, 12.8, 30.9, 11.6],
[11, 5.3, 7.9, 4.7],
[12, 6.6, 8.4, 5.2],
[13, 4.8, 6.3, 3.6],
[14, 4.2, 6.2, 3.4]
]);
var options = {
chart: {
title: 'Box Office Earnings in First Two Weeks of Opening',
subtitle: 'in millions of dollars (USD)'
},
width: 900,
height: 500,
axes: {
x: {
0: {side: 'top'}
},
y: {
0: {side: 'top'}
}
}
};
var chart = new google.charts.Line(document.getElementById('line_top_x'));
chart.draw(data, google.charts.Line.convertOptions(options));
}
</script>
</head>
<body>
<div id="line_top_x"></div>
</body>
</html>
`
there is an axis configuration option for: direction
The direction in which the values along the axis grow. Specify -1 to reverse the order of the values.
the problem here is that Material charts do not support this option,
see Tracking Issue for Material Chart Feature Parity...
and Classic charts do not have an option to present the x-axis on top.
however, we can manually modify the chart on the 'ready' event.
to resolve, we use a Classic chart, and reverse the order of the y-axis labels.
then manually move the x-axis labels to the top.
vAxis: {
direction: -1
}
but first, we must use the following option to create room at the top.
chartArea: {
top: 72
},
we must also move the title up slightly, to make room for the labels.
see following working snippet...
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
var data = new google.visualization.DataTable();
data.addColumn('number', 'Day');
data.addColumn('number', 'Guardians of the Galaxy');
data.addColumn('number', 'The Avengers');
data.addColumn('number', 'Transformers: Age of Extinction');
data.addRows([
[1, 1, 80.8, 41.8],
[2, 1, 69.5, 32.4],
[3, 1, 57, 25.7],
[4, 1, 18.8, 10.5],
[5, 1, 17.6, 10.4],
[6, 1, 13.6, 7.7],
[7, 7.6, 12.3, 9.6],
[8, 12.3, 29.2, 10.6],
[9, 16.9, 42.9, 14.8],
[10, 12.8, 30.9, 11.6],
[11, 5.3, 7.9, 4.7],
[12, 6.6, 8.4, 5.2],
[13, 4.8, 6.3, 3.6],
[14, 4.2, 6.2, 3.4]
]);
var options = {
title: 'Box Office Earnings in First Two Weeks of Opening\nin millions of dollars (USD)',
width: 900,
height: 500,
chartArea: {
top: 72
},
vAxis: {
direction: -1
}
};
var chart = new google.visualization.LineChart(document.getElementById('line_top_x'));
google.visualization.events.addListener(chart, 'ready', function () {
var chartLayout = chart.getChartLayoutInterface();
var chartBounds = chartLayout.getChartAreaBoundingBox();
var labels = chart.getContainer().getElementsByTagName('text');
var fontSize;
var yCoord;
Array.prototype.forEach.call(labels, function(label) {
fontSize = parseFloat(label.getAttribute('font-size'));
switch (label.getAttribute('text-anchor')) {
// chart title
case 'start':
yCoord = parseFloat(label.getAttribute('y'));
label.setAttribute('y', yCoord - fontSize);
break;
// x-axis labels
case 'middle':
label.setAttribute('y', chartBounds.top - (fontSize / 2));
break;
// y-axis labels
default:
// ignore
}
});
});
chart.draw(data, options);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="line_top_x"></div>
I am trying to create a line chart using google visualization. So I copied the example from their web page chart example and it works.
The only change I wanted to make is for the x-axis to be dates rather than a number. So the first section of code below works fine, its from their site.
<!DOCTYPE html>
<html lang="en-US">
<body>
<div id="linechart_material"></div>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
// Load google charts
google.charts.load('current', {'packages':['line']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'Day');
data.addColumn('number', 'Guardians of the Galaxy');
data.addColumn('number', 'The Avengers');
data.addColumn('number', 'Transformers: Age of Extinction');
data.addRows([
[1, 37.8, 80.8, 41.8],
[2, 30.9, 69.5, 32.4],
[3, 25.4, 57, 25.7],
[4, 11.7, 18.8, 10.5],
[5, 11.9, 17.6, 10.4],
[6, 8.8, 13.6, 7.7],
[7, 7.6, 12.3, 9.6],
[8, 12.3, 29.2, 10.6],
[9, 16.9, 42.9, 14.8],
[10, 12.8, 30.9, 11.6],
[11, 5.3, 7.9, 4.7],
[12, 6.6, 8.4, 5.2],
[13, 4.8, 6.3, 3.6],
[14, 4.2, 6.2, 3.4]
]);
var options = {
chart: {
title: 'Box Office Earnings in First Two Weeks of Opening',
subtitle: 'in millions of dollars (USD)'
},
width: 900,
height: 500
};
var chart = new google.charts.Line(document.getElementById('linechart_material'));
chart.draw(data, google.charts.Line.convertOptions(options));
}
</script>
</body>
</html>
However when I make the following changes nothing is displayed,
data.addColumn('number', 'Day'); to data.addColumn('date', 'Day');
And change the data.addRows bit to,
data.addRows([
[new date(2018,1, 1), 37.8, 80.8, 41.8],
[new date(2018,1, 2), 30.9, 69.5, 32.4],
[new date(2018,1, 3), 25.4, 57, 25.7],
[new date(2018,1, 4), 11.7, 18.8, 10.5],
[new date(2018,1, 5), 11.9, 17.6, 10.4],
[new date(2018,1, 6), 8.8, 13.6, 7.7],
[new date(2018,1, 7), 7.6, 12.3, 9.6],
[new date(2018,1, 8), 12.3, 29.2, 10.6],
[new date(2018,1, 9), 16.9, 42.9, 14.8],
[new date(2018,1, 10), 12.8, 30.9, 11.6],
[new date(2018,1, 11), 5.3, 7.9, 4.7],
[new date(2018,1, 12), 6.6, 8.4, 5.2],
[new date(2018,1, 13), 4.8, 6.3, 3.6],
[new date(2018,1, 14), 4.2, 6.2, 3.4]
]);
the D in new Date should be capitalized...
data.addRows([
[new Date(2018,1, 1), 37.8, 80.8, 41.8], // <-- be sure Date is capitalized
I'm trying to display this chart and sometimes there will be null values in each row. I've added the "interpolateNulls" to my options but it still isn't working. Is is probably an easy fix but I am stuck.
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'Day');
data.addColumn('number', 'Guardians of the Galaxy');
data.addColumn('number', 'The Avengers');
data.addColumn('number', 'Transformers: Age of Extinction');
data.addRows([
[1, 37.8, 80.8, 41.8],
[2, 30.9, 69.5, 32.4],
[3, 25.4, 57, 25.7],
[4, 11.7, 18.8, 10.5],
[5, 11.9, 17.6, 10.4],
[6, 8.8, 13.6, 7.7],
[7, 7.6, 12.3, 9.6],
[8, 12.3, 29.2, 10.6],
[9, null, 42.9, null],
[10, 12.8, 30.9, 11.6],
[11, 5.3, 7.9, 4.7],
[12, 6.6, 8.4, 5.2],
[13, 4.8, 6.3, 3.6],
[14, 4.2, 6.2, 3.4]
]);
var options = {
chart: {
title: 'Box Office Earnings in First Two Weeks of Opening',
subtitle: 'in millions of dollars (USD)',
},
interpolateNulls: true,
width: 900,
height: 500
};
var chart = new google.charts.Line(document.getElementById('linechart-material'));
chart.draw(data, google.charts.Line.convertOptions(options));
}
interpolateNulls is one of many options not supported by Material charts
Material: google.charts.Line
see --> Tracking Issue for Material Chart Feature Parity
instead, recommend using a Classic chart, with the following option...
theme: 'material'
Classic: google.visualization.LineChart
I want to know if it's possible to add company name or company logo in Google charts. I have a chart like the one given below. I want to add logo or the company name to the right of the chart title as given below in the screenshot.
I am making my chart dowloadable. So i cannot add company name as an overlay. It would be great if i can add a watermark as well.
google.charts.load('current', {'packages':['line']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'Day');
data.addColumn('number', 'Guardians of the Galaxy');
data.addColumn('number', 'The Avengers');
data.addColumn('number', 'Transformers: Age of Extinction');
data.addRows([
[1, 37.8, 80.8, 41.8],
[2, 30.9, 69.5, 32.4],
[3, 25.4, 57, 25.7],
[4, 11.7, 18.8, 10.5],
[5, 11.9, 17.6, 10.4],
[6, 8.8, 13.6, 7.7],
[7, 7.6, 12.3, 9.6],
[8, 12.3, 29.2, 10.6],
[9, 16.9, 42.9, 14.8],
[10, 12.8, 30.9, 11.6],
[11, 5.3, 7.9, 4.7],
[12, 6.6, 8.4, 5.2],
[13, 4.8, 6.3, 3.6],
[14, 4.2, 6.2, 3.4]
]);
var options = {
chart: {
title: 'Box Office Earnings in First Two Weeks of Opening',
},
width: 900,
height: 500,
axes: {
x: {
0: {side: 'top'}
}
}
};
var chart = new google.charts.Line(document.getElementById('line_top_x'));
chart.draw(data, google.charts.Line.convertOptions(options));
}
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
</head>
<body>
<div id="line_top_x"></div>
</body>
</html>
I have made a line chart with week numbers on the horizontal axis. It is meant to display a year and should therefore start at 1 and end at 52. I've tried using hAxis: {maxValue: 52} but it doesn't seem to work. Here are my settings:
<script type="text/javascript">
google.charts.load('current', {'packages':['line']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'Ugenr.');
data.addColumn('number', 'Anbefalet pris');
data.addColumn('number', 'Nuværende pris');
data.addRows([
[1, 37.8, 41.8],
[2, 6.6, 32.4],
[3, 25.4, 25.7],
[4, 11.7, 10.5],
[5, 11.9, 6.6],
[6, 8.8, 7.7],
[7, 7.6, 9.6],
[8, 12.3, 10.6],
[9, 6.6, 14.8],
[10, 12.8, 11.6],
[11, 5.3, 4.7],
[12, 6.6, 5.2],
[13, 4.8, 3.6],
[14, 4.2, 3.4],
[15, 8.8, 31.8],
[16, 30.9, 6.6],
[17, 25.4, 25.7],
[18, 11.7, 10.5],
[19, 11.9, 10.4],
[20, 6.6, 7.7],
[21, 7.6, 9.6],
[22, 12.3, 10.6],
[23, 16.9, 14.8],
[24, 12.8, 11.6],
[25, 5.3, 4.7],
[26, 6.6, 5.2],
[27, 4.8, 3.6],
[28, 4.2, 6.6],
[29, 37.8, 41.8],
[30, 30.9, 32.4],
[31, 25.4, 25.7],
[32, 11.7, 10.5],
[33, 11.9, 10.4],
[34, 8.8, 7.7],
[35, 7.6, 9.6],
[36, 12.3, 10.6],
[37, 16.9, 14.8],
[38, 12.8, 11.6],
[39, 5.3, 4.7],
[40, 6.6, 5.2],
[41, 6.6, 3.6],
[42, 4.2, 6.6],
[43, 4.2, 3.4],
[44, 37.8, 41.8],
[45, 30.9, 32.4],
[46, 25.4, 25.7],
[47, 11.7, 10.5],
[48, 11.9, 6.6],
[49, 8.8, 7.7],
[50, 7.6, 9.6],
[51, 6.6, 10.6],
[52, 16.9, 14.8]
]);
var options = {
chart: {
title: 'Anbefalede og nuværende ugepriser',
subtitle: 'anbefalede priser = blå, nuværende priser = rød',
hAxis: {maxValue: 52}
},
legend: { position:'none' },
height: 500,
explorer: { actions: ['dragToZoom', 'rightClickToReset'] }
};
var chart = new google.charts.Line(document.getElementById('linechart_material'));
chart.draw(data, options);
}
$(window).resize(function(){
drawChart();
});
</script>
It seems like many options of the Classic Charts are still not implemented in the Material Charts, including hAxis.minValue.
A possible workaround is to explicitly define your own labels, by using strings instead of numbers for your first column.
For instance (here with a label every 5 weeks):
data.addColumn('string', 'Ugenr.');
// ...
// the original data set is unchanged
var dataset = [
[1, 37.8, 41.8],
[2, 6.6, 32.4],
// ...
];
// convert the 1st column to string
dataset = dataset.map(function(r) {
return [!((r[0] - 1) % 5) ? r[0] + '' : '', r[1], r[2]];
});
data.addRows(dataset);
See a complete demo in this JSFiddle.
However, this version is not entirely satisfying because you won't get the week number when you put your mouse over a point for which it's not defined. So you may want to do return [r[0] + '', r[1], r[2]]; instead in the map() callback.