• 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.     }
    25.  
    26.     #myTable {
    27.       text-align: left;
    28.       width: 88%;
    29.       margin-left: 10%;
    30.       margin-top: 20px;
    31.     }
    32.  
    33.     #docs {
    34.       display: block;
    35.       margin-top: 20px;
    36.       background-color: #00BAF0;
    37.       color: #FFF;
    38.       padding: 10px 20px;
    39.       text-decoration: none;
    40.       text-align: center;
    41.     }
    42.  
    43.     input {
    44.       -webkit-appearance: slider-vertical;
    45.       width: 50%;
    46.       height: 50%;
    47.     }
    48.   </style>
    49. </head>
    50.  
    51. <body>
    52.   <h3>Move the sliders to modify the chart</h3>
    53.   <div id="myChart"></div>
    54.   <table id="myTable">
    55.     <tr>
    56.       <th>Node 0</th>
    57.       <th>Node 1</th>
    58.       <th>Node 2</th>
    59.       <th>Node 3</th>
    60.       <th>Node 4</th>
    61.       <th>Node 5</th>
    62.     </tr>
    63.     <tr id="sliders">
    64.       <td><input type="range" name="points" min="0" max="10" value="3" orient='vertical'></td>
    65.       <td><input type="range" name="points" min="0" max="10" value="4" orient='vertical'></td>
    66.       <td><input type="range" name="points" min="0" max="10" value="10" orient='vertical'></td>
    67.       <td><input type="range" name="points" min="0" max="10" value="2" orient='vertical'></td>
    68.       <td><input type="range" name="points" min="0" max="10" value="6" orient='vertical'></td>
    69.       <td><input type="range" name="points" min="0" max="10" value="5" orient='vertical'></td>
    70.     </tr>
    71.   </table>
    72.   <a id="docs" target="_blank" href='https://github.com/zingchart/ZingChart-jQuery'>Check out our documentation on GitHub!</a>
    73.   <script>
    74.     ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"]; // Data for the chart
    75.     var myData = {
    76.       type: "line",
    77.       plot: {
    78.         aspect: "spline"
    79.       },
    80.       series: [{
    81.         values: [3, 4, 10, 2, 6, 5]
    82.       }]
    83.     };
    84.  
    85.     // Make your chart
    86.     $("#myChart").zingchart({
    87.       data: myData
    88.     });
    89.  
    90.     $("input[type='range']").each(function(idx) {
    91.  
    92.       // Bind input events to each slider
    93.       $(this).on("input", function() {
    94.         // Get the value of each slider on input events
    95.         var newVal = parseInt($(this).val());
    96.         // Set the value of the corresponding node to the slider's new value
    97.         $("#myChart").setNodeValue({
    98.           plotindex: 0,
    99.           nodeindex: idx,
    100.           value: newVal
    101.         })
    102.       });
    103.     });
    104.   </script>
    105. </body>
    106.  
    107. </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>Move the sliders to modify the chart</h3>
    15.   <div id="myChart"></div>
    16.   <table id="myTable">
    17.     <tr>
    18.       <th>Node 0</th>
    19.       <th>Node 1</th>
    20.       <th>Node 2</th>
    21.       <th>Node 3</th>
    22.       <th>Node 4</th>
    23.       <th>Node 5</th>
    24.     </tr>
    25.     <tr id="sliders">
    26.       <td><input type="range" name="points" min="0" max="10" value="3" orient='vertical'></td>
    27.       <td><input type="range" name="points" min="0" max="10" value="4" orient='vertical'></td>
    28.       <td><input type="range" name="points" min="0" max="10" value="10" orient='vertical'></td>
    29.       <td><input type="range" name="points" min="0" max="10" value="2" orient='vertical'></td>
    30.       <td><input type="range" name="points" min="0" max="10" value="6" orient='vertical'></td>
    31.       <td><input type="range" name="points" min="0" max="10" value="5" orient='vertical'></td>
    32.     </tr>
    33.   </table>
    34.   <a id="docs" target="_blank" href='https://github.com/zingchart/ZingChart-jQuery'>Check out our documentation on GitHub!</a>
    35. </body>
    36.  
    37. </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. }
    14.  
    15. #myTable {
    16.   text-align: left;
    17.   width: 88%;
    18.   margin-left: 10%;
    19.   margin-top: 20px;
    20. }
    21.  
    22. #docs {
    23.   display: block;
    24.   margin-top: 20px;
    25.   background-color: #00BAF0;
    26.   color: #FFF;
    27.   padding: 10px 20px;
    28.   text-decoration: none;
    29.   text-align: center;
    30. }
    31.  
    32. input {
    33.   -webkit-appearance: slider-vertical;
    34.   width: 50%;
    35.   height: 50%;
    36. }
    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. $("input[type='range']").each(function(idx) {
    18.  
    19.   // Bind input events to each slider
    20.   $(this).on("input", function() {
    21.     // Get the value of each slider on input events
    22.     var newVal = parseInt($(this).val());
    23.     // Set the value of the corresponding node to the slider's new value
    24.     $("#myChart").setNodeValue({
    25.       plotindex: 0,
    26.       nodeindex: idx,
    27.       value: newVal
    28.     })
    29.   });
    30. });