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="divId"></div>
<button onclick="reload();">reload</button>
<script>
    var data1={
"gui":{
    "context-menu":{
        "button":{
            "alpha":"0.5",
            "background-color":"#0080a4 #00afe0"
        }
    }
},
"graphset":[
    {
        "title":{
            "text":"test"
        },
        "type":"bar",
        "series":[
            {
                "values":[11,26,7,44,11]
            },
            {
                "values":[42,13,21,15,33]
            },
            {
                "values":[23,24,13,4,18]
            }
        ]
    }
]
}
    function reload(){
    zingchart.exec('divId','setdata', {
        data : data1,
        update : true
    });
};
    
</script>

JavaScript

var data={
"gui":{
    "context-menu":{
        "button":{
            "alpha":"0.5",
            "background-color":"#0080a4 #00afe0"
        }
    }
},
"graphset":[
    {
        "type":"bar",
        "series":[
            {
                "values":[11,26,7,44,11]
            },
            {
                "values":[42,13,21,15,33]
            },
            {
                "values":[23,24,13,4,18]
            }
        ]
    }
]
}

$(function(){
    zingchart.render({
        id : 'divId',
        output : 'svg',
        width  : 'auto',
        height : 'auto',
        data : data,
        autoResize : true
    });
    
});