JSFiddle - React, Tailwind, and code Playground

by Nicholas Mastracchio

HTML

<html>
	<head>
	<script src='http://cdn.zingchart.com/zingchart.min.js'></script>
	</head>
	<body>
		<div id='myChart'></div>
        <button onclick="setData()">Set Data</button>
	</body>
</html>

JavaScript

function setData(){
    // Generate random data
    var data0 = [Math.random()*50,Math.random()*50,Math.random()*50,Math.random()*50,Math.random()*50,Math.random()*50,Math.random()*50,Math.random()*50,Math.random()*50];
    var data1 = [Math.random()*50,Math.random()*50,Math.random()*50,Math.random()*50,Math.random()*50,Math.random()*50,Math.random()*50,Math.random()*50,Math.random()*50];
    var data2 = [Math.random()*50,Math.random()*50,Math.random()*50,Math.random()*50,Math.random()*50,Math.random()*50,Math.random()*50,Math.random()*50,Math.random()*50];
    var data3 = [Math.random()*50,Math.random()*50,Math.random()*50,Math.random()*50,Math.random()*50,Math.random()*50,Math.random()*50,Math.random()*50,Math.random()*50];
    
    // Set the values for first horizontal bar, wait until update method is called later by setting update:false
    zingchart.exec('myChart','setseriesvalues',{
        update:false,
        graphid:2,
        plotindex:0,
        values: data0
    });
    // Set the values for the second hbar
    zingchart.exec('myChart','setseriesvalues',{
        update:false,
        graphid:3,
        plotindex:0,
        values: data1
    });
    // Third hbar
    zingchart.exec('myChart','setseriesvalues',{
        update:false,
        graphid:4,
        plotindex:0,
        values: data2
    });
    // Fourth hbar
    zingchart.exec('myChart','setseriesvalues',{
        update:false,
        graphid:5,
        plotindex:0,
        values: data3
    });
    // Set the labels for the first two columns on the left side
    zingchart.exec('myChart', 'setseriesvalues', {
        update:false,
        graphid : 1,
        values : [
           ["AAA", Math.random().toFixed(2)],
           ["BBB", Math.random().toFixed(2)],
           ["CCC", Math.random().toFixed(2)],
           ["DDD", Math.random().toFixed(2)],
           ["EEE", Math.random().toFixed(2)],
           ["FFF", Math.random().toFixed(2)],
           ["GGG", Math.random().toFixed(2)],
...