Google Chart Pie Chart

by liggth

HTML

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div" style="width: 900px; height: 500px;"></div>

JavaScript

google.charts.load('current', {'packages': ['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
    var data = google.visualization.arrayToDataTable([
        ['Year', 'Sales', 'Expenses'],
        ['2013', 1000, 400],
        ['2014', 1170, 460],
        ['2015', 660, 1120],
        ['2016', 1030, 540]
    ]);
 
    var columns = [];
    var series = {};
    for (var i = 0; i < data.getNumberOfColumns(); i++) {
        columns.push(i);
        if (i > 0) {
            series[i - 1] = {};
        }
    }
 
    var options = {
        title: 'Chart title',
        vAxis: {minValue: 0},
        tooltip: {trigger: 'selection'},
        aggregationTarget: 'category',
        series: series
    };
 
    var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
    chart.draw(data, options);
 
    google.visualization.events.addListener(chart, 'select', function () {
        var sel = chart.getSelection();
        if (sel.length > 0) {
            if (sel[0].row === null) {
                var col = sel[0].column;
                if (columns[col] == col) {
                    columns[col] = {
                        label: data.getColumnLabel(col),
                        type: data.getColumnType(col),
                        calc: function () {
                            return null;
                        }
                    };
                    series[col - 1].color = '#CCCCCC';
                }
                else {
                    columns[col] = col;
                    series[col - 1].color = null;
                }
                var view = new google.visualization.DataView(data);
                view.setColumns(columns);
                chart.draw(view, options);
            }
        }
    });
}