JSFiddle - React, Tailwind, and code Playground

by Slavik_ok

HTML

<script src="https://www.google.com/jsapi?fake=.js"></script>
<div id="dashboard">
    <div id="chart"></div>
    <div id="slider"></div>
</div>

CSS

/*
#dashboard {width: 500px; height: 400px;}
#chart {width: 500px; height: 300px;}
*/
#slider {height: 50px}

JavaScript

google.load('visualization', '1', { 'packages':['controls'] } );
google.setOnLoadCallback(requestData);

var from = 20150101;
var to = 20150301;
var period = 120; //in minutes


function requestData() {
    var script = document.createElement("script");
    script.src = "http://kvit.lv/for_tests/chatlogs/?from=" + from + "&to=" + to + "&period=" +period;
    document.body.appendChild(script);
}

var createChart = function(data) {
    
    var myData = new google.visualization.DataTable();
    myData.addColumn('datetime', 'Date');    
    myData.addColumn('number', 'Msg count');
    
    function draw() {
      // Create a dashboard.
      var dash_container = document.getElementById('dashboard'),
      myDashboard = new google.visualization.Dashboard(dash_container);
    
      // Create a date range slider
      var myDateSlider = new google.visualization.ControlWrapper({
        'controlType': 'ChartRangeFilter',
        'containerId': 'slider',
        'options': {
          'filterColumnLabel': 'Date',
        }
      });
    
      // Line chart visualization
      var myLine = new google.visualization.ChartWrapper({
        'chartType' : 'LineChart',
        'containerId' : 'chart',
      });
      
      // Bind myLine to the dashboard, and to the controls
      // this will make sure our line chart is update when our date changes
      myDashboard.bind(myDateSlider, myLine );
    
      myDashboard.draw(myData);
    }
   
    for (var i = 0; i < data.length; i++) {
        data[i][0] = new Date(data[i][0]);
    }
    myData.addRows(data);
    draw();
};