JSFiddle - React, Tailwind, and code Playground

by larsenmtl

HTML

<script src="http://people.iola.dk/olau/flot/jquery.flot.js"></script>
<script src="http://people.iola.dk/olau/flot/jquery.flot.stack.js"></script>
<script src="http://people.iola.dk/olau/flot/jquery.flot.threshold.js"></script>
<br/><br/>
<div id="placeholder" style="width:600px;height:300px;"></div>

JavaScript

var d1 = [];
for (var i = 0; i <= 10; i += 1)
    d1.push([i, parseInt(Math.random() * 30)]);

var d2 = [];
for (var i = 0; i <= 10; i += 1)
    d2.push([i, parseInt(Math.random() * 30)]);

var d3 = [];
for (var i = 0; i <= 10; i += 1)
    d3.push([i, parseInt(Math.random() * 30)]);

var stack = 0, bars = true, lines = false, steps = false;


$.plot($("#placeholder"), [ d1, d2, d3 ], {
    series: {
        stack: true,      
        bars: { show: true, barWidth: 0.6 }
    },
    grid: {
           markings: [ { xaxis: { from: 0, to: 12 }, yaxis: { from: 0, to: 20 }, color: "#6D7B8D" }]
        }
});