JSFiddle - React, Tailwind, and code Playground

by Sanchit Jain

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="http://www.stocinn.com/stoccharts/js/stocChart.js"></script>
<div id='groupedBarMenu'></div>

CSS

#groupedBarMenu {
    width:800px;
    height:400px;
}

JavaScript

var textStyleConfg={"font-family":"Gotham, 'Helvetica Neue', Helvetica, Arial, sans-serif","font-size":"12","background":"none","font-color":"black","font-weight":300};

function generateDataForStackChart() {
    var stackChartDataArray = [];
    var noOfRecords = 15;
    var currentDate = new Date(2014, 0, 1);
    var dateOfJoining = currentDate;
    var colorJson = {
        "pending": "red",
            "approved": "cyan",
            'rejected': "blue",
            "halted": "orange"
    };
    for (var i = 1; i < noOfRecords; i++) {
        var id = i;
        dateOfJoining.setMonth(dateOfJoining.getMonth() + 1);
        var doj = convertDateIntoYYMMDD(dateOfJoining);
        var pending = generateRandomNumber(20, 100);
        var approved = generateRandomNumber(10, 50);
        var rejected = generateRandomNumber(0, 10);
        var halted = generateRandomNumber(30, 100);

        var obj = {
            "doj": doj,
                "pending": pending,
                "approved": approved,
                'rejected': rejected,
                "halted": halted
        };
        stackChartDataArray.push(obj);
    }

    return stackChartDataArray;
}

function generateRandomNumber(minLimit, maxLimit) {
    return Math.floor(Math.random() * (maxLimit - minLimit + 1) + minLimit);
};

function convertDateIntoYYMMDD(date) {
    var month = date.getMonth() + 1;
    var dateInDigit = date.getDate();
    if (month < 10) {
        month = "0" + month;
    }
    if (dateInDigit < 10) {
        dateInDigit = "0" + dateInDigit;
    }
    var dateInString = date.getFullYear() + "-" + month + "-" + dateInDigit;
    return dateInString;
}
var groupedChartData = generateDataForStackChart();

var colorJson = {
    "pending": "#7cb5ec",
    "approved": "#434348",
    "rejected": "#90ed7d",
    "halted": "red"
};
var colorArray = ["#7cb5ec", "#434348", "#90ed7d", "red"];
$(document).ready(function () {
    var stocChart8 = $("#groupedBarMenu").stocCharts();
   ...