JSFiddle - React, Tailwind, and code Playground

by victorxpp

HTML

<html>
    
    <head>
        <script type="text/javascript" src="https://www.google.com/jsapi"></script>
        <script type="text/javascript">
            google.load('visualization', '1', {
                packages: ['controls']
            });
            google.setOnLoadCallback(drawVisualization);

            function drawVisualization() {
                var dashboard = new google.visualization.Dashboard(
                document.getElementById('dashboard'));

                var control = new google.visualization.ControlWrapper({
                    'controlType': 'ChartRangeFilter',
                        'containerId': 'control',
                        'options': {
                        // Filter by the date axis.
                        'filterColumnIndex': 1,
                            'ui': {
                            'chartType': 'LineChart',
                                'chartOptions': {
                                'width': 985,
                                    'height': 70,
                                    'chartArea': {
                                    width: '80%', // make sure this is the same for the chart and control so the axes align right
                                    height: '80%'
                                },
                                    'hAxis': {
                                    
                                    'baselineColor': 'none',
                                     format: 'hh:mm:ss',
                    ticks: [
                        new Date(2013, 10, 2, 12, 0),
                        new Date(2013, 10, 2, 12, 10),
                        new Date(2013, 10, 2, 12, 20),
                        new Date(2013, 10, 2, 12, 30),
                        new Date(2013, 10, 2, 12, 40),
                        new Date(2013, 10, 2, 12, 50),
                        new Date(2013, 10, 2, 13, 0),
                        new Date(2013, 10, 2, 13, 10)
                    ]
                ...