// 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 }) }); });
<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='http://www.github.com/PINT/ZingChart-jQuery'>Check out our documentation on GitHub!</a>
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%; }