Programster's Blog

Tutorials focusing on Linux, programming, and open-source

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 to none, overriding auto, 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 to both so 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

This blog is created by Stuart Page

I'm a freelance web developer and technology consultant based in Surrey, UK, with over 10 years experience in web development, DevOps, Linux Administration, and IT solutions.

Need support with your infrastructure or web services?

Get in touch