JSFiddle - React, Tailwind, and code Playground

by lid0

HTML

<!--
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/rickshaw/1.5.1/rickshaw.min.js"></script>

<link src="https://cdnjs.cloudflare.com/ajax/libs/rickshaw/1.5.1/rickshaw.min.css"></link>
-->

<div id="content">
	<div id="chart"></div>
</div>

JavaScript

$(document).ready(function(){
    var scripts = [
        "https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js",
        "https://cdnjs.cloudflare.com/ajax/libs/rickshaw/1.5.1/rickshaw.min.js"
    ];
    var _loaded = scripts.length;
    
    function on_asset_load(){
        _loaded--;
        if(_loaded === 0){
            begin();
        }
    }
    
    scripts.forEach( function(item){
        $.getScript(item,on_asset_load); 
    });
    
    var rickshaw_css = $("<link>");
    rickshaw_css.attr("src","https://cdnjs.cloudflare.com/ajax/libs/rickshaw/1.5.1/rickshaw.min.css");

    
    $(document.body).append(rickshaw_css);//.append(rickshaw).append(rickshaw_css);

    
    function begin(){
        var tv = 250;
    
    // instantiate our graph!
    var graph = new Rickshaw.Graph( {
        element: document.getElementById("chart"),
        width: 400,
        height: 150,
        renderer: 'line',
        series: new Rickshaw.Series.FixedDuration([{ name: 'one' }], undefined, {
            timeInterval: tv,
            maxDataPoints: 100,
            timeBase: new Date().getTime() / 1000
        }) 
    } );
    
    graph.render();
    
    // add some data every so often
    
    var i = 0;
    var iv = setInterval( function() {
    
        var data = { one: Math.floor(Math.random() * 40) + 120 };
    
        var randInt = Math.floor(Math.random()*100);
        data.two = (Math.sin(i++ / 40) + 4) * (randInt + 400);
        data.three = randInt + 300;
    
        graph.series.addData(data);
        graph.render();
    
    }, tv );
    
    }
    
    
});