• Edit
  • Download
  • <!DOCTYPE html>
    <html>
    
    <head>
      <meta charset="utf-8">
      <title>ZingSoft Demo</title>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js"></script>
      <script src="//cdn.zingchart.com/zingchart.jquery.min.js "></script>
    
      <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
      <style>
        body {
          font-family: Helvetica;
          padding: 20px;
        }
    
        h3 {
          text-align: center;
        }
    
        #myChart {
          width: 100%;
          height: 300px;
          margin-bottom: 20px;
        }
    
        a {
          color: #00BAF0;
          text-decoration: none;
          font-size: 12px;
        }
    
        #docs {
          display: block;
          margin-top: 20px;
          background-color: #00BAF0;
          color: #FFF;
          font-size: 18px;
          padding: 10px 20px;
          text-decoration: none;
          text-align: center;
        }
      </style>
    </head>
    
    <body>
      <h3>Loadin' up some AJAX data!&nbsp;</h3>
      <div id="myChart"></div>
      <button type="button">Load AJAX Data</button>
      <a href="https://api.myjson.com/bins/530az" target="_blank">(Click here to see the raw JSON)</a>
      <a id="docs" target="_blank" href='https://github.com/zingchart/ZingChart-jQuery'>Check out our documentation on GitHub!</a>
      <script>
        ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"]; // Data for the chart
        var myData = {
          type: "line",
          plot: {
            aspect: "spline"
          },
          series: [{
            values: [3, 4, 10, 2, 6, 5]
          }]
        };
    
        // Make your chart
        $("#myChart").zingchart({
          data: myData
        });
    
        // Bind a click event to the button
        $("button").click(function() {
    
          // Issue a get request
          $.get('https://api.myjson.com/bins/530az', function() {})
    
            // Upon a successful get request...
            // (notice we haven't even touched the ZingChart API yet)
            .done(function(res) {
    
              // Store the new data in a variable (totally optional)
              var newData = res.data;
    
              // Set the series values equal to the newData
              $("#myChart").setSeriesValues({
                "values": [newData]
              });
    
              // Tada! Your chart just used AJAX data. Begin the disco.
            });
        });
      </script>
    </body>
    
    </html>
    <!DOCTYPE html>
    <html>
    
    <head>
      <meta charset="utf-8">
      <title>ZingSoft Demo</title>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js"></script>
      <script src="//cdn.zingchart.com/zingchart.jquery.min.js "></script>
    
      <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
    </head>
    
    <body>
      <h3>Loadin' up some AJAX data!&nbsp;</h3>
      <div id="myChart"></div>
      <button type="button">Load AJAX Data</button>
      <a href="https://api.myjson.com/bins/530az" target="_blank">(Click here to see the raw JSON)</a>
      <a id="docs" target="_blank" href='https://github.com/zingchart/ZingChart-jQuery'>Check out our documentation on GitHub!</a>
    </body>
    
    </html>
    body {
      font-family: Helvetica;
      padding: 20px;
    }
    
    h3 {
      text-align: center;
    }
    
    #myChart {
      width: 100%;
      height: 300px;
      margin-bottom: 20px;
    }
    
    a {
      color: #00BAF0;
      text-decoration: none;
      font-size: 12px;
    }
    
    #docs {
      display: block;
      margin-top: 20px;
      background-color: #00BAF0;
      color: #FFF;
      font-size: 18px;
      padding: 10px 20px;
      text-decoration: none;
      text-align: center;
    }
    // Data for the chart
    var myData = {
      type: "line",
      plot: {
        aspect: "spline"
      },
      series: [{
        values: [3, 4, 10, 2, 6, 5]
      }]
    };
    
    // Make your chart
    $("#myChart").zingchart({
      data: myData
    });
    
    // Bind a click event to the button
    $("button").click(function() {
    
      // Issue a get request
      $.get('https://api.myjson.com/bins/530az', function() {})
    
        // Upon a successful get request...
        // (notice we haven't even touched the ZingChart API yet)
        .done(function(res) {
    
          // Store the new data in a variable (totally optional)
          var newData = res.data;
    
          // Set the series values equal to the newData
          $("#myChart").setSeriesValues({
            "values": [newData]
          });
    
          // Tada! Your chart just used AJAX data. Begin the disco.
        });
    });