JSFiddle - React, Tailwind, and code Playground

by webdevem

HTML

<script src="http://www.google.com/jsapi?fake=.js"></script>
<div id="myLineChart" class="cssDiv"></div>
<div id="myTable" class="cssDiv"></div>
<hr>
<div id="myDials" class="cssDiv"></div>

CSS

body {padding: 15px;font-size: 10px;background-color: #eaeaff;}
.cssDiv {margin: 10px;}

JavaScript

google.load('visualization', '1', {
    packages: ['corechart', 'table', 'gauge']
});
google.setOnLoadCallback(myInit);

function myInit() {
    drawCharts();
    drawGauge();
}

function drawCharts() {

    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Fiscal Year');
    data.addColumn('number', 'Revenue');
    data.addColumn('number', 'Overhead Costs');
    data.addColumn('number', 'Client Fees');
    data.addRow(["FY10", 12, 21, 9]);
    data.addRow(["FY11", 15, 17, 23]);
    data.addRow(["FY12", 19, 13, 14]);
    data.addRow(["FY13", 35, 11, 27]);

    var options = {
        title: 'Company Performance',
        hAxis: {
            title: 'Year',
            titleTextStyle: {
                color: 'red'
            },
            backgroundColor: 'transparent'
        }
    };

    var areaChart = new google.visualization.LineChart(document.getElementById('myLineChart'));
    areaChart.draw(data, options);


    var table = new google.visualization.Table(document.getElementById('myTable'));
    table.draw(data, {
        showRowNumber: true,
        width: 500
    });
}


function drawGauge() {
    gaugeData = google.visualization.arrayToDataTable([
        ['RPM', 'Speed'],
        [120, 80]
    ]);

    gauge = new google.visualization.Gauge(document.getElementById('myDials'));
    gaugeOptions = {
        min: 0,
        max: 280,
        yellowFrom: 200,
        yellowTo: 250,
        redFrom: 250,
        redTo: 280,
        minorTicks: 5
    };
    gauge.draw(gaugeData, gaugeOptions);
}

function changeTemp(dir) {
    gaugeData.setValue(0, 0, gaugeData.getValue(0, 0) + dir * 25);
    gaugeData.setValue(0, 1, gaugeData.getValue(0, 1) + dir * 20);
    gauge.draw(gaugeData, gaugeOptions);
}