• Edit
  • Download
  • <!DOCTYPE html>
    <html>
    
    <head>
      <meta charset="utf-8">
      <title>ZingSoft Demo</title>
      <script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
      <style>
        html,
        body {
          margin: 0;
          padding: 0;
          width: 100%;
          height: 100%;
        }
    
        .chart--container {
          min-height: 550px;
          width: 100%;
        }
    
        .zc-ref {
          display: none;
        }
      </style>
    </head>
    
    <body>
      <!-- CHART CONTAINER -->
      <div id="myChart" class="chart--container">
        <a class="zc-ref" href="https://www.zingchart.com/">Powered by ZingChart</a>
      </div>
      <script>
        ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
        let gSeriesData = {
          text: '7 Year Data',
          values: []
        };
    
        // toggle the type of chart
    
        // window:load event for Javascript to run after HTML
        // because this Javascript is injected into the document head
        window.addEventListener('load', () => {
          // Javascript code to execute after DOM content
    
    
          // full ZingChart schema can be found here:
          // https://www.zingchart.com/docs/api/json-configuration/
          let chartConfig = {
            type: 'line',
            globals: {
              fontFamily: 'Lucida Sans Unicode'
            },
            plotarea: {
              margin: '50px 40px 40px 80px'
            },
            scaleX: {
              item: {
                fontSize: '10px'
              },
              transform: {
                type: 'date',
                item: {
                  visible: true
                }
              },
              zooming: true
            },
            scaleY: {
              autoFit: true,
              guide: {
                lineStyle: 'solid'
              },
              item: {
                fontSize: '10px'
              },
              label: {
                text: 'VOLUMES'
              },
              minValue: 'auto',
              short: true
            },
            crosshairX: {
              plotLabel: {
                short: true,
                decimals: 1
              }
            },
            preview: {
              adjustLayout: true,
              borderWidth: '1px',
              handle: {
                height: '20px',
                lineWidth: '0px'
              }
            },
            noData: {
              text: 'No data found',
              backgroundColor: '#efefef'
            },
            // define zoom module options
            options: {
              // define custom buttons
              buttons: [{
                  text: '2006',
                  type: 'year',
                  // Difference from farthest year 2013 - 2006
                  count: 2013 - 2010
                },
                {
                  text: '2011',
                  type: 'year',
    
                  count: 2013 - 2011
                },
                {
                  text: '2012',
                  type: 'year',
                  count: 2013 - 2012
                },
                {
                  text: 'All',
                  type: 'all',
                },
              ]
            },
            // if fetching data remotely define an empty series
            series: [{}]
          };
    
          // ONLY ONCE we have loaded the zoom-button module
          zingchart.loadModules('zoom-buttons', () => {
    
            // render the chart right away
            zingchart.render({
              id: 'myChart',
              data: chartConfig,
              height: '100%',
              width: '100%',
              modules: 'zoom-buttons',
            });
    
            // fetch the data remotely
            fetch('https://cdn.zingchart.com/datasets/timeseries-sample-data.json')
              .then(res => res.json())
              .then(timeseriesData => {
                // assign data
                gSeriesData.values = timeseriesData.values;
                zingchart.exec('myChart', 'setseriesdata', {
                  data: [gSeriesData]
                })
              })
              .catch(e => {
                // if error, render blank chart
                console.error('--- error fetching data from: https://cdn.zingchart.com/datasets/timeseries-sample-data.json ---');
                chartConfig.title = {};
                chartConfig.title.text = 'Error Fetching https://cdn.zingchart.com/datasets/timeseries-sample-data.json';
                // just exec setdata api method since we don't need to render the zoom modules
                // https://www.zingchart.com/docs/api/methods/
                zingchart.exec('myChart', 'setdata', {
                  data: chartConfig
                });
              });
          });
        });
      </script>
    </body>
    
    </html>
    <!DOCTYPE html>
    <html>
    
    <head>
      <meta charset="utf-8">
      <title>ZingSoft Demo</title>
      <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
    </head>
    
    <body>
      <!-- CHART CONTAINER -->
      <div id="myChart" class="chart--container">
        <a class="zc-ref" href="https://www.zingchart.com/">Powered by ZingChart</a>
      </div>
    </body>
    
    </html>
    html,
    body {
      margin: 0;
      padding: 0;
      width: 100%;
      height: 100%;
    }
    
    .chart--container {
      min-height: 550px;
      width: 100%;
    }
    
    .zc-ref {
      display: none;
    }
    let gSeriesData = {
      text: '7 Year Data',
      values: []
    };
    
    // toggle the type of chart
    
    // window:load event for Javascript to run after HTML
    // because this Javascript is injected into the document head
    window.addEventListener('load', () => {
      // Javascript code to execute after DOM content
    
    
      // full ZingChart schema can be found here:
      // https://www.zingchart.com/docs/api/json-configuration/
      let chartConfig = {
        type: 'line',
        globals: {
          fontFamily: 'Lucida Sans Unicode'
        },
        plotarea: {
          margin: '50px 40px 40px 80px'
        },
        scaleX: {
          item: {
            fontSize: '10px'
          },
          transform: {
            type: 'date',
            item: {
              visible: true
            }
          },
          zooming: true
        },
        scaleY: {
          autoFit: true,
          guide: {
            lineStyle: 'solid'
          },
          item: {
            fontSize: '10px'
          },
          label: {
            text: 'VOLUMES'
          },
          minValue: 'auto',
          short: true
        },
        crosshairX: {
          plotLabel: {
            short: true,
            decimals: 1
          }
        },
        preview: {
          adjustLayout: true,
          borderWidth: '1px',
          handle: {
            height: '20px',
            lineWidth: '0px'
          }
        },
        noData: {
          text: 'No data found',
          backgroundColor: '#efefef'
        },
        // define zoom module options
        options: {
          // define custom buttons
          buttons: [{
              text: '2006',
              type: 'year',
              // Difference from farthest year 2013 - 2006
              count: 2013 - 2010
            },
            {
              text: '2011',
              type: 'year',
    
              count: 2013 - 2011
            },
            {
              text: '2012',
              type: 'year',
              count: 2013 - 2012
            },
            {
              text: 'All',
              type: 'all',
            },
          ]
        },
        // if fetching data remotely define an empty series
        series: [{}]
      };
    
      // ONLY ONCE we have loaded the zoom-button module
      zingchart.loadModules('zoom-buttons', () => {
    
        // render the chart right away
        zingchart.render({
          id: 'myChart',
          data: chartConfig,
          height: '100%',
          width: '100%',
          modules: 'zoom-buttons',
        });
    
        // fetch the data remotely
        fetch('https://cdn.zingchart.com/datasets/timeseries-sample-data.json')
          .then(res => res.json())
          .then(timeseriesData => {
            // assign data
            gSeriesData.values = timeseriesData.values;
            zingchart.exec('myChart', 'setseriesdata', {
              data: [gSeriesData]
            })
          })
          .catch(e => {
            // if error, render blank chart
            console.error('--- error fetching data from: https://cdn.zingchart.com/datasets/timeseries-sample-data.json ---');
            chartConfig.title = {};
            chartConfig.title.text = 'Error Fetching https://cdn.zingchart.com/datasets/timeseries-sample-data.json';
            // just exec setdata api method since we don't need to render the zoom modules
            // https://www.zingchart.com/docs/api/methods/
            zingchart.exec('myChart', 'setdata', {
              data: chartConfig
            });
          });
      });
    });