• 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;
        }
      </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;
    }