JSFiddle - React, Tailwind, and code Playground

by Faiz Vadakkumpadath

HTML

<script src="http://www.flotcharts.org/flot/jquery.flot.js"></script>
<script src="http://www.flotcharts.org/flot/jquery.flot.stack.js"></script>
<div id="placeholder" style="width:600px;height:300px;"></div>

JavaScript

var Json = [{"Date":"\/Date(1104517800000)\/","Category":"Travel","CategoryId":10,"Direct":0,"Drilldown":1,"Amount":40},{"Date":"\/Date(1107196200000)\/","Category":"Food","CategoryId":7,"Direct":0,"Drilldown":1,"Amount":5},{"Date":"\/Date(1107196200000)\/","Category":"Travel","CategoryId":10,"Direct":0,"Drilldown":1,"Amount":60},{"Date":"\/Date(1107196200000)\/","Category":"Energy","CategoryId":6,"Direct":0,"Drilldown":0,"Amount":200},{"Date":"\/Date(1112293800000)\/","Category":"Food","CategoryId":7,"Direct":0,"Drilldown":1,"Amount":30},{"Date":"\/Date(1117564200000)\/","Category":"Travel","CategoryId":10,"Direct":0,"Drilldown":1,"Amount":10},{"Date":"\/Date(1117564200000)\/","Category":"Communication","CategoryId":5,"Direct":0,"Drilldown":0,"Amount":34},{"Date":"\/Date(1117564200000)\/","Category":"Food","CategoryId":7,"Direct":0,"Drilldown":1,"Amount":62},{"Date":"\/Date(1120156200000)\/","Category":"Communication","CategoryId":5,"Direct":0,"Drilldown":0,"Amount":34}];

function GetDateFromJSON(JDtStr) {
    var i =parseInt(JDtStr.replace(/(^.*\()|([+-].*$)/g, ''));
    var date = new Date(i);
    /*var day = date.getDate();
    if (day < 10) day = '0' + day;
    var month = date.getMonth() + 1;
    if (month < 10) month = '0' + month;
    var year = date.getFullYear();
    //return (year+'-'+month+'-'+day);*/
    //return date;
    return i/(24 * 60 * 60 * 1000);
}
$(function () {
    console.clear();

    var tempJson = {};
    $.each(Json, function () {
        var i = this.Category;
        if (!tempJson[i]) tempJson[i] = {
            label: i,
            data: [], cat: 1
        };
        tempJson[i].data.push([GetDateFromJSON(this.Date), this.Amount]);
    });

    var newJson = [];
    $.each(tempJson, function () {
        newJson.push(this)
    });
    console.log(newJson);

    $.plot($("#placeholder"), newJson, {
        series: {
            stack: 0,

            bars: {
                show: true,
                barWidth: 10 // * 24 * 60 *...