• 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 {
          height: 100%;
          width: 100%;
        }
      </style>
    </head>
    
    <body>
      <div id='myChart'></div>
      <script>
        ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
        let chartConfig = {
          type: 'gauge',
          title: {
            text: 'Fetching CSV Data...'
          },
          plotarea: {
            marginTop: 50,
          },
          legend: {
            toggleAction: 'remove',
          },
          series: []
        };
    
        zingchart.render({
          id: 'myChart',
          data: chartConfig,
          height: 450,
          width: "100%"
        });
    
        function reqListener(e) {
          console.log('----String text----\n\n', this.responseText, this);
          var arrayOfRows = this.responseText.split('\n');
          let seriesArray = [];
          let title = arrayOfRows[1];
    
          // initialize 8 date ratio series objects
          chartConfig.series[0] = {
            values: [Number(arrayOfRows[3])]
          };
    
          chartConfig.title.text = title;
    
          // load data into chart
          zingchart.exec('myChart', 'setdata', {
            data: chartConfig
          });
        }
    
        setTimeout(function() {
          // request data from url
          var oReq = new XMLHttpRequest();
          oReq.addEventListener('load', reqListener);
          oReq.open('GET', 'https://cdn.zingchart.com/datasets/gauge-chart.csv');
          oReq.send();
        }, 1000);
      </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>
      <div id='myChart'></div>
    </body>
    
    </html>
    html,
    body {
      height: 100%;
      width: 100%;
    }
    let chartConfig = {
      type: 'gauge',
      title: {
        text: 'Fetching CSV Data...'
      },
      plotarea: {
        marginTop: 50,
      },
      legend: {
        toggleAction: 'remove',
      },
      series: []
    };
    
    zingchart.render({
      id: 'myChart',
      data: chartConfig,
      height: 450,
      width: "100%"
    });
    
    function reqListener(e) {
      console.log('----String text----\n\n', this.responseText, this);
      var arrayOfRows = this.responseText.split('\n');
      let seriesArray = [];
      let title = arrayOfRows[1];
    
      // initialize 8 date ratio series objects
      chartConfig.series[0] = {
        values: [Number(arrayOfRows[3])]
      };
    
      chartConfig.title.text = title;
    
      // load data into chart
      zingchart.exec('myChart', 'setdata', {
        data: chartConfig
      });
    }
    
    setTimeout(function() {
      // request data from url
      var oReq = new XMLHttpRequest();
      oReq.addEventListener('load', reqListener);
      oReq.open('GET', 'https://cdn.zingchart.com/datasets/gauge-chart.csv');
      oReq.send();
    }, 1000);