JSFiddle - React, Tailwind, and code Playground

by turiyag

HTML

<html>
    
    <head></head>
    
    <body>
        <div id="console">
             <h2>Console</h2>

        </div>
        <div id="content"></div>
    </body>
    </html

CSS

div {
    border: 1px solid black;
}
#console {
    background: #DDF;
}
#console h2 {
    font-size: 1.5em;
}

JavaScript

var jsonData = {
	"data": [
		{
			"Part": "1.75 L ICON (Glass)",
			"ProductionCounts": 1012620
		}, 
		{
			"Part": "1.75 L Marg Mix (PET)",
			"ProductionCounts": 1003278
		}, 
		{
			"Part": "1.75 L Authentics (PET)",
			"ProductionCounts": 457615
		}, 
		{
			"Part": "1.0 L Margarita Mix / PET",
			"ProductionCounts": 660982
		}, 
		{
			"Part": "other",
			"ProductionCounts": 1571985
		}
	],
	"dateArray": ["2011-01-01", "2011-02-01", "2011-03-01", "2011-04-01", "2011-05-01", "2011-06-01", "2011-07-01", "2011-08-01", "2011-09-01", "2011-10-01", "2011-11-01"],
	"xAxis": "Part",
	"yAxis": "ProductionCounts",
	"interestingMoments": []
}

$(function() {
    log("jsonData.data[0].Part: " + jsonData.data[0].Part);
    log("jsonData.data[1]: " + jsonData.data[1]);
    log("jsonData.xAxis: " + jsonData.xAxis);
    log("jsonData.yAxis: " + jsonData.yAxis);
    log("jsonData.data[0][jsonData.yAxis]: " + jsonData.data[0][jsonData.yAxis]);
});

function log(msg) {
	$("#console").append("<pre>" + msg + "</pre");
}