Documentation v8.0.25

Preview Purchase

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.

JAVASCRIPT
HTML

// 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>

2021© Keenthemes

Explore Metronic

Demo1

Preview

Demo2

Preview

Demo3

Preview

Demo4

Preview

Demo5

Preview

Demo6

Preview

Demo7

Preview

Demo8

Preview

Demo9

Preview

Demo10

Coming soon

Demo11

Preview

Demo12

Coming soon

Demo13

Preview

Demo14

Coming soon

Demo15

Coming soon

Demo16

Coming soon

Demo17

Coming soon

Demo18

Coming soon

Demo19

Coming soon

Demo20

Coming soon

Purchase Metronic

Getting Started

Base

Forms

Editors

Charts

General

Icons

Documentation v8.0.25