Logo

Documentation v8.2.7

  • Home
  • Google Charts
  • Line Chart
Downloads Preview
Light
Dark
System
Google chart tools are powerful, simple to use, and free. For more info see the official site.

Line Chart Example

Here's an example of a Line Chart. For more info, please visit the official website. 
// GOOGLE CHARTS INIT
google.load('visualization', '1', {
    packages: ['corechart', 'bar', 'line']
});

google.setOnLoadCallback(function () {
    // LINE CHART
    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)'
        },
        colors: ['#6e4ff5', '#f6aa33', '#fe3995']
    };

    var chart = new google.charts.Line(document.getElementById('kt_docs_google_chart_line'));
    chart.draw(data, options);
});
<div id="kt_docs_google_chart_column"></div>
buy metronic buy mega bundle
Preview Get Help Buy Now