JSFiddle - React, Tailwind, and code Playground

by javaparknet

HTML

<script src="http://chartplay.jui.io/lib/jquery-1.8.0.min.js"></script>
<script src="http://chartplay.jui.io/lib/jui/js/core.min.js"></script>
<script src="http://chartplay.jui.io/lib/jui/js/ui.min.js"></script>
<script src="http://chartplay.jui.io/lib/jui/js/grid.min.js"></script>
<script src="http://chartplay.jui.io/lib/jui/js/chart.min.js"></script>
<div id="result"></div>

JavaScript

var chart = jui.include("chart.builder"),
    data = [];

for(var i = 1; i <= 30; i++) {
    data.push({ date : i, value : Math.floor(Math.random() * 100) + 1 });
}

c = chart("#result", {
    axis : [{
        x : {
            type : "block",
            domain : "date",
            format : function(date, index) {
                if(index % 2 == 0) {
                    return "[" + date + "]";
                }
            }
        },
        y : {
            type : "range",
            domain : [ 0, 100 ],
            step : 5
        },
        data : data
    }],
    brush : [{
        type : "column",
        target : "value"
    }]
});