You must be logged in to post your query.
Home › Forums › Chart Support › how to use with Jquery to dynamic show dynamic number of dynamic graph
i use with html5 websocket to receive, data , expect to show how many number of data received by counting length of array after split with ; and then show dynamic number of graph
<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <script> window.onload = function() { var dataPointsV2 = []; var dataPointsV3 = []; var dataPoints2 = []; var dataPoints3 = []; var chart2 = new CanvasJS.Chart("chartContainer1", { theme: "light2", title: { text: "Gi0/4 Management port packet per seconds Chart" }, data: [{ type: "line", dataPoints: dataPoints2 }] }); updateData2(); var chart3 = new CanvasJS.Chart("chartContainer2", { theme: "light2", title: { text: "Gi0/8 Management port packet per seconds Chart" }, data: [{ type: "line", dataPoints: dataPoints3 }] }); updateData3(); // Initial Values var xValue = 0; var yValue2 = 0; var yValue3 = 0; var newDataCount = 99999; var ws = new WebSocket("ws://127.0.0.1:5678/") ws.onmessage = function (event) { var wholedata = event.data.split(";"); alert(wholedata.length); $(function(){ for (var countdiv = 0; countdiv <= wholedata.length; countdiv++) { $('#parent').append('<div id="chartContainer'+countdiv+'"style="height: 370px; max-width: 920px; margin: 0px auto;"></div>'); } }); var res2 = wholedata[0].split(":"); yValue2 = res2[0]; var res3 = wholedata[1].split(":"); yValue3 = res3[0]; }; function addData2(data) { if(newDataCount != 1) { $.each(data, function(key, value) { dataPoints2.push({x: xValue, y: parseInt(yValue2)}); xValue++; yValue2 = parseInt(yValue2); }); } else { //dataPoints.shift(); dataPoints2.push({x: xValue, y: parseInt(yValue2)}); xValue++; yValue2 = parseInt(yValue2); } newDataCount = 1; chart2.render(); setTimeout(updateData2, 2000); } function addData3(data) { if(newDataCount != 1) { $.each(data, function(key, value) { dataPoints3.push({x: xValue, y: parseInt(yValue3)}); xValue++; yValue3 = parseInt(yValue3); }); } else { //dataPoints.shift(); dataPoints3.push({x: xValue, y: parseInt(yValue3)}); xValue++; yValue3 = parseInt(yValue3); } newDataCount = 1; chart3.render(); setTimeout(updateData3, 2000); } var chart9 = new CanvasJS.Chart("chartContainer0", { zoomEnabled: true, title: { text: "Gi0/4 and Gi0/8 Management port packet per seconds" }, axisX: { title: "chart updates every 3 secs" }, axisY:{ prefix: "", includeZero: false }, toolTip: { shared: true }, legend: { cursor:"pointer", verticalAlign: "top", fontSize: 22, fontColor: "dimGrey", itemclick : toggleDataSeries }, data: [{ type: "line", xValueType: "dateTime", yValueFormatString: "####pps", xValueFormatString: "hh:mm:ss TT", showInLegend: true, name: "Gi0/4", dataPoints: dataPointsV2 }, { type: "line", xValueType: "dateTime", yValueFormatString: "####pps", showInLegend: true, name: "Gi0/8" , dataPoints: dataPointsV3 }] }); function toggleDataSeries(e) { if (typeof(e.dataSeries.visible) === "undefined" || e.dataSeries.visible) { e.dataSeries.visible = false; } else { e.dataSeries.visible = true; } chart9.render(); } var updateInterval = 3000; // initial value var yValueV2 = 0; var yValueV3 = 0; var time = new Date; // starting at 9.30 am time.setHours(9); time.setMinutes(30); time.setSeconds(00); time.setMilliseconds(00); function updateChart(count) { count = count || 1; for (var i = 0; i < count; i++) { time.setTime(time.getTime()+ updateInterval); // pushing the new values dataPointsV2.push({ x: time.getTime(), y: yValue2 }); dataPointsV3.push({ x: time.getTime(), y: yValue3 }); } // updating legend text with updated with y Value chart9.options.data[0].legendText = " Gi0/4 " + yValue2 +" pps"; chart9.options.data[1].legendText = " Gi0/8 " + yValue3 +" pps"; chart9.render(); } function updateData2() { $.getJSON("https://canvasjs.com/services/data/datapoints.php?xstart="+xValue+"&ystart="+yValue2+"&length="+newDataCount+"type=json&callback=?", addData2); } function updateData3() { $.getJSON("https://canvasjs.com/services/data/datapoints.php?xstart="+xValue+"&ystart="+yValue3+"&length="+newDataCount+"type=json&callback=?", addData3); } // generates first set of dataPoints updateChart(100); setInterval(function(){updateChart()}, updateInterval); } </script> </head> <body> <table border="1"> <tr> <th> close </th> </tr> <tr width="300"> <td id="data1"> <script> var ws = new WebSocket("ws://127.0.0.1:5678/"), messages = document.createElement('ul'); ws.onmessage = function (event) { document.getElementById('data1').innerHTML = yValue2 document.getElementById('data2').innerHTML = yValue3 }; document.body.appendChild(messages); </script> </td> </tr> <tr> <td id="data2"> </td> </tr> </table> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://canvasjs.com/assets/script/jquery-1.11.1.min.js"></script> <script src="canvasjs.min.js"></script> <a></a> <div id="parent"></div> </body> </html>
Martin,
Can you please explain the issue you are facing? It would also be useful if you can create a jsFiddle demonstrating the issue with minimal code.
If you are just looking for an example using jQuery, here is one.
— Sunil Urs
You must be logged in to reply to this topic. Login/Register