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

CSS

#multiAxisMenu{

    width:800px;

    height:400px;

}

JavaScript

function gernerateMultiLineData(min,max){
			var pendingApprovedOrders=[];
			var noOfRecords=50;
			
			for(var i=1;i<noOfRecords;i++){
				
				var approvedOrder=generateRandomNumber(min,max);
				pendingApprovedOrders.push(approvedOrder);
			}
			console.log(JSON.stringify(pendingApprovedOrders));
			return pendingApprovedOrders;
		}
var textStyleConfg={"font-family":"Gotham, 'Helvetica Neue', Helvetica, Arial, sans-serif","font-size":"12","background":"none","font-color":"black","font-weight":300};

function addDays(theDate, days) {
			return new Date(theDate.getTime() + days*24*60*60*1000);
		}
function generateDate() {
    var noOfRecords = 50;
    var currentDate = new Date();
    var dateOfJoining = currentDate
    var dateArray = [];
    for (var i = 1; i < noOfRecords; i++) {
        dateOfJoining = addDays(dateOfJoining, 1);
        var doj = convertDateIntoYYMMDD(dateOfJoining);
        dateArray.push(doj);
    }
    return dateArray;
}

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

var mulitpleLineBarData = {
    'sea-level': {
        "color": 'green',
            'indicationLabel': 'Sea Level Pressure',
            'chartType': 'line',
            'lineType': 'cardinal',
            'isDottedLine': false,
            'unit': 'mb',
            'data': gernerateMultiLineData(40, 80)
    },
        'temperature': {
        'color': '#90ed7d',
            'chartType': 'line',
            'indicationLabel': 'Temperature',
            'lineType': 'linear',
            'unit': 'C',
            'data': gernerateMultiLineData(60, 80),
            'isDottedLine': true
    },
        'rainfall': {
        'color': '#7cb5ec',
            'chartType': 'bar',
            'indicationLabel': 'Rain Fall',
            'unit': 'mm',
            'data': gernerateMultiLineData(20, 100)
    }
};
var xAxis = {
    'ticks': generateDate()
};
$(document).ready(function () {
   
 var...