• 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://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js"></script>
    8.   <script nonce="undefined" src="//cdn.zingchart.com/zingchart.jquery.min.js "></script>
    9.  
    10.   <script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
    11.   <style>
    12.     body {
    13.       font-family: Helvetica;
    14.       padding: 20px;
    15.     }
    16.  
    17.     h3 {
    18.       text-align: center;
    19.     }
    20.  
    21.     #myChart {
    22.       width: 100%;
    23.       height: 300px;
    24.       margin-bottom: 20px;
    25.     }
    26.  
    27.     a {
    28.       color: #00BAF0;
    29.       text-decoration: none;
    30.       font-size: 12px;
    31.     }
    32.  
    33.     #docs {
    34.       display: block;
    35.       margin-top: 20px;
    36.       background-color: #00BAF0;
    37.       color: #FFF;
    38.       font-size: 18px;
    39.       padding: 10px 20px;
    40.       text-decoration: none;
    41.       text-align: center;
    42.     }
    43.   </style>
    44. </head>
    45.  
    46. <body>
    47.   <h3>Loadin' up some AJAX data!&nbsp;</h3>
    48.   <div id="myChart"></div>
    49.   <button type="button">Load AJAX Data</button>
    50.   <a href="https://api.myjson.com/bins/530az" target="_blank">(Click here to see the raw JSON)</a>
    51.   <a id="docs" target="_blank" href='https://github.com/zingchart/ZingChart-jQuery'>Check out our documentation on GitHub!</a>
    52.   <script>
    53.     ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"]; // Data for the chart
    54.     var myData = {
    55.       type: "line",
    56.       plot: {
    57.         aspect: "spline"
    58.       },
    59.       series: [{
    60.         values: [3, 4, 10, 2, 6, 5]
    61.       }]
    62.     };
    63.  
    64.     // Make your chart
    65.     $("#myChart").zingchart({
    66.       data: myData
    67.     });
    68.  
    69.     // Bind a click event to the button
    70.     $("button").click(function() {
    71.  
    72.       // Issue a get request
    73.       $.get('https://api.myjson.com/bins/530az', function() {})
    74.  
    75.         // Upon a successful get request...
    76.         // (notice we haven't even touched the ZingChart API yet)
    77.         .done(function(res) {
    78.  
    79.           // Store the new data in a variable (totally optional)
    80.           var newData = res.data;
    81.  
    82.           // Set the series values equal to the newData
    83.           $("#myChart").setSeriesValues({
    84.             "values": [newData]
    85.           });
    86.  
    87.           // Tada! Your chart just used AJAX data. Begin the disco.
    88.         });
    89.     });
    90.   </script>
    91. </body>
    92.  
    93. </html>
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingSoft Demo</title>
    7.   <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js"></script>
    8.   <script src="//cdn.zingchart.com/zingchart.jquery.min.js "></script>
    9.  
    10.   <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
    11. </head>
    12.  
    13. <body>
    14.   <h3>Loadin' up some AJAX data!&nbsp;</h3>
    15.   <div id="myChart"></div>
    16.   <button type="button">Load AJAX Data</button>
    17.   <a href="https://api.myjson.com/bins/530az" target="_blank">(Click here to see the raw JSON)</a>
    18.   <a id="docs" target="_blank" href='https://github.com/zingchart/ZingChart-jQuery'>Check out our documentation on GitHub!</a>
    19. </body>
    20.  
    21. </html>
    1. body {
    2.   font-family: Helvetica;
    3.   padding: 20px;
    4. }
    5.  
    6. h3 {
    7.   text-align: center;
    8. }
    9.  
    10. #myChart {
    11.   width: 100%;
    12.   height: 300px;
    13.   margin-bottom: 20px;
    14. }
    15.  
    16. a {
    17.   color: #00BAF0;
    18.   text-decoration: none;
    19.   font-size: 12px;
    20. }
    21.  
    22. #docs {
    23.   display: block;
    24.   margin-top: 20px;
    25.   background-color: #00BAF0;
    26.   color: #FFF;
    27.   font-size: 18px;
    28.   padding: 10px 20px;
    29.   text-decoration: none;
    30.   text-align: center;
    31. }
    1. // Data for the chart
    2. var myData = {
    3.   type: "line",
    4.   plot: {
    5.     aspect: "spline"
    6.   },
    7.   series: [{
    8.     values: [3, 4, 10, 2, 6, 5]
    9.   }]
    10. };
    11.  
    12. // Make your chart
    13. $("#myChart").zingchart({
    14.   data: myData
    15. });
    16.  
    17. // Bind a click event to the button
    18. $("button").click(function() {
    19.  
    20.   // Issue a get request
    21.   $.get('https://api.myjson.com/bins/530az', function() {})
    22.  
    23.     // Upon a successful get request...
    24.     // (notice we haven't even touched the ZingChart API yet)
    25.     .done(function(res) {
    26.  
    27.       // Store the new data in a variable (totally optional)
    28.       var newData = res.data;
    29.  
    30.       // Set the series values equal to the newData
    31.       $("#myChart").setSeriesValues({
    32.         "values": [newData]
    33.       });
    34.  
    35.       // Tada! Your chart just used AJAX data. Begin the disco.
    36.     });
    37. });