JSFiddle - React, Tailwind, and code Playground

by Nicholas Mastracchio

HTML

<script src="http://cdn1.zingchart.com/scripts/zingchart/html5_scripts/zingchart-html5-min.js"></script>
<div id="chart1"></div>
<div id="chart2"></div>
<div id="chart3"></div>

JavaScript

var chart1Data={
    "type":"line",
	"series":[
		{
			"values":[69,68,54,48,70,74,98,70,72,68,49,69],
			"text":"Apple"
		},
		{
			"values":[51,53,47,60,48,52,75,52,55,47,60,48],
			"text":"Microsoft"
		},
		{
			"values":[42,43,30,40,31,48,55,46,48,32,38,38],
			"text":"Oracle"
		},
		{
			"values":[25,15,26,21,24,26,33,25,15,25,22,24],
			"text":"Dell"
		}
	]
};

var chart2Data={
    "type":"bar",
	"series":[
		{
			"values":[69,68,54,48,70,74,98,70,72,68,49,69],
			"text":"Apple"
		},
		{
			"values":[51,53,47,60,48,52,75,52,55,47,60,48],
			"text":"Microsoft"
		},
		{
			"values":[42,43,30,40,31,48,55,46,48,32,38,38],
			"text":"Oracle"
		},
		{
			"values":[25,15,26,21,24,26,33,25,15,25,22,24],
			"text":"Dell"
		}
	]
};

var chart3Data={
    "type":"scatter",
	"series":[
		{
			"values":[69,68,54,48,70,74,98,70,72,68,49,69],
			"text":"Apple"
		},
		{
			"values":[51,53,47,60,48,52,75,52,55,47,60,48],
			"text":"Microsoft"
		},
		{
			"values":[42,43,30,40,31,48,55,46,48,32,38,38],
			"text":"Oracle"
		},
		{
			"values":[25,15,26,21,24,26,33,25,15,25,22,24],
			"text":"Dell"
		}
	]
};

window.onload=function(){
    zingchart.render({
        id : 'chart1',
        width  : '600',
        height : '400',
        data : chart1Data
    });
        zingchart.render({
        id : 'chart3',
        width  : '600',
        height : '400',
        data : chart3Data
    });
};
window.onload=function(){zingchart.render({
        id : 'chart2',
        width  : '600',
        height : '400',
        data : chart2Data
    });
};