JSFiddle - React, Tailwind, and code Playground

by ilyasnone

HTML

<script src="http://www.google.com/jsapi?fake=.js"></script>
<div id='test'></div>

JavaScript

google.load('visualization', '1', { packages: ['corechart'], callback: function() {
             var data = new google.visualization.arrayToDataTable([
            ['Year', 'Number of patents'],
            ['2008',  0],
            ['2009',  1],
            ['2010',  2],
            ['2011',  3],
            ['2012',  4],
            ['2013',  5]
        ]);

            var options = {               
                width:600, height:400,
                animation: { duration: 250 },
                hAxis: {title: "Application Year"}
            };
            var chart = new google.visualization.ColumnChart(document.getElementById('test'));

            var index = 0;
            var chartData = [ 2195, 2014, 2290, 2839, 2371, 493 ]
            var drawChart = function() {
                console.log('drawChart index ' + index);
                if (index < chartData.length) {
                    data.setValue(index, 1, chartData[index++]);
                    chart.draw(data, options);
                }
            }

            google.visualization.events.addListener(chart, 'animationfinish', drawChart);
            chart.draw(data, options);
            drawChart();
        }});