Documentation v8.0.25

Preview Purchase

Google chart tools are powerful, simple to use, and free. For more info see the official site.

Column Chart Example

Here's an example of a Column 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 () {
    // COLUMN CHART
    var data = new google.visualization.DataTable();
    data.addColumn('timeofday', 'Time of Day');
    data.addColumn('number', 'Motivation Level');
    data.addColumn('number', 'Energy Level');

    data.addRows([
        [{
            v: [8, 0, 0],
            f: '8 am'
        }, 1, .25],
        [{
            v: [9, 0, 0],
            f: '9 am'
        }, 2, .5],
        [{
            v: [10, 0, 0],
            f: '10 am'
        }, 3, 1],
        [{
            v: [11, 0, 0],
            f: '11 am'
        }, 4, 2.25],
        [{
            v: [12, 0, 0],
            f: '12 pm'
        }, 5, 2.25],
        [{
            v: [13, 0, 0],
            f: '1 pm'
        }, 6, 3],
        [{
            v: [14, 0, 0],
            f: '2 pm'
        }, 7, 4],
        [{
            v: [15, 0, 0],
            f: '3 pm'
        }, 8, 5.25],
        [{
            v: [16, 0, 0],
            f: '4 pm'
        }, 9, 7.5],
        [{
            v: [17, 0, 0],
            f: '5 pm'
        }, 10, 10],
    ]);

    var options = {
        title: 'Motivation and Energy Level Throughout the Day',
        focusTarget: 'category',
        hAxis: {
            title: 'Time of Day',
            format: 'h:mm a',
            viewWindow: {
                min: [7, 30, 0],
                max: [17, 30, 0]
            },
        },
        vAxis: {
            title: 'Rating (scale of 1-10)'
        },
        colors: ['#6e4ff5', '#fe3995']
    };

    var chart = new google.visualization.ColumnChart(document.getElementById('kt_docs_google_chart_column'));
    chart.draw(data, options);
});

<div id="kt_docs_google_chart_column"></div>

Getting Started

Base

Forms

Editors

Charts

General

Icons

Documentation v8.0.25

Column Chart Example

Explore Metronic

Metronic Licenses

Metronic Demos

Getting Started

Base

Forms

Editors

Charts

General

Icons

Documentation v8.0.25

No result found

Column Chart Example

Explore Metronic

Metronic Licenses

Metronic Demos