• Edit
  • Download
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingSoft Demo</title>
    7.   <script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
    8.   <script nonce="undefined" src="https://cdn.zingchart.com/modules/zingchart-zoom-buttons.min.js"></script>
    9.   <style>
    10.     .chart--container {
    11.       min-height: 530px;
    12.       width: 100%;
    13.       height: 100%;
    14.     }
    15.  
    16.     input {
    17.       font-family: 'Lucida Sans Unicode';
    18.     }
    19.  
    20.     .zc-ref {
    21.       display: none;
    22.     }
    23.   </style>
    24. </head>
    25.  
    26. <body>
    27.   <div id="myChart" class="chart--container">
    28.     <a class="zc-ref" href="https://www.zingchart.com/">Powered by ZingChart</a>
    29.   </div>
    30.   <script>
    31.     ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"]; // window:load event for Javascript to run after HTML
    32.     // because this Javascript is injected into the document head
    33.     window.addEventListener('load', () => {
    34.       // Javascript code to execute after DOM content
    35.  
    36.       // full ZingChart schema can be found here:
    37.       // https://www.zingchart.com/docs/api/json-configuration/
    38.       let chartConfig = {
    39.         type: 'area',
    40.         globals: {
    41.           fontFamily: 'Lucida Sans Unicode'
    42.         },
    43.         plotarea: {
    44.           margin: '50px 40px 40px 80px'
    45.         },
    46.         scaleX: {
    47.           item: {
    48.             fontSize: '10px'
    49.           },
    50.           transform: {
    51.             type: 'date'
    52.           },
    53.           zooming: true
    54.         },
    55.         scaleY: {
    56.           autoFit: true,
    57.           guide: {
    58.             lineStyle: 'solid'
    59.           },
    60.           item: {
    61.             fontSize: '10px'
    62.           },
    63.           label: {
    64.             text: 'VOLUMES'
    65.           },
    66.           minValue: 'auto',
    67.           short: true
    68.         },
    69.         preview: {
    70.           adjustLayout: true,
    71.           borderWidth: '1px',
    72.           handle: {
    73.             height: '20px',
    74.             lineWidth: '0px'
    75.           }
    76.         },
    77.         noData: {
    78.           text: 'No data found',
    79.           backgroundColor: '#efefef'
    80.         },
    81.         // if fetching data remotely define an empty series
    82.         series: [{}]
    83.       };
    84.  
    85.       // render the chart right away
    86.       zingchart.render({
    87.         id: 'myChart',
    88.         data: chartConfig
    89.       });
    90.  
    91.       // ONLY ONCE we have loaded the zoom-button module
    92.       zingchart.loadModules('zoom-buttons', () => {
    93.         // fetch the data remotely
    94.         fetch('https://cdn.zingchart.com/datasets/timeseries-sample-data-2019.json')
    95.           .then(res => res.json())
    96.           .then(timeseriesData => {
    97.             // assign data
    98.             chartConfig.series[0].values = timeseriesData.values;
    99.             // destroy the chart since we have to render the
    100.             // chart with a module. if there is no module,
    101.             // just use set data like the catch statement
    102.             zingchart.exec('myChart', 'destroy');
    103.             // render chart with width and height to
    104.             // fill the parent container CSS dimensions
    105.             zingchart.render({
    106.               id: 'myChart',
    107.               data: chartConfig,
    108.               height: '100%',
    109.               width: '100%',
    110.               modules: 'zoom-buttons'
    111.             });
    112.           })
    113.           .catch(e => {
    114.             // if error, render blank chart
    115.             console.error('--- error fetching data from: https://cdn.zingchart.com/datasets/timeseries-sample-data.json ---');
    116.             chartConfig.title = {};
    117.             chartConfig.title.text = 'Error Fetching https://cdn.zingchart.com/datasets/timeseries-sample-data.json';
    118.             // just exec setdata api method since we don't need to render the zoom modules
    119.             // https://www.zingchart.com/docs/api/methods/
    120.             zingchart.exec('myChart', 'setdata', {
    121.               data: chartConfig
    122.             });
    123.           });
    124.       });
    125.     });
    126.   </script>
    127. </body>
    128.  
    129. </html>
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingSoft Demo</title>
    7.   <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
    8.   <script src="https://cdn.zingchart.com/modules/zingchart-zoom-buttons.min.js"></script>
    9. </head>
    10.  
    11. <body>
    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. .chart--container {
    2.   min-height: 530px;
    3.   width: 100%;
    4.   height: 100%;
    5. }
    6.  
    7. input {
    8.   font-family: 'Lucida Sans Unicode';
    9. }
    10.  
    11. .zc-ref {
    12.   display: none;
    13. }
    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 chartConfig = {
    9.     type: 'area',
    10.     globals: {
    11.       fontFamily: 'Lucida Sans Unicode'
    12.     },
    13.     plotarea: {
    14.       margin: '50px 40px 40px 80px'
    15.     },
    16.     scaleX: {
    17.       item: {
    18.         fontSize: '10px'
    19.       },
    20.       transform: {
    21.         type: 'date'
    22.       },
    23.       zooming: true
    24.     },
    25.     scaleY: {
    26.       autoFit: true,
    27.       guide: {
    28.         lineStyle: 'solid'
    29.       },
    30.       item: {
    31.         fontSize: '10px'
    32.       },
    33.       label: {
    34.         text: 'VOLUMES'
    35.       },
    36.       minValue: 'auto',
    37.       short: true
    38.     },
    39.     preview: {
    40.       adjustLayout: true,
    41.       borderWidth: '1px',
    42.       handle: {
    43.         height: '20px',
    44.         lineWidth: '0px'
    45.       }
    46.     },
    47.     noData: {
    48.       text: 'No data found',
    49.       backgroundColor: '#efefef'
    50.     },
    51.     // if fetching data remotely define an empty series
    52.     series: [{}]
    53.   };
    54.  
    55.   // render the chart right away
    56.   zingchart.render({
    57.     id: 'myChart',
    58.     data: chartConfig
    59.   });
    60.  
    61.   // ONLY ONCE we have loaded the zoom-button module
    62.   zingchart.loadModules('zoom-buttons', () => {
    63.     // fetch the data remotely
    64.     fetch('https://cdn.zingchart.com/datasets/timeseries-sample-data-2019.json')
    65.       .then(res => res.json())
    66.       .then(timeseriesData => {
    67.         // assign data
    68.         chartConfig.series[0].values = timeseriesData.values;
    69.         // destroy the chart since we have to render the
    70.         // chart with a module. if there is no module,
    71.         // just use set data like the catch statement
    72.         zingchart.exec('myChart', 'destroy');
    73.         // render chart with width and height to
    74.         // fill the parent container CSS dimensions
    75.         zingchart.render({
    76.           id: 'myChart',
    77.           data: chartConfig,
    78.           height: '100%',
    79.           width: '100%',
    80.           modules: 'zoom-buttons'
    81.         });
    82.       })
    83.       .catch(e => {
    84.         // if error, render blank chart
    85.         console.error('--- error fetching data from: https://cdn.zingchart.com/datasets/timeseries-sample-data.json ---');
    86.         chartConfig.title = {};
    87.         chartConfig.title.text = 'Error Fetching https://cdn.zingchart.com/datasets/timeseries-sample-data.json';
    88.         // just exec setdata api method since we don't need to render the zoom modules
    89.         // https://www.zingchart.com/docs/api/methods/
    90.         zingchart.exec('myChart', 'setdata', {
    91.           data: chartConfig
    92.         });
    93.       });
    94.   });
    95. });