JSFiddle - React, Tailwind, and code Playground

by demee

HTML

<script src="http://github.com/DmitryBaranovskiy/g.raphael/blob/master/g.raphael-min.js?raw=true"></script>
<div id="holder"></div>

<script type="text/javascript" src="http://github.com/DmitryBaranovskiy/g.raphael/blob/master/g.raphael-min.js?raw=true"></script>
<script type="text/javascript" src="http://github.com/DmitryBaranovskiy/g.raphael/blob/master/g.line-min.js?raw=true"></script>

CSS

body {
    background: #999 url(http://raphaeljs.com/images/bgbg.png);
    font: 100.01% "Fontin Sans", Fontin-Sans, "Myriad Pro", "Lucida Grande", "Lucida Sans Unicode", Lucida, Verdana, Helvetica, sans-serif;
    color: #000;
    margin: 10px 0 0 0;
    padding: 0;
    text-align: center;
}
#holder {
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -webkit-box-shadow: 0 1px 3px #666;
    background: #ddd url(http://raphaeljs.com/images/bg.png);
    margin: 0 auto;
    width: 640px;
    height: 480px;
}
p {
    text-align: left;
    margin: .5em 2em;
}

JavaScript

window.onload = function () {
    var r = Raphael("holder");
    r.g.txtattr.font = "12px 'Fontin Sans', Fontin-Sans, sans-serif";
    
    var x = [], y = [], y2 = [], y3 = [];
    for (var i = 0; i < 1e6; i++) {
        x[i] = i * 10;
        y[i] = (y[i - 1] || 0) + (Math.random() * 7) - 3;
        y2[i] = (y2[i - 1] || 150) + (Math.random() * 7) - 3.5;
        y3[i] = (y3[i - 1] || 300) + (Math.random() * 7) - 4;
    }
    x4 = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
    y4 = [1, 2, 3,4, 5, 4, 3, 2, 1]
    
    r.g.linechart(10, 10, 300, 220, x4, [y4], {shade: true, gutter: 1});
 

};