JSFiddle - React, Tailwind, and code Playground

by mccannf

HTML

<script src="http://www.flotcharts.org/javascript/jquery.flot.min.js"></script>
<script src="http://www.flotcharts.org/flot/jquery.flot.time.js"></script>
<script src="https://rawgithub.com/AMKohn/flot/master/jquery.flot.spline.js"></script>
<div id="flot-dashboard-chart"></div>

CSS

#flot-dashboard-chart 
{
    width: 600px;
    height: 250px;
}
.tickLabel {
    font-family: Helvetica, Arial, sans-serif;
}
.flot-text, .legendLabel
{
    font-size: 12px;
}
.legendLabel {
    color: #838383;
    vertical-align: middle;
    padding: 0 2px;
}
.legendColorBox {
    vertical-align: middle;   
}
}

JavaScript

var data1 = [
        [gd(2014, 1, 1), 4], [gd(2014, 2, 1), 8], [gd(2014, 3, 1), 4], [gd(2014, 4, 1), 10],
        [gd(2014, 5, 1), 4], [gd(2014, 6, 1), 16], [gd(2014, 7, 1), 5]];    

    var data2 = [
        [gd(2013, 1, 1), 1], [gd(2013, 2, 1), 0], [gd(2013, 3, 1), 2], [gd(2013, 4, 1), 0],
        [gd(2013, 5, 1), 1], [gd(2013, 6, 1), 3], [gd(2013, 7, 1), 1], [gd(2013, 8, 1), 5],
        [gd(2013, 9, 1), 2], [gd(2013, 10, 1), 3], [gd(2013, 11, 1), 2], [gd(2013, 12, 1), 1]];

var data2014 = {
    label: "2014",
    data: data1,
    xaxis: 1
};
var data2013 = {
    label: "2013",
    data: data2,
    xaxis: 2
};

    $("#flot-dashboard-chart").length && $.plot($("#flot-dashboard-chart"), [
        data2014, data2013
    ],
            {
                series: {
                    lines: {
                        show: false,
                        fill: true
                    },
                    splines: {
                        show: true,
                        tension: 0.4,
                        lineWidth: 1,
                        fill: 0.4
                    },
                    points: {
                        radius: 2,
                        show: true
                    },
                    shadowSize: 2
                },
                grid: {
                    hoverable: true,
                    clickable: true,
                    tickColor: "#d5d5d5",
                    borderWidth: 1,
                    color: '#d5d5d5'
                },
                colors: ["#1ab394", "#464f88"],
                xaxes: [{
                    mode: "time",
                    tickSize: [1, "month"],
                    tickLength: null,
                    color: "#838383",
                    timeformat: "%b",
                    max: (new Date("2014/12/1")).getTime()
                },{
                    ticks: false 
                }],
                yaxis: {
                    ticks: 4
                },
               ...