JSFiddle - React, Tailwind, and code Playground

by Nicholas Mastracchio

HTML

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

JavaScript

/* Add module to ZingChart's array of modules available for loading */
zingchart.setModule('toolbar-zoom');

/* Self-executing, anonymous function */ (function () {

    /* 
        We're making a simple zoom toolbar, with zoom in, zoom out, and view all, 
        so we configure this switch in a shape_click event to handle click events
        on the shapes that we'll add in just a bit... 
        ZingChart already has zooming methods, so we can use those.
    */
    zingchart.shape_click = function (p) {
        switch (p.shapeid) {
            case "zoomin":
                zingchart.exec(p.id, "zoomin");
                break;
            case "zoomout":
                zingchart.exec(p.id, "zoomout");
                break;
            case "viewall":
                zingchart.exec(p.id, "viewall");
                break;
        }
    };

    zingchart.bind(null, 'dataparse', function (oInfo, oData) {
        /* Get the loader information using getLoader() */
        var oLoader = zingchart.getLoader(oInfo.id);

        /* Get the list of modules using getModules() */
        var aModules = zingchart.getModules(oLoader);

        /* Check that the toolbar-zoom module name is included in the array of modules */
        if (aModules.indexOf('toolbar-zoom') != -1) {

            /* 
                It's there! First, set up a for loop to make the module work 
                even when there are multiple graph objects in the graphset array.
            */
            for (var i = 0, iLen = oData['graphset'].length; i < iLen; i++) {

                var oGraphData = oData['graphset'][i];

                /* 
                    Generate the initial toolbar object using shapes. 
                    Note that each shape object has a unique id value. 
                    Some of you may have noticed that we use the shapeid in our switch above ^^
                */
                oGraphData['shapes'] = [{
                    "type": "rectangle",
                   ...