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='groupedBar2DMenu'></div>

CSS

#groupedBar2DMenu {
    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(minNegative) {
    var stackChartDataArray = [];
    var noOfRecords = 15;
    var currentDate = new Date(2014, 0, 1);
    var dateOfJoining = currentDate;
    var minVal;
    if (!isNaN(minNegative)) {
        minVal = minNegative;
    } else {
        minVal = 10;
    }

    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(minVal, 100);
        var approved = generateRandomNumber(minVal, 50);
        var rejected = generateRandomNumber(minVal, 10);
        var halted = generateRandomNumber(minVal, 100);

        var monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun",
            "Jul", "Aug", "Sept", "Oct", "Nov", "Dec"];
        var fomratttedDate = monthNames[(new Date(doj)).getMonth()] + "'" + (new Date(doj)).getFullYear().toString().substring(2, 4);

        var obj = {
            "doj": fomratttedDate,
            "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 =...