Home Forums Chart Support how to use with Jquery to dynamic show dynamic number of dynamic graph

how to use with Jquery to dynamic show dynamic number of dynamic graph

Viewing 2 posts - 1 through 2 (of 2 total)
  • #21023

    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>
    • This topic was modified 3 years, 6 months ago by martin.
    • This topic was modified 3 months ago by Manoj Mohan.
    • This topic was modified 3 months ago by Manoj Mohan.
    #21044

    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

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.