[Test] Legend - Interactive

Animated interactive legend.

by cristiscu

HTML

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" /><meta http-equiv="X-UA-Compatible" content="IE=edge" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js" type="text/javascript"></script>
<script src="https://www.gstatic.com/charts/loader.js" type="text/javascript"></script>
<div class="chart_cont">
    <div id="chart_div"></div>
</div>

CSS

body { padding:0; margin:0; border: none; }
#chart_div, #ContentChartPh_chart_img, .chart_cont { width: 300px; height: 185px; padding:0; margin:0; border: none; position:relative; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; }
#chart_div {  background-repeat: no-repeat; background-position: center center; background-color: #fff; background-image:url("http://res.cloudinary.com/chart-templates/image/upload/img/chart-loading.gif"); }
#chart_div svg { height: 185px; }
img { z-index: -1; }
#chart_div table { width: auto; margin: 0 auto !important; }

JavaScript

google.charts.load('current', {
    callback: makeChart,
    'packages': [ 'corechart']
});
function makeChart() {
    var options = {
        width: 300,
        height: 185,
        pieStartAngle: 0,
        is3D: false,
        enableInteractivity: true,
        tooltip: { trigger: 'none', },
        title: "Google Charts - Grouped Column",
        legend: {
            position: "right", 
            alignment: "center",
        },
        chartArea : {
            width: "40%",
        },
        hAxis: {
        },
        vAxis: {
        },
        annotations: {
        },
    };
    var chartDiv = $("#chart_div")[0];
    var data = google.visualization.arrayToDataTable(
        [['value', 'month', { role: 'annotation' }],
        ['Jan', 51, 51], ['Feb', 62, 62], ['Mar', 123, 123]]);
    var viewColumns = null;
    viewColumns = [0, 1];
    options.vAxis.minValue = 0;
    var xTitle = "month";
    var yTitle = "value";
    options.isStacked = "false";
    data = google.visualization.arrayToDataTable([
        ['month', 'Toyota', { role: 'annotation' }, 'Ford', { role: 'annotation' }, 'Fiat', { role: 'annotation' }], 
        ['Jan', 10, 10, 24, 24, 20, 20 ], ['Feb', 16, 16, 22, 22, 23, 23 ], ['Mar', 28, 28, 19, 19, 29, 29 ]
    ]);
    viewColumns = [0, 1, 3, 5];
    var chart = new google.visualization.ColumnChart(chartDiv);



    google.visualization.events.addListener(chart, 'select', 
    function () {
        var sel = chart.getChart().getSelection();
        if (sel.length == 0 || sel[0].row != null) return;
        
      var col = sel[0].column;
      if (typeof(columns[col]) == 'number') {
        var src = columns[col];
        columns[col] = {
          label: data.getColumnLabel(src),
          type: data.getColumnType(src),
          sourceColumn: src,
          calc: function () { return null; }
        };
        series[columnsMap[src]].color = '#CCCCCC';
      }
      else {
        var src = columns[col].sourceColumn;
       ...