Google Charts

Google chart tools are powerful, simple to use, and free. Try out our rich gallery of interactive charts and data tools.

help

Area Chart

                                                    
<div id="g-area-chart" style="width: 100%; height: 400px;"></div>
                                                    
                                                
                                                    
google.charts.load('current', { 'packages': ['corechart'] });
google.charts.setOnLoadCallback(drawAreaChart);

function drawAreaChart() {
    var data = google.visualization.arrayToDataTable([
        ['Year', 'Sales', 'Expenses'],
        ['2013', 1000, 400],
        ['2014', 1170, 460],
        ['2015', 660, 1120],
        ['2016', 1030, 540]
    ]);

    var options = {
        title: 'Company Performance',
        hAxis: { title: 'Year', titleTextStyle: { color: '#333' } },
        vAxis: { minValue: 0 }
    };

    var chart = new google.visualization.AreaChart(document.getElementById('g-area-chart'));
    chart.draw(data, options);
}
                                                    
                                                

Bar Chart

                                                    
<div id="barchart_material" style="width: 100%; height: 400px;"></div>
                                                    
                                                
                                                    
google.charts.load('current', { 'packages': ['bar'] });
google.charts.setOnLoadCallback(drawBarChart);

function drawBarChart() {
    var data = google.visualization.arrayToDataTable([
        ['Year', 'Sales', 'Expenses', 'Profit'],
        ['2014', 1000, 400, 200],
        ['2015', 1170, 460, 250],
        ['2016', 660, 1120, 300],
        ['2017', 1030, 540, 350]
    ]);

    var options = {
        chart: {
            title: 'Company Performance',
            subtitle: 'Sales, Expenses, and Profit: 2014-2017',
        },
        bars: 'vertical' // Required for Material Bar Charts.
    };

    var chart = new google.charts.Bar(document.getElementById('barchart_material'));

    chart.draw(data, google.charts.Bar.convertOptions(options));
}
                                                    
                                                

Line Chart

                                                    
<div id="line-chart" style="width: 100%; height: 400px"></div>
                                                    
                                                
                                                    
google.charts.load('current', { 'packages': ['corechart'] });
google.charts.setOnLoadCallback(drawLineChart);

function drawLineChart() {
    var data = google.visualization.arrayToDataTable([
        ['Year', 'Sales', 'Expenses'],
        ['2004', 1000, 400],
        ['2005', 1170, 460],
        ['2006', 660, 1120],
        ['2007', 1030, 540]
    ]);

    var options = {
        title: 'Company Performance',
        curveType: 'function',
        legend: { position: 'bottom' }
    };

    var chart = new google.visualization.LineChart(document.getElementById('line-chart'));

    chart.draw(data, options);
}
                                                    
                                                

Pie Chart

                                                    
<div id="pie-chart" style="width: 100%; height: 400px"></div>
                                                    
                                                
                                                    
google.charts.load('current', { 'packages': ['corechart'] });
google.charts.setOnLoadCallback(drawPieChart);

function drawPieChart() {

var data = google.visualization.arrayToDataTable([
    ['Task', 'Hours per Day'],
    ['Work',     11],
    ['Eat',      2],
    ['Commute',  2],
    ['Watch TV', 2],
    ['Sleep',    7]
]);

var options = {
    title: 'My Daily Activities'
};

var chart = new google.visualization.PieChart(document.getElementById('pie-chart'));

chart.draw(data, options);
}
                                                    
                                                

Donut Chart

                                                    
<div id="donut-chart" style="width: 100%; height: 400px"></div>
                                                    
                                                
                                                    
google.charts.load('current', { 'packages': ['corechart'] });
google.charts.setOnLoadCallback(drawDonutChart);

function drawDonutChart() {
var data = google.visualization.arrayToDataTable([
    ['Task', 'Hours per Day'],
    ['Work',     11],
    ['Eat',      2],
    ['Commute',  2],
    ['Watch TV', 2],
    ['Sleep',    7]
]);

var options = {
    title: 'My Daily Activities',
    pieHole: 0.4,
};

var chart = new google.visualization.PieChart(document.getElementById('donut-chart'));
chart.draw(data, options);
}
                                                    
                                                

Combo Chart

                                                    
<div id="combo-chart" style="width: 100%; height: 400px"></div>
                                                    
                                                
                                                    
google.charts.load('current', { 'packages': ['corechart'] });
google.charts.setOnLoadCallback(drawComboVisualization);

function drawComboVisualization() {
    // Some raw data (not necessarily accurate)
    var data = google.visualization.arrayToDataTable([
        ['Month', 'Bolivia', 'Ecuador', 'Madagascar', 'Papua New Guinea', 'Rwanda', 'Average'],
        ['2004/05',  165,      938,         522,             998,           450,      614.6],
        ['2005/06',  135,      1120,        599,             1268,          288,      682],
        ['2006/07',  157,      1167,        587,             807,           397,      623],
        ['2007/08',  139,      1110,        615,             968,           215,      609.4],
        ['2008/09',  136,      691,         629,             1026,          366,      569.6]
    ]);

var options = {
    title : 'Monthly Coffee Production by Country',
    vAxis: {title: 'Cups'},
    hAxis: {title: 'Month'},
    seriesType: 'bars',
    series: {5: {type: 'line'}}
};

var chart = new google.visualization.ComboChart(document.getElementById('combo-chart'));
chart.draw(data, options);
}
                                                    
                                                

Table Chart

                                                    
<div id="table-chart"></div>
                                                    
                                                
                                                    
google.charts.load('current', { 'packages': ['table'] });
google.charts.setOnLoadCallback(drawTable);

function drawTable() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Name');
data.addColumn('number', 'Salary');
data.addColumn('boolean', 'Full Time Employee');
data.addRows([
    ['Mike',  {v: 10000, f: '$10,000'}, true],
    ['Jim',   {v:8000,   f: '$8,000'},  false],
    ['Alice', {v: 12500, f: '$12,500'}, true],
    ['Bob',   {v: 7000,  f: '$7,000'},  true]
]);

var table = new google.visualization.Table(document.getElementById('table-chart'));

table.draw(data, {showRowNumber: true, width: '100%', height: '100%'});
}
                                                    
                                                

Bubble Chart

                                                    
<div id="bubble-chart" style="width: 100%; height: 400px;"></div>
                                                    
                                                
                                                    
google.charts.load('current', { 'packages': ['corechart'] });
google.charts.setOnLoadCallback(drawSeriesChart);

function drawSeriesChart() {

    var data = google.visualization.arrayToDataTable([
    ['ID', 'Life Expectancy', 'Fertility Rate', 'Region',     'Population'],
    ['CAN',    80.66,              1.67,      'North America',  33739900],
    ['DEU',    79.84,              1.36,      'Europe',         81902307],
    ['DNK',    78.6,               1.84,      'Europe',         5523095],
    ['EGY',    72.73,              2.78,      'Middle East',    79716203],
    ['GBR',    80.05,              2,         'Europe',         61801570],
    ['IRN',    72.49,              1.7,       'Middle East',    73137148],
    ['IRQ',    68.09,              4.77,      'Middle East',    31090763],
    ['ISR',    81.55,              2.96,      'Middle East',    7485600],
    ['RUS',    68.6,               1.54,      'Europe',         141850000],
    ['USA',    78.09,              2.05,      'North America',  307007000]
    ]);

    var options = {
    title: 'Correlation between life expectancy, fertility rate ' +
            'and population of some world countries (2010)',
    hAxis: {title: 'Life Expectancy'},
    vAxis: {title: 'Fertility Rate'},
    bubble: {textStyle: {fontSize: 11}}
    };

    var chart = new google.visualization.BubbleChart(document.getElementById('bubble-chart'));
    chart.draw(data, options);
}
                                                    
                                                

Geo Chart

                                                    
<div id="geo-chart" style="width: 100%; height: 400px;"></div>
                                                    
                                                
                                                    
google.charts.load('current', { 'packages': ['geochart'] });
google.charts.setOnLoadCallback(drawRegionsMap);

function drawRegionsMap() {
    var data = google.visualization.arrayToDataTable([
        ['Country', 'Popularity'],
        ['Germany', 200],
        ['United States', 300],
        ['Brazil', 400],
        ['Canada', 500],
        ['France', 600],
        ['RU', 700]
    ]);

    var options = {};

    var chart = new google.visualization.GeoChart(document.getElementById('geo-chart'));

    chart.draw(data, options);
}