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)
  • June 8, 2018 at 1:05 pm #21023

    martin

    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 6 years, 6 months ago by martin.
    • This topic was modified 3 years, 3 months ago by Manoj Mohan.
    • This topic was modified 3 years, 3 months ago by Manoj Mohan.
    June 11, 2018 at 10:46 am #21044

    Sunil Urs

    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.