JSFiddle - React, Tailwind, and code Playground

by skilesare

HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<html>
  <head>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
      <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
      
    <script type="text/javascript">
		var fps = 15;
        var delay = 1000/5;
        var thisIteration = 0;
        var maxIteration = 200;
      google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        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',
          hAxis: {title: 'Year',  titleTextStyle: {color: 'red'}}
        };

        var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
        chart.draw(data, options);
        runAdd = function(){
        	setTimeout( function(){
			data.addRow([year,sales,expense]);
        	chart.draw(data, options);
        	year = (parseInt(year) +1).toString();
        	expense = expense *1.25;
            sales = sales * 1.35;
        	thisIteration = thisIteration +1;
            if(thisIteration< maxIteration)
            {
                runAdd();
            }
        },  delay);
        }
        year= '2008';
        sales = 1060;
        expense = 540;
        runAdd();
      }

    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 900px; height: 500px;"></div>
  </body>
</html>