JSFiddle - React, Tailwind, and code Playground

by andrelaszlo

HTML

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

CSS

#chart {
    width: 800px;
    height: 500px;
}

JavaScript

function randomWalkInt() {
    return Math.round(Math.random()*2)-1;
}

function randomizeData(n) {
    var result = [["Day", "Happiness", "Energy", "Motivation"]];
    var d, h, e, m;
    d = h = e = m = 0;
    while (n > 0) {
        result.push([d, h, e, m]);
        d++;
        h += randomWalkInt();
        e += randomWalkInt();
        m += randomWalkInt();
        n--;
    }
    return result;
}

function drawChart() {
    /*
    var data = [
        ['Date', 'Happiness', 'Energy', 'Motivation'],
        ['2015-06-22',  0, 0, 0],
        ['2015-06-23',  1, 1, 1],
        ['2015-06-24',  2, 0, 2],
        ['2015-06-24',  3, 1, 3],
        ['2015-06-24',  4, 2, 3],
        ['2015-06-24',  3, 1, 3],
        ['2015-06-24',  2, 1, 3],
    ];
    */
    var data = randomizeData(30);
    console.log(data);
    var dataTable = google.visualization.arrayToDataTable(data);
    
    var options = {
        title: 'Your mood',
        //curveType: 'function',
        series: {
            0: { lineWidth: 16},
            1: { lineWidth: 8},
            2: { lineWidth: 4},
        },
        legend: { position: 'bottom' }
    };
    
    var chart = new google.visualization.LineChart(document.getElementById('chart'));
    
    chart.draw(dataTable, options);
}

google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);