JSFiddle - React, Tailwind, and code Playground

by ZingChart Library

HTML

<script src="http://cdn.zingchart.com/zingchart.min.js"></script>
<script src="http://cdn.zingchart.com/modules/zingchart-grid.min.js"></script>
<div id="myChartDiv"></div>

<button onclick="showValues('obj1')">Show Report 1</button>
<button onclick="showValues('obj2')">Show Report 2</button>

JavaScript

var obj1 = {
    "values": [1,2,3,4,5,6]
};

var obj2 = {
    "values": [7,8,9,10,11,12]
};

// Defined outsite the data object
var series = [
    obj1,
    obj2
];

// Render the chart
zingchart.render({
    id:'myChartDiv',
    height:400,
    width:600,
    data:{
        "type":"grid",
        "series":series // <-- series array defined above
    }
});

var obj1 = {
    "record1": [8,97,12,87,93,12],
    "record2": [43,67,54,26,37,54],
    "record3": [34,29,78,34,27,86],
    "record4": [34,27,68,74,65,39]
};
var obj2 = {
    "record1": [19,23,47,63,43,67],
    "record2": [8,23,49,87,63,24],
    "record3": [89,73,24,67,83,24],
    "record4": [9,87,63,42,67,83]
};

function showValues(obj){
    
    var objToShow = window[obj];
    
    var dataArray = [];
    for(var key in objToShow){
        dataArray.push(
            {
                "values":objToShow[key]
            }
        );
    }
    
    zingchart.exec('myChartDiv','setseriesdata',{
        update: 0,
        data: dataArray
    });
    zingchart.exec('myChartDiv','update');
}