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="http://www.pikemere.co.uk/blog/js/jquery.flot.orderBars.js"></script>
<div class="chart-container">
<div id="placeholder-bar-chart" class="mychart"></div>
<div id="bar-legend" class="chart-legend"></div>
</div>

CSS

.chart-container {
    width: 600px;
    height: 300px;
    font-family: Helvetica, Sans-serif;
}
.mychart {
    width: 100%;
    height: 100%;
}
.data-point-label {
    font-size: 12px;
    color: gray;
}
.chart-legend {
    width: 40%;
    margin: 5px auto; 
}
.legendLabel {
    padding-right: 10px;
}
}

JavaScript

var d1_1 = [
    [1325376000000, 10],
    [1328054400000, 20],
    [1330560000000, 30],
    [1333238400000, 40],
    [1335830400000, 35]
];

var d1_2 = [
    [1325376000000, 80],
    [1328054400000, 60],
    [1330560000000, 20],
    [1333238400000, 90],
    [1335830400000, 30]
];

var data1 = [
    {
        label: "Product 1",
        data: d1_1,
        bars: {
            show: true,
            barWidth: 12*44*60*60*300,
            fill: true,
            lineWidth:0,
            order: 1,
            fillColor:  {
            colors: ["#80C3FD", "#0089FF"] 
        }
        },
        color: "#0089FF"
    },
    {
        label: "Product 2",
        data: d1_2,
        bars: {
            show: true,
            barWidth: 12*44*60*60*300,
            fill: true,
            lineWidth: 0,
            order: 2,
            fillColor:  {
            colors: ["#F39494", "#f14d4d"] 
        }
        },
        color: "#f14d4d"
    },

];
var p = $.plot($("#placeholder-bar-chart"), data1, {
    xaxis: {
        min: (new Date(2011, 11, 15)).getTime(),
        max: (new Date(2012, 04, 18)).getTime(),
        mode: "time",
        timeformat: "%b",
        tickSize: [1, "month"],
        //monthNames: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
        tickLength: 0, // hide gridlines
        axisLabel: 'Month',
        axisLabelUseCanvas: true,
        axisLabelFontSizePixels: 12,
        axisLabelFontFamily: 'Verdana, Arial, Helvetica, Tahoma, sans-serif',
        axisLabelPadding: 5,
        ticks:[[1325376000000,'Takaoma'],[1328054400000,'Giacompany'],[1330560000000,'FreshFields'],[1333238400000,'Generalisimo'],[1335830400000, 'Greenleaves']]
    },
    yaxis: {
        axisLabel: '%',
        axisLabelUseCanvas: true,
        axisLabelFontSizePixels: 12,
        axisLabelFontFamily: 'Verdana, Arial, Helvetica, Tahoma, sans-serif',
        axisLabelPadding: 5,
        tickSize: 10,
        tickFormatter: function...