• 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;
        }
    
        #myTable {
          text-align: left;
          width: 88%;
          margin-left: 10%;
          margin-top: 20px;
        }
    
        #docs {
          display: block;
          margin-top: 20px;
          background-color: #00BAF0;
          color: #FFF;
          padding: 10px 20px;
          text-decoration: none;
          text-align: center;
        }
    
        input {
          -webkit-appearance: slider-vertical;
          width: 50%;
          height: 50%;
        }
      </style>
    </head>
    
    <body>
      <h3>Move the sliders to modify the chart</h3>
      <div id="myChart"></div>
      <table id="myTable">
        <tr>
          <th>Node 0</th>
          <th>Node 1</th>
          <th>Node 2</th>
          <th>Node 3</th>
          <th>Node 4</th>
          <th>Node 5</th>
        </tr>
        <tr id="sliders">
          <td><input type="range" name="points" min="0" max="10" value="3" orient='vertical'></td>
          <td><input type="range" name="points" min="0" max="10" value="4" orient='vertical'></td>
          <td><input type="range" name="points" min="0" max="10" value="10" orient='vertical'></td>
          <td><input type="range" name="points" min="0" max="10" value="2" orient='vertical'></td>
          <td><input type="range" name="points" min="0" max="10" value="6" orient='vertical'></td>
          <td><input type="range" name="points" min="0" max="10" value="5" orient='vertical'></td>
        </tr>
      </table>
      <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
        });
    
        $("input[type='range']").each(function(idx) {
    
          // Bind input events to each slider
          $(this).on("input", function() {
            // Get the value of each slider on input events
            var newVal = parseInt($(this).val());
            // Set the value of the corresponding node to the slider's new value
            $("#myChart").setNodeValue({
              plotindex: 0,
              nodeindex: idx,
              value: newVal
            })
          });
        });
      </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>Move the sliders to modify the chart</h3>
        <div id="myChart"></div>
        <table id="myTable">
          <tr>
            <th>Node 0</th>
            <th>Node 1</th>     
            <th>Node 2</th>
            <th>Node 3</th>
            <th>Node 4</th>
            <th>Node 5</th>
          </tr>
          <tr id="sliders">
              <td><input type="range" name="points" min="0" max="10" value="3" orient='vertical'></td>
            <td><input type="range" name="points" min="0" max="10" value="4" orient='vertical'></td>     
            <td><input type="range" name="points" min="0" max="10" value="10" orient='vertical'></td>
            <td><input type="range" name="points" min="0" max="10" value="2" orient='vertical'></td>
            <td><input type="range" name="points" min="0" max="10" value="6" orient='vertical'></td>     
            <td><input type="range" name="points" min="0" max="10" value="5" orient='vertical'></td>
          </tr>
        </table>
        <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;
    }
    #myTable {
        text-align:left;
        width:88%;
        margin-left:10%;
        margin-top:20px;
    }
    #docs {
        display:block;
        margin-top:20px;
        background-color:#00BAF0;
        color:#FFF;
        padding:10px 20px;
        text-decoration:none;
        text-align:center;
    }
    input {
       -webkit-appearance: slider-vertical;
       width:50%;
       height:50%;
    }
    // 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
    });
    
    $("input[type='range']").each(function(idx){
        
        // Bind input events to each slider
        $(this).on("input",function(){
            // Get the value of each slider on input events
            var newVal = parseInt($(this).val());
            // Set the value of the corresponding node to the slider's new value
            $("#myChart").setNodeValue({
                plotindex:0,
                nodeindex:idx,
                value: newVal
            })
        });
    });