Google Line Chart
It's pretty easy to create powerful line charts using google charts, once you know how.
This tutorial gives you a minimal single-file example that you can copy/paste into an index.html file to get you started, along with the explanation of the various configuration options.
Directly below is a video demonstrating the capabilities.
Source Code And Config Explanations
<!doctype html>
<html lang="en">
<head>
<title>Google Line Chart Demo</title>
</head>
<body>
<div id="curve_chart" style="width: 100%; height: 500px"></div>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(chartLoadCallback);
/**
* Hook to be called by google chart when it has finished loading.
*/
function chartLoadCallback()
{
drawChart();
window.onresize = function(event) { drawChart(); };
}
/**
* Draw the chart. Calling this will replace the chart. You may wish to do this when you
* resize a window etc.
*/
function drawChart()
{
var chartData = [
['Week Number', 'Hours Worked', 'Total Hours', 'Required Total Hours'],
[1, 43, 42, 40],
[2, 38, 80, 80],
[3, 45, 125, 120],
[4, 40, 165, 160],
[5, 42, 207, 200],
[6, 41, 248, 240],
[7, 39, 287, 280],
[8, 43, 330, 320]
];
var dataTable = google.visualization.arrayToDataTable(chartData);
var options = {
"title": 'Loan Chart',
"curveType": 'function',
"legend": { "position": 'bottom' },
'chartArea': {'width': '80%', 'height': '80%'},
"selectionMode": 'multiple',
"tooltip": {"trigger": 'both'},
"aggregationTarget": 'none',
"focusTarget": "category",
"explorer" : {
"axis": 'horizontal',
"actions": ['dragToZoom', 'rightClickToReset']
},
"crosshair": {
"trigger": "both",
"orientation": 'vertical'
}
};
var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));
chart.draw(dataTable, options);
}
</script>
</body>
</html>
The key thing is to learn and edit the configuration options. I will explain the main ones that I used below.
aggregationTarget- We set this tonone, overridingauto, because we want to show one tooltip per selected point, rather than just one tooltip for all selected points.crosshair- by setting a crosshair with orientation vertical, we get that cool line following us along the x-axis as we hover over the graph and select points.explorer- with the explorer configuration I have set up, the user can use the mouse to zoom by dragging the mouse over the section they are interested in. Right clicking will reset the view. I only wanted to be able to zoom in on the x-axis.tooltip- I set trigger tobothso that I could see the tooltip data when hovering, not just when selecting a point.selectionMode- by setting this to multiple, I can have multiple points selected at the same time, not just one!
Last updated: 30th September 2018
First published: 16th August 2018
First published: 16th August 2018
