• 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.   <!-- can also render the modules ahead of time here -->
    9.   <!-- <script nonce="undefined" src="https://cdn.zingchart.com/modules/zingchart-zoom-buttons.min.js"></script> -->
    10.   <style>
    11.     html,
    12.     body {
    13.       height: 100%;
    14.       width: 100%;
    15.       margin: 0;
    16.       padding: 0;
    17.     }
    18.  
    19.     #myChart {
    20.       height: 100%;
    21.       width: 100%;
    22.       min-height: 150px;
    23.     }
    24.  
    25.     .zc-ref {
    26.       display: none;
    27.     }
    28.   </style>
    29. </head>
    30.  
    31. <body>
    32.   <!-- CHART CONTAINER -->
    33.   <div id="myChart">
    34.     <a class="zc-ref" href="https://www.zingchart.com">Powered by ZingChart</a>
    35.   </div>
    36.  
    37.   <script>
    38.     ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"]; // window:load event for Javascript to run after HTML
    39.     // because this Javascript is injected into the document head
    40.     window.addEventListener('load', () => {
    41.       // Javascript code to execute after DOM content
    42.  
    43.       // full ZingChart schema can be found here:
    44.       // https://www.zingchart.com/docs/api/json-configuration/
    45.       let myConfig = {
    46.         globals: {
    47.           fontFamily: 'Lucida Sans Unicode'
    48.         },
    49.         type: 'area',
    50.         plot: {
    51.           mode: 'fast',
    52.           exact: true,
    53.           smartSampling: true,
    54.           hintTs: true,
    55.           maxNodes: 150,
    56.           maxTrackers: 150,
    57.         },
    58.         plotarea: {
    59.           margin: '50 40 40 80'
    60.         },
    61.         preview: {
    62.           borderWidth: 1,
    63.           handle: {
    64.             lineWidth: 0,
    65.             height: 20
    66.           },
    67.           adjustLayout: true
    68.         },
    69.         crosshairX: {},
    70.         scrollX: {},
    71.         scaleX: {
    72.           transform: {
    73.             type: 'date'
    74.           },
    75.           item: {
    76.             fontSize: 10
    77.           },
    78.           zooming: true
    79.         },
    80.         scaleY: {
    81.           autoFit: true,
    82.           minValue: 'auto',
    83.           short: true,
    84.           label: {
    85.             text: 'VOLUMES'
    86.           },
    87.           item: {
    88.             fontSize: 10
    89.           },
    90.           guide: {
    91.             lineStyle: 'solid'
    92.           }
    93.         },
    94.         noData: {
    95.           text: 'No data found',
    96.           backgroundColor: '#efefef'
    97.         },
    98.         // if fetching data remotely define an empty series
    99.         series: [{
    100.           values: []
    101.         }]
    102.       };
    103.  
    104.       // defined ABOVE the render and sets flags 
    105.       // globally for ALL charts on a page
    106.       zingchart.DEV.CACHECANVASTEXT = true;
    107.       zingchart.DEV.CHECKDECIMALS = false;
    108.       zingchart.DEV.CACHESELECTION = true;
    109.       zingchart.DEV.MEDIARULES = false;
    110.       // zingchart.DEV.SKIPTRACKERS = true;
    111.  
    112.  
    113.       // ONLY ONCE we have loaded the zoom-button module
    114.       zingchart.loadModules('zoom-buttons', () => {
    115.  
    116.         // render the chart right away
    117.         zingchart.render({
    118.           id: 'myChart',
    119.           data: myConfig,
    120.           height: '100%',
    121.           width: '100%',
    122.           output: 'canvas',
    123.           modules: 'zoom-buttons',
    124.         });
    125.  
    126.         // fetch the data remotely
    127.         fetch('https://cdn.zingchart.com/datasets/timeseries-sample-data.json')
    128.           .then(res => res.json())
    129.           .then(timeseriesData => {
    130.             // assign data to chart
    131.             zingchart.exec('myChart', 'setseriesvalues', {
    132.               plotindex: 0,
    133.               values: timeseriesData.values
    134.             });
    135.           })
    136.           .catch(e => {
    137.             // if error, render blank chart
    138.             console.error('--- error fetching data from: https://cdn.zingchart.com/datasets/timeseries-sample-data.json ---');
    139.             myConfig.title = {};
    140.             myConfig.title.text = 'Error Fetching https://cdn.zingchart.com/datasets/timeseries-sample-data.json';
    141.             // just exec setdata api method since we don't need to render the zoom modules
    142.             // https://www.zingchart.com/docs/api/methods/
    143.             zingchart.exec('myChart', 'setdata', {
    144.               data: myConfig
    145.             });
    146.           });
    147.       });
    148.     });
    149.   </script>
    150. </body>
    151.  
    152. </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.   <!-- can also render the modules ahead of time here -->
    9.   <!-- <script src="https://cdn.zingchart.com/modules/zingchart-zoom-buttons.min.js"></script> -->
    10. </head>
    11.  
    12. <body>
    13.   <!-- CHART CONTAINER -->
    14.   <div id="myChart">
    15.     <a class="zc-ref" href="https://www.zingchart.com">Powered by ZingChart</a>
    16.   </div>
    17.  
    18. </body>
    19.  
    20. </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. }
    1. // window:load event for Javascript to run after HTML
    2. // because this Javascript is injected into the document head
    3. window.addEventListener('load', () => {
    4.   // Javascript code to execute after DOM content
    5.  
    6.   // full ZingChart schema can be found here:
    7.   // https://www.zingchart.com/docs/api/json-configuration/
    8.   let myConfig = {
    9.     globals: {
    10.       fontFamily: 'Lucida Sans Unicode'
    11.     },
    12.     type: 'area',
    13.     plot: {
    14.       mode: 'fast',
    15.       exact: true,
    16.       smartSampling: true,
    17.       hintTs: true,
    18.       maxNodes: 150,
    19.       maxTrackers: 150,
    20.     },
    21.     plotarea: {
    22.       margin: '50 40 40 80'
    23.     },
    24.     preview: {
    25.       borderWidth: 1,
    26.       handle: {
    27.         lineWidth: 0,
    28.         height: 20
    29.       },
    30.       adjustLayout: true
    31.     },
    32.     crosshairX: {},
    33.     scrollX: {},
    34.     scaleX: {
    35.       transform: {
    36.         type: 'date'
    37.       },
    38.       item: {
    39.         fontSize: 10
    40.       },
    41.       zooming: true
    42.     },
    43.     scaleY: {
    44.       autoFit: true,
    45.       minValue: 'auto',
    46.       short: true,
    47.       label: {
    48.         text: 'VOLUMES'
    49.       },
    50.       item: {
    51.         fontSize: 10
    52.       },
    53.       guide: {
    54.         lineStyle: 'solid'
    55.       }
    56.     },
    57.     noData: {
    58.       text: 'No data found',
    59.       backgroundColor: '#efefef'
    60.     },
    61.     // if fetching data remotely define an empty series
    62.     series: [{
    63.       values: []
    64.     }]
    65.   };
    66.  
    67.   // defined ABOVE the render and sets flags 
    68.   // globally for ALL charts on a page
    69.   zingchart.DEV.CACHECANVASTEXT = true;
    70.   zingchart.DEV.CHECKDECIMALS = false;
    71.   zingchart.DEV.CACHESELECTION = true;
    72.   zingchart.DEV.MEDIARULES = false;
    73.   // zingchart.DEV.SKIPTRACKERS = true;
    74.  
    75.  
    76.   // ONLY ONCE we have loaded the zoom-button module
    77.   zingchart.loadModules('zoom-buttons', () => {
    78.  
    79.     // render the chart right away
    80.     zingchart.render({
    81.       id: 'myChart',
    82.       data: myConfig,
    83.       height: '100%',
    84.       width: '100%',
    85.       output: 'canvas',
    86.       modules: 'zoom-buttons',
    87.     });
    88.  
    89.     // fetch the data remotely
    90.     fetch('https://cdn.zingchart.com/datasets/timeseries-sample-data.json')
    91.       .then(res => res.json())
    92.       .then(timeseriesData => {
    93.         // assign data to chart
    94.         zingchart.exec('myChart', 'setseriesvalues', {
    95.           plotindex: 0,
    96.           values: timeseriesData.values
    97.         });
    98.       })
    99.       .catch(e => {
    100.         // if error, render blank chart
    101.         console.error('--- error fetching data from: https://cdn.zingchart.com/datasets/timeseries-sample-data.json ---');
    102.         myConfig.title = {};
    103.         myConfig.title.text = 'Error Fetching https://cdn.zingchart.com/datasets/timeseries-sample-data.json';
    104.         // just exec setdata api method since we don't need to render the zoom modules
    105.         // https://www.zingchart.com/docs/api/methods/
    106.         zingchart.exec('myChart', 'setdata', {
    107.           data: myConfig
    108.         });
    109.       });
    110.   });
    111. });