• Edit
  • Download
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingSoft Demo</title>
    7.  
    8.   <script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
    9.   <style>
    10.     html,
    11.     body {
    12.       height: 100%;
    13.       width: 100%;
    14.       margin: 0;
    15.       padding: 0;
    16.     }
    17.  
    18.     #myChart {
    19.       height: 100%;
    20.       width: 100%;
    21.       min-height: 150px;
    22.     }
    23.  
    24.     .zc-ref {
    25.       display: none;
    26.     }
    27.  
    28.     #myChart button {
    29.       position: absolute;
    30.       top: 15px;
    31.       left: 10px;
    32.       z-index: 1000;
    33.     }
    34.   </style>
    35. </head>
    36.  
    37. <body>
    38.   <div id="myChart">
    39.     <a class="zc-ref" href="https://www.zingchart.com">Powered by ZingChart</a>
    40.     <button onclick="window.parent.location.reload()">Reload Data</button>
    41.   </div>
    42.   <script>
    43.     ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"]; // make the AJAX request
    44.     var oReq = new XMLHttpRequest();
    45.     oReq.addEventListener("load", renderFirstPlotInChart);
    46.     oReq.open("GET", "https://zingchart-rest-api.glitch.me/api/data/plot/v1");
    47.     oReq.send();
    48.  
    49.     // define chart JSON
    50.     var myConfig = {
    51.       type: 'bar',
    52.       title: {
    53.         text: 'Multiple Plots Rendering Asynchronously Using API',
    54.         mediaRules: [{
    55.           maxWidth: 500,
    56.           visible: false
    57.         }]
    58.       },
    59.       plot: {
    60.         // barWidth: 25, // this will prevent users from noticing the barwidth changing
    61.         animation: {}, // add animation to make the chart look alive
    62.       },
    63.       legend: {},
    64.       scaleY: {
    65.         values: '0:300:100' // this will prevent users from noticing the scale repaint
    66.       },
    67.       series: [{
    68.         values: [],
    69.         text: '',
    70.       }]
    71.     };
    72.  
    73.     /*
    74.      * callback for GET request is when we will render the chart
    75.      */
    76.     function renderFirstPlotInChart() {
    77.       myConfig.series[0].values = JSON.parse(this.responseText);
    78.       myConfig.series[0].text = this.responseURL.slice(-2);
    79.       zingchart.render({
    80.         id: 'myChart',
    81.         data: myConfig,
    82.         height: '100%',
    83.         width: '100%'
    84.       });
    85.     }
    86.  
    87.     /*
    88.      * append the plots using ZingChart API method addplot
    89.      * https://www.zingchart.com/docs/api/methods/#zingchart__exec__api__addplot
    90.      */
    91.     function addAnotherPlot() {
    92.       zingchart.exec('myChart', 'addplot', {
    93.         data: {
    94.           values: JSON.parse(this.responseText),
    95.           text: this.responseURL.slice(-2)
    96.         }
    97.       });
    98.     }
    99.     /*
    100.      * Bind plots after the chart has rendered
    101.      */
    102.     zingchart.bind('myChart', 'load', function(e) {
    103.  
    104.       /*
    105.        * make AJAX request for the last two plots
    106.        * Use setTimeouts to show what the effect
    107.        * would look like when using large dataset
    108.        */
    109.       setTimeout(function() {
    110.  
    111.         // call for second dataset
    112.         oReq = new XMLHttpRequest();
    113.         oReq.addEventListener("load", addAnotherPlot);
    114.         oReq.open("GET", "https://zingchart-rest-api.glitch.me/api/data/plot/v2");
    115.         oReq.send();
    116.  
    117.         // call for third dataset
    118.         setTimeout(function() {
    119.           oReq = new XMLHttpRequest();
    120.           oReq.addEventListener("load", addAnotherPlot);
    121.           oReq.open("GET", "https://zingchart-rest-api.glitch.me/api/data/plot/v3");
    122.           oReq.send();
    123.         }, 1000);
    124.  
    125.       }, 2000);
    126.     });
    127.   </script>
    128. </body>
    129.  
    130. </html>
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingSoft Demo</title>
    7.  
    8.   <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
    9. </head>
    10.  
    11. <body>
    12.   <div id="myChart">
    13.     <a class="zc-ref" href="https://www.zingchart.com">Powered by ZingChart</a>
    14.     <button onclick="window.parent.location.reload()">Reload Data</button>
    15.   </div>
    16. </body>
    17.  
    18. </html>
    1. html,
    2. body {
    3.   height: 100%;
    4.   width: 100%;
    5.   margin: 0;
    6.   padding: 0;
    7. }
    8.  
    9. #myChart {
    10.   height: 100%;
    11.   width: 100%;
    12.   min-height: 150px;
    13. }
    14.  
    15. .zc-ref {
    16.   display: none;
    17. }
    18.  
    19. #myChart button {
    20.   position: absolute;
    21.   top: 15px;
    22.   left: 10px;
    23.   z-index: 1000;
    24. }
    1. // make the AJAX request
    2. var oReq = new XMLHttpRequest();
    3. oReq.addEventListener("load", renderFirstPlotInChart);
    4. oReq.open("GET", "https://zingchart-rest-api.glitch.me/api/data/plot/v1");
    5. oReq.send();
    6.  
    7. // define chart JSON
    8. var myConfig = {
    9.   type: 'bar',
    10.   title: {
    11.     text: 'Multiple Plots Rendering Asynchronously Using API',
    12.     mediaRules: [{
    13.       maxWidth: 500,
    14.       visible: false
    15.     }]
    16.   },
    17.   plot: {
    18.     // barWidth: 25, // this will prevent users from noticing the barwidth changing
    19.     animation: {}, // add animation to make the chart look alive
    20.   },
    21.   legend: {},
    22.   scaleY: {
    23.     values: '0:300:100' // this will prevent users from noticing the scale repaint
    24.   },
    25.   series: [{
    26.     values: [],
    27.     text: '',
    28.   }]
    29. };
    30.  
    31. /*
    32.  * callback for GET request is when we will render the chart
    33.  */
    34. function renderFirstPlotInChart() {
    35.   myConfig.series[0].values = JSON.parse(this.responseText);
    36.   myConfig.series[0].text = this.responseURL.slice(-2);
    37.   zingchart.render({
    38.     id: 'myChart',
    39.     data: myConfig,
    40.     height: '100%',
    41.     width: '100%'
    42.   });
    43. }
    44.  
    45. /*
    46.  * append the plots using ZingChart API method addplot
    47.  * https://www.zingchart.com/docs/api/methods/#zingchart__exec__api__addplot
    48.  */
    49. function addAnotherPlot() {
    50.   zingchart.exec('myChart', 'addplot', {
    51.     data: {
    52.       values: JSON.parse(this.responseText),
    53.       text: this.responseURL.slice(-2)
    54.     }
    55.   });
    56. }
    57. /*
    58.  * Bind plots after the chart has rendered
    59.  */
    60. zingchart.bind('myChart', 'load', function(e) {
    61.  
    62.   /*
    63.    * make AJAX request for the last two plots
    64.    * Use setTimeouts to show what the effect
    65.    * would look like when using large dataset
    66.    */
    67.   setTimeout(function() {
    68.  
    69.     // call for second dataset
    70.     oReq = new XMLHttpRequest();
    71.     oReq.addEventListener("load", addAnotherPlot);
    72.     oReq.open("GET", "https://zingchart-rest-api.glitch.me/api/data/plot/v2");
    73.     oReq.send();
    74.  
    75.     // call for third dataset
    76.     setTimeout(function() {
    77.       oReq = new XMLHttpRequest();
    78.       oReq.addEventListener("load", addAnotherPlot);
    79.       oReq.open("GET", "https://zingchart-rest-api.glitch.me/api/data/plot/v3");
    80.       oReq.send();
    81.     }, 1000);
    82.  
    83.   }, 2000);
    84. });