Programster's Blog

Tutorials focusing on Linux, programming, and open-source

Google Line Chart

JavaScript Google-charts charts

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