• Edit
  • Download
  • <!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="utf-8">
        <title>ZingSoft Demo</title>
        <script>
            /* create fake cookie */
            var globalSessionId = Math.floor(Math.random() * 9007199254740991);
            if (localStorage) {
                if (localStorage.getItem('zc-crud-demo-sessionId')) {
                    globalSessionId = localStorage.getItem('zc-crud-demo-sessionId');
                } else {
                    localStorage.setItem('zc-crud-demo-sessionId', globalSessionId);
                }
            }
        </script>
    
        <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
        <style>
            html,
            body {
                height: 100%;
                width: 100%;
                margin: 0;
                padding: 0;
            }
    
            #myChart {
                height: 100%;
                width: 100%;
                min-height: 150px;
            }
    
            .zc-ref {
                display: none;
            }
    
            #myChart button {
                position: absolute;
                top: 15px;
                left: 10px;
                z-index: 1000;
            }
    
            #myChart button:nth-child(3) {
                position: absolute;
                top: 55px;
                left: 10px;
                z-index: 1000;
            }
    
            /* Modal Styling */
            #mask {
                position: absolute;
                top: 0;
                bottom: 0;
                left: 0;
                right: 0;
                background-color: #FFF;
                z-index: 500;
                opacity: .5;
                visibility: hidden;
            }
    
            form {
                background-color: #E0E0E0;
                height: 70px;
                width: 300px;
                position: fixed;
                top: calc(50% - 35px);
                left: calc(50% - 150px);
                z-index: 1000;
                padding: 10px;
                border-radius: 5px;
                opacity: 1;
                visibility: hidden;
            }
    
            #myChart button {
                padding: 8px;
                font-size: 16;
            }
    
            zing-grid[loading] {
                height: 450px;
            }
        </style>
    </head>
    
    <body>
    
        <!-- Overlay Mask -->
        <div id="mask"></div>
    
        <!-- Overlay form -->
        <form>
            <input type="hidden" id="plot-index">
            <label>Plot text:</label>
            <input type="text" id="plot-text">
            <br>
            <label>Plot Value:</label>
            <input type="number" id="plot-value">
            <hr>
            <button onclick="return removePlot();">Delete</button>
            <button onclick="return updatePlot();">Update/Add</button>
        </form>
    
        <!-- ZingChart Stuff -->
        <div id="myChart">
            <a class="zc-ref" href="https://www.zingchart.com">Powered by ZingChart</a>
            <button onclick="window.parent.location.reload()">Reload iframe</button>
            <button onclick="window.addPlot()">Add Plot</button>
        </div>
        <script>
            ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"]; // make the initial AJAX request to load chart data for user
            var oReq = new XMLHttpRequest();
            oReq.addEventListener("load", renderFirstPlotInChart);
            oReq.open("GET", "https://zingchart-rest-api.glitch.me/api/data/session/" + globalSessionId);
            oReq.send();
    
            // define chart JSON
            var myConfig = {
                type: 'pie',
                title: {
                    text: 'Double click on a slice to edit',
                    fontSize: 32,
                    mediaRules: [{
                        maxWidth: 500,
                        fontSize: 15
                    }]
                },
                plot: {
                    cursor: 'pointer',
                    detach: false,
                    animation: {}, // add animation to make the chart look alive
                    tooltip: {
                        text: '%t <br> value: %v <br> percentage value: %npv'
                    },
                    animation: {}
                },
                tooltip: {
                    borderRadius: 5
                },
                legend: {
                    toggleAction: 'remove',
                    maxItems: 5,
                    overflow: 'scroll'
                },
                scaleY: {
                    values: '0:300:100' // this will prevent users from noticing the scale repaint
                },
                series: [{
                    values: [],
                    text: '',
                }]
            };
    
            /*
             * on double click event listener
             * populate and display the form
             */
            zingchart.bind('myChart', 'node_doubleclick', function(e) {
                var formElem = document.querySelector('form');
                var maskElem = document.getElementById('mask');
                var plotIndex = formElem.querySelector('#plot-index');
                var plotText = formElem.querySelector('#plot-text');
                var plotValue = formElem.querySelector('#plot-value');
    
                // get plotinformation
                var plotInfo = zingchart.exec('myChart', 'getobjectinfo', {
                    object: 'plot',
                    plotindex: e.plotindex
                });
    
                // assign form elements
                plotIndex.value = e.plotindex;
                plotText.value = plotInfo.text;
                plotValue.value = e.value;
    
                // display form
                maskElem.style.visibility = 'visible';
                formElem.style.visibility = 'visible';
                plotText.focus();
            });
    
            // once even has been fired, update db
            zingchart.bind('myChart', 'plot_add', lazyUpdateDb);
            zingchart.bind('myChart', 'plot_remove', lazyUpdateDb);
            zingchart.bind('myChart', 'plot_modify', lazyUpdateDb);
    
            /*
             * add/update the plot from the chart
             * and adjust the form fields. It is not an efficient
             * update/add. It will always overwrite the db entry
             */
            function lazyUpdateDb(e) {
                //console.log('----updating db----',e);
                setTimeout(function() {
                    var graphSeriesData = zingchart.exec(e.id, 'getseriesdata');
                    var dbArrayOfObjects = [];
    
                    // make db object
                    for (var i = 0; i < graphSeriesData.length; i++) {
                        dbArrayOfObjects.push({
                            text: graphSeriesData[i].text,
                            value: graphSeriesData[i].values[0]
                        });
                    }
                    if (graphSeriesData) { // if data and nothing went wrong. Update
                        oReq = new XMLHttpRequest();
                        //oReq.addEventListener("load", renderFirstPlotInChart);
                        oReq.open("POST", "https://zingchart-rest-api.glitch.me/api/data/session/" + globalSessionId);
                        oReq.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
                        oReq.send(JSON.stringify(dbArrayOfObjects));
                    } else {
                        //console.log('----failed to update db----');
                    }
                }, 200);
            }
    
    
            /*
             * callback for GET request is when we will render the chart
             */
            function renderFirstPlotInChart() {
                //console.log('----rendering chart----', globalSessionId);
                var dbPlots = JSON.parse(this.responseText);
                var seriesArray = [];
                for (var i = 0; i < dbPlots.length; i++) {
                    seriesArray.push({
                        text: dbPlots[i].text,
                        values: [dbPlots[i].value],
                    })
                }
                myConfig.series = seriesArray; // assign series array of objects
                zingchart.render({
                    id: 'myChart',
                    data: myConfig,
                    height: '100%',
                    width: '100%'
                });
            }
    
    
    
            /*
             * will add/update the plot from the chart
             * and adjust the form fields. 
             */
            window.updatePlot = function(e) {
                //console.log('----updating/adding plot----');
                var formElem = document.querySelector('form');
                var maskElem = document.getElementById('mask');
                var plotIndex = formElem.querySelector('#plot-index');
                var plotText = formElem.querySelector('#plot-text');
                var plotValue = formElem.querySelector('#plot-value');
    
                if (plotIndex.value) {
                    zingchart.exec('myChart', 'modifyplot', {
                        plotindex: plotIndex.value,
                        data: {
                            text: plotText.value,
                            values: [Number(plotValue.value)]
                        }
                    });
                } else {
                    zingchart.exec('myChart', 'addplot', {
                        data: { // will automatically append data to the end of the chart
                            text: plotText.value || 'Default Text',
                            values: [Number(plotValue.value) || 35]
                        }
                    });
                }
    
                // clear all values
                maskElem.style.visibility = 'hidden';
                plotIndex.value = '';
                plotText.value = '';
                plotValue.value = '';
                formElem.style.visibility = 'hidden';
    
                // make sure form doesn't execute! 
                return false;
            }
    
    
            /*
             * removePlot will remove the plot from the chart
             * and adjust the form fields
             */
            window.removePlot = function() {
                //console.log('----removing plot----');
                var formElem = document.querySelector('form');
                var maskElem = document.getElementById('mask');
                var plotIndex = formElem.querySelector('#plot-index');
                var plotText = formElem.querySelector('#plot-text');
                var plotValue = formElem.querySelector('#plot-value');
    
                // remove only if valid id is provided
                if (plotIndex.value) {
                    zingchart.exec('myChart', 'removeplot', {
                        plotindex: plotIndex.value
                    });
                }
    
                // clear all values
                maskElem.style.visibility = 'hidden';
                plotIndex.value = '';
                plotText.value = '';
                plotValue.value = '';
                formElem.style.visibility = 'hidden';
    
                // make sure form doesn't execute! 
                return false;
            }
    
    
            /*
             * addplot pulls up the form overlay
             */
            window.addPlot = function() {
                var formElem = document.querySelector('form').style.visibility = 'visible';
                var maskElem = document.getElementById('mask').style.visibility = 'visible';
                var plotText = document.getElementById('plot-text');
                var plotValue = document.getElementById('plot-value');
    
                plotText.value = "Default Text";
                plotValue.value = 25;
                plotText.focus();
                return false;
            }
        </script>
    </body>
    
    </html>
    <!DOCTYPE html>
    <html>
    	<head>
        <meta charset="utf-8">
        <title>ZingSoft Demo</title>
    	<script>
    	  /* create fake cookie */
    	  var globalSessionId = Math.floor(Math.random() * 9007199254740991);
    	  if (localStorage) {
      	  if (localStorage.getItem('zc-crud-demo-sessionId')) {
      	    globalSessionId = localStorage.getItem('zc-crud-demo-sessionId');
      	  } else {
      	    localStorage.setItem('zc-crud-demo-sessionId', globalSessionId);
      	  }
    	  }
    	</script>
    	
    		<script src="https://cdn.zingchart.com/zingchart.min.js"></script>
    </head>
    	<body>
    	  
    	  <!-- Overlay Mask -->
        <div id="mask"></div>
        
        <!-- Overlay form -->
    	  <form>
    	    <input type="hidden" id="plot-index">
    	    <label>Plot text:</label>
    	    <input type="text" id="plot-text">
    	    <br>
    	    <label>Plot Value:</label>
    	    <input type="number" id="plot-value">
    	    <hr>
    	    <button onclick="return removePlot();" >Delete</button>
    	    <button onclick="return updatePlot();" >Update/Add</button>
    	  </form>
    	  
    	  <!-- ZingChart Stuff -->
    		<div id="myChart">
    		  <a class="zc-ref" href="https://www.zingchart.com">Powered by ZingChart</a>
    		  <button onclick="window.parent.location.reload()">Reload iframe</button>
    		  <button onclick="window.addPlot()">Add Plot</button>
    		</div>
    	</body>
    </html>
    html, body {
    	height:100%;
    	width:100%;
    	margin:0;
    	padding:0;
    }
    #myChart {
    	height:100%;
    	width:100%;
    	min-height:150px;
    }
    .zc-ref {
    	display:none;
    }
    #myChart button {
      position:absolute;
      top:15px;
      left:10px;
      z-index:1000;
    }
    
    #myChart button:nth-child(3) {
      position:absolute;
      top:55px;
      left:10px;
      z-index:1000;
    }
    
    /* Modal Styling */
    #mask {
      position:absolute;
      top:0;
      bottom:0;
      left:0;
      right:0;
      background-color:#FFF;
      z-index:500;
      opacity:.5;
      visibility:hidden;
    }
     
    form {
      background-color:#E0E0E0;
      height:70px;
      width:300px;
      position:fixed;
      top: calc(50% - 35px);
      left: calc(50% - 150px);
      z-index:1000;
      padding:10px;
      border-radius:5px;
      opacity:1;
      visibility:hidden;
    }
    
    #myChart button {
      padding:8px;
      font-size:16;
    }
    // make the initial AJAX request to load chart data for user
    var oReq = new XMLHttpRequest();
    oReq.addEventListener("load", renderFirstPlotInChart);
    oReq.open("GET", "https://zingchart-rest-api.glitch.me/api/data/session/" + globalSessionId);
    oReq.send();
    
    // define chart JSON
    var myConfig = {
     	type: 'pie', 
     	title: {
     	  text: 'Double click on a slice to edit',
     	  fontSize:32,
     	  mediaRules: [
     	    {
     	      maxWidth: 500,
     	      fontSize: 15
     	    }  
        ]
     	},
     	plot: {
     	  cursor: 'pointer',
     	  detach: false,
     	  animation:{}, // add animation to make the chart look alive
     	  tooltip: {
     	    text: '%t <br> value: %v <br> percentage value: %npv'
     	  },
     	  animation:{}
     	},
     	tooltip: {
     	  borderRadius:5
     	},
     	legend: {
     	  toggleAction: 'remove',
     	  maxItems:5,
     	  overflow: 'scroll'
     	},
     	scaleY: {
     	  values: '0:300:100' // this will prevent users from noticing the scale repaint
     	},
    	series: [
    		{
          values: [],
          text:'',
    		}
    	]
    };
    
    /*
     * on double click event listener
     * populate and display the form
     */
    zingchart.bind('myChart', 'node_doubleclick', function(e) {
      var formElem = document.querySelector('form');
      var maskElem = document.getElementById('mask');
      var plotIndex = formElem.querySelector('#plot-index');
      var plotText = formElem.querySelector('#plot-text');
      var plotValue = formElem.querySelector('#plot-value');
      
      // get plotinformation
      var plotInfo = zingchart.exec('myChart', 'getobjectinfo', {
        object: 'plot',
        plotindex: e.plotindex
      });
      
      // assign form elements
      plotIndex.value = e.plotindex;
      plotText.value = plotInfo.text;
      plotValue.value = e.value;
      
      // display form
      maskElem.style.visibility = 'visible';
      formElem.style.visibility = 'visible';
      plotText.focus();
    });
    
    // once even has been fired, update db
    zingchart.bind('myChart', 'plot_add', lazyUpdateDb);
    zingchart.bind('myChart', 'plot_remove', lazyUpdateDb);
    zingchart.bind('myChart', 'plot_modify', lazyUpdateDb);
    
    /*
     * add/update the plot from the chart
     * and adjust the form fields. It is not an efficient
     * update/add. It will always overwrite the db entry
     */
    function lazyUpdateDb(e) {
      //console.log('----updating db----',e);
      setTimeout(function() {
        var graphSeriesData = zingchart.exec(e.id, 'getseriesdata');
        var dbArrayOfObjects = [];
        
        // make db object
        for (var i=0; i < graphSeriesData.length; i++) {
          dbArrayOfObjects.push({
            text: graphSeriesData[i].text,
            value: graphSeriesData[i].values[0]
          });
        }
        if (graphSeriesData) { // if data and nothing went wrong. Update
          oReq = new XMLHttpRequest();
          //oReq.addEventListener("load", renderFirstPlotInChart);
          oReq.open("POST", "https://zingchart-rest-api.glitch.me/api/data/session/" + globalSessionId);
        oReq.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
          oReq.send(JSON.stringify(dbArrayOfObjects));
        } else {
          //console.log('----failed to update db----');
        }
      },200);
    }
    
    
    /*
     * callback for GET request is when we will render the chart
     */
    function renderFirstPlotInChart () {
      //console.log('----rendering chart----', globalSessionId);
      var dbPlots = JSON.parse(this.responseText);
      var seriesArray = [];
      for (var i=0; i < dbPlots.length; i++) {
        seriesArray.push({
          text: dbPlots[i].text,
          values: [dbPlots[i].value],
        })
      }
      myConfig.series = seriesArray; // assign series array of objects
      zingchart.render({ 
      	id: 'myChart', 
      	data: myConfig, 
      	height: '100%', 
      	width: '100%' 
      });
    }
    
    
    
    /*
     * will add/update the plot from the chart
     * and adjust the form fields. 
     */
    window.updatePlot = function(e) {
      //console.log('----updating/adding plot----');
      var formElem = document.querySelector('form');
      var maskElem = document.getElementById('mask');
      var plotIndex = formElem.querySelector('#plot-index');
      var plotText = formElem.querySelector('#plot-text');
      var plotValue = formElem.querySelector('#plot-value');
    
      if (plotIndex.value) {
        zingchart.exec('myChart', 'modifyplot', {
          plotindex: plotIndex.value,
          data: {
            text: plotText.value,
            values: [Number(plotValue.value)]
          }
        });
      } else {
        zingchart.exec('myChart', 'addplot', {
          data: { // will automatically append data to the end of the chart
            text: plotText.value || 'Default Text',
            values: [Number(plotValue.value) || 35]
          }
        });
      }
      
      // clear all values
      maskElem.style.visibility = 'hidden';
      plotIndex.value = '';
      plotText.value = '';
      plotValue.value = '';
      formElem.style.visibility = 'hidden';
      
      // make sure form doesn't execute! 
      return false;
    }
    
    
    /*
     * removePlot will remove the plot from the chart
     * and adjust the form fields
     */
    window.removePlot = function() {
      //console.log('----removing plot----');
      var formElem = document.querySelector('form');
      var maskElem = document.getElementById('mask');
      var plotIndex = formElem.querySelector('#plot-index');
      var plotText = formElem.querySelector('#plot-text');
      var plotValue = formElem.querySelector('#plot-value');
      
      // remove only if valid id is provided
      if (plotIndex.value) {
        zingchart.exec('myChart', 'removeplot', {
          plotindex: plotIndex.value
        });
      }
    
      // clear all values
      maskElem.style.visibility = 'hidden';
      plotIndex.value = '';
      plotText.value = '';
      plotValue.value = '';
      formElem.style.visibility = 'hidden';
      
      // make sure form doesn't execute! 
      return false;
    }
    
    
    /*
     * addplot pulls up the form overlay
     */
    window.addPlot = function() {
      var formElem = document.querySelector('form').style.visibility = 'visible';
      var maskElem = document.getElementById('mask').style.visibility = 'visible';
      var plotText = document.getElementById('plot-text');
      var plotValue = document.getElementById('plot-value');
      
      plotText.value = "Default Text";
      plotValue.value = 25;
      plotText.focus();
      return false;
    }