BLOG POST FULL REST EXAMPLE

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>ZingSoft Demo</title>
  <script nonce="undefined">
    /* 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 nonce="undefined" 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;
}