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.DataTable();
            data.addRows(5);

            data.addColumn('string', '');
            data.addColumn('number', 'Sales');
            data.addRows(5);
            data.setValue(0, 0, 'Jan');
            data.setValue(1, 0, 'Feb');
            data.setValue(2, 0, 'Mar');
            data.setValue(3, 0, 'Apr');
            data.setValue(4, 0, 'May');

            var options = {
                title: 'Sales by months for 2013 year', curveType: 'function',
                "vAxis": { "minValue": "0", "maxValue": 6 }, "hAxis": { "slantedTextAngle": "45", "slantedText": "true" }, "legend": { "position": "top" }, "pointSize": "5",
                animation: { duration: 250 }
            };
            var chart = new google.visualization.LineChart(document.getElementById('test'));

            var index = 0;
            var chartData = [ 5, 1, 4, 2, 3 ]
            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();
        }});