• Edit
  • Download
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingGrid: Blank Grid</title>
    7.   <script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
    8.   <style>
    9.     html,
    10.     body {
    11.       height: 100%;
    12.       width: 100%;
    13.       margin: 0;
    14.       padding: 0;
    15.     }
    16.  
    17.     .chart--container {
    18.       height: 100%;
    19.       width: 100%;
    20.       min-height: 150px;
    21.     }
    22.  
    23.     .zc-ref {
    24.       display: none;
    25.     }
    26.   </style>
    27. </head>
    28.  
    29. <body>
    30.   <!-- CHART CONTAINER -->
    31.   <div id="myChart" class="chart--container">
    32.     <a class="zc-ref" href="https://www.zingchart.com">Powered by ZingChart</a>
    33.   </div>
    34.   <script>
    35.     ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
    36.  
    37.     function fetchAndRenderPlot(plotIndex) {
    38.       // fetch the remote configurations and render them in
    39.       // succession
    40.       fetch(`https://cdn.zingchart.com/datasets/remote-data-plot${plotIndex}.json`)
    41.         .then(res => {
    42.           return res.json();
    43.         })
    44.         .then(results => {
    45.           // use addplot to instantiate the chart data
    46.           zingchart.exec('myChart', 'addplot', {
    47.             plotindex: plotIndex,
    48.             data: results
    49.           });
    50.         })
    51.         .catch(e => {
    52.           // let the user know there was an error
    53.           zingchart.exec('myChart', 'update', {
    54.             data: {
    55.               noData: {
    56.                 text: 'Error Fetching remote data, please refresh page.'
    57.               }
    58.             }
    59.           });
    60.         });
    61.     }
    62.  
    63.     // window:load event for Javascript to run after HTML
    64.     // because this Javascript is injected into the document head
    65.     window.addEventListener('load', () => {
    66.       // Javascript code to execute after DOM content
    67.       const myConfig = {
    68.         type: 'bar',
    69.         title: {
    70.           text: 'Data Basics - Remote Data Async Plots',
    71.           fontSize: 24,
    72.         },
    73.         legend: {
    74.           draggable: true,
    75.         },
    76.         scaleX: {
    77.           // set scale label
    78.           label: {
    79.             text: 'Days'
    80.           },
    81.           // convert text on scale indices
    82.           labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    83.         },
    84.         scaleY: {
    85.           // scale label with unicode character
    86.           label: {
    87.             text: 'Temperature (°F)'
    88.           }
    89.         },
    90.         scaleY2: {
    91.           // scale label with unicode character
    92.           label: {
    93.             text: 'Temperature (°C)'
    94.           }
    95.         },
    96.         plot: {
    97.           // animation docs here:
    98.           // https://www.zingchart.com/docs/tutorials/design-and-styling/chart-animation/#animation__effect
    99.           animation: {
    100.             effect: 'ANIMATION_EXPAND_BOTTOM',
    101.             method: 'ANIMATION_STRONG_EASE_OUT',
    102.             sequence: 'ANIMATION_BY_NODE',
    103.             speed: 275,
    104.           },
    105.           valueBox: {
    106.             placement: 'top',
    107.           },
    108.         },
    109.         noData: {
    110.           text: 'Fetching remote data...',
    111.           backgroundColor: '#eeeeee',
    112.           fontSize: 18
    113.         },
    114.         // the commented out data is the series (data)
    115.         // objects we are fetching remotely (indvidually)
    116.         series: [
    117.           /*
    118.             {
    119.               values: [23,20,27,29,25,17,15],
    120.               text: 'Week 1',
    121.             },
    122.             {
    123.               values: [35,42,33,49,35,47,35],
    124.               text: 'Week 2'
    125.             },
    126.             {
    127.               values: [15,22,13,33,44,27,31],
    128.               text: 'Week 3'
    129.             }
    130.           */
    131.         ]
    132.       };
    133.  
    134.       // render chart with width and height to
    135.       // fill the parent container CSS dimensions
    136.       zingchart.render({
    137.         id: 'myChart',
    138.         data: myConfig,
    139.         height: '100%',
    140.         width: '100%'
    141.       });
    142.  
    143.       // fetch plots. Use setTimeout to simulate network instability
    144.       fetchAndRenderPlot(1);
    145.       setTimeout(() => {
    146.         fetchAndRenderPlot(2);
    147.       }, 1200);
    148.       setTimeout(() => {
    149.         fetchAndRenderPlot(3);
    150.       }, 3500);
    151.     });
    152.   </script>
    153. </body>
    154.  
    155. </html>
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingGrid: Blank Grid</title>
    7.   <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
    8. </head>
    9.  
    10. <body>
    11.   <!-- CHART CONTAINER -->
    12.   <div id="myChart" class="chart--container">
    13.     <a class="zc-ref" href="https://www.zingchart.com">Powered by ZingChart</a>
    14.   </div>
    15. </body>
    16.  
    17. </html>
    1. html,
    2. body {
    3.   height: 100%;
    4.   width: 100%;
    5.   margin: 0;
    6.   padding: 0;
    7. }
    8.  
    9. .chart--container {
    10.   height: 100%;
    11.   width: 100%;
    12.   min-height: 150px;
    13. }
    14.  
    15. .zc-ref {
    16.   display: none;
    17. }
    1. function fetchAndRenderPlot(plotIndex) {
    2.   // fetch the remote configurations and render them in
    3.   // succession
    4.   fetch(`https://cdn.zingchart.com/datasets/remote-data-plot${plotIndex}.json`)
    5.     .then(res => {
    6.       return res.json();
    7.     })
    8.     .then(results => {
    9.       // use addplot to instantiate the chart data
    10.       zingchart.exec('myChart', 'addplot', {
    11.         plotindex: plotIndex,
    12.         data: results
    13.       });
    14.     })
    15.     .catch(e => {
    16.       // let the user know there was an error
    17.       zingchart.exec('myChart', 'update', {
    18.         data: {
    19.           noData: {
    20.             text: 'Error Fetching remote data, please refresh page.'
    21.           }
    22.         }
    23.       });
    24.     });
    25. }
    26.  
    27. // window:load event for Javascript to run after HTML
    28. // because this Javascript is injected into the document head
    29. window.addEventListener('load', () => {
    30.   // Javascript code to execute after DOM content
    31.   const myConfig = {
    32.     type: 'bar',
    33.     title: {
    34.       text: 'Data Basics - Remote Data Async Plots',
    35.       fontSize: 24,
    36.     },
    37.     legend: {
    38.       draggable: true,
    39.     },
    40.     scaleX: {
    41.       // set scale label
    42.       label: {
    43.         text: 'Days'
    44.       },
    45.       // convert text on scale indices
    46.       labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    47.     },
    48.     scaleY: {
    49.       // scale label with unicode character
    50.       label: {
    51.         text: 'Temperature (°F)'
    52.       }
    53.     },
    54.     scaleY2: {
    55.       // scale label with unicode character
    56.       label: {
    57.         text: 'Temperature (°C)'
    58.       }
    59.     },
    60.     plot: {
    61.       // animation docs here:
    62.       // https://www.zingchart.com/docs/tutorials/design-and-styling/chart-animation/#animation__effect
    63.       animation: {
    64.         effect: 'ANIMATION_EXPAND_BOTTOM',
    65.         method: 'ANIMATION_STRONG_EASE_OUT',
    66.         sequence: 'ANIMATION_BY_NODE',
    67.         speed: 275,
    68.       },
    69.       valueBox: {
    70.         placement: 'top',
    71.       },
    72.     },
    73.     noData: {
    74.       text: 'Fetching remote data...',
    75.       backgroundColor: '#eeeeee',
    76.       fontSize: 18
    77.     },
    78.     // the commented out data is the series (data)
    79.     // objects we are fetching remotely (indvidually)
    80.     series: [
    81.       /*
    82.         {
    83.           values: [23,20,27,29,25,17,15],
    84.           text: 'Week 1',
    85.         },
    86.         {
    87.           values: [35,42,33,49,35,47,35],
    88.           text: 'Week 2'
    89.         },
    90.         {
    91.           values: [15,22,13,33,44,27,31],
    92.           text: 'Week 3'
    93.         }
    94.       */
    95.     ]
    96.   };
    97.  
    98.   // render chart with width and height to
    99.   // fill the parent container CSS dimensions
    100.   zingchart.render({
    101.     id: 'myChart',
    102.     data: myConfig,
    103.     height: '100%',
    104.     width: '100%'
    105.   });
    106.  
    107.   // fetch plots. Use setTimeout to simulate network instability
    108.   fetchAndRenderPlot(1);
    109.   setTimeout(() => {
    110.     fetchAndRenderPlot(2);
    111.   }, 1200);
    112.   setTimeout(() => {
    113.     fetchAndRenderPlot(3);
    114.   }, 3500);
    115. });