Problems with shift function to delete array: dataPoints.shift

[quocnamvnn.vnn]

if I use the shift function to remove the first element in the array when the number of elements than specified (> 10), when they meet the requirements after each drawing I lost one element until only one element.

My code:

window.onload = function () {	

	d = new Date(); // Tạo biến thời gian d
	time2 = d.getHours()+":"+d.getMinutes()+":"+d.getSeconds();	// Lấy giờ phút giây hiện tại
	tmp = 234;
	
	var dataPoints = [{"label":time2, "y" : tmp}];
	
	var chart = new CanvasJS.Chart("chartContainer", {
		title :{
      		text: "AUTO UPDATE VALUE"
      	},
      	axisX: {						
      		title: "DOANH SO"
      	},
      	axisY: {						
      		title: "đồng"
      	},
			data : [{
					type : "spline",
					dataPoints : dataPoints
				},
			]
		});		
			
	chart.render();	
	// Tạo hàm update biểu đồ với thời gian timer
	var timer = 1000, updateCount = 0;
	var dataLength = 5;
	
	var updateChart = function () {
		
		// Xử dụng Ajax gửi request lên server chạy file Data_update_tmp.php 
		// và nhận thông tin từ biến xmlHttp.responseText của server
	var xmlHttp;
 		try{
	  		//Firefox, Opera 8.0+ , Safari
			xmlHttp = new XMLHttpRequest();
		}catch (e){
	  		// IE
			try{
			  	xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
			}
			catch(e){
			  	try{
					xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
				}
					catch (e){
						alert("Your browser does not support AJAX!");
						return false;
					}
				}
			  }
		xmlHttp.onreadystatechange = function()
		{
		  	if (xmlHttp.readyState == 4){
				tmp2 = xmlHttp.responseText;				
			}
		}
  	xmlHttp.open("GET","Data_Live_DS.php",true);
  	xmlHttp.send(null);	
	
		
		
		// Chuyển sang kiểu số và truyền vào biến tong để add vào datapoint		
		tg =  Number(tmp2);	
      	updateCount++; 
		d = new Date();   
		time2 = d.getHours()+":"+d.getMinutes()+":"+d.getSeconds();		
        
		chart.options.data[0].dataPoints.push({"label": time2, "y": tg});

		if( dataPoints.length > 10){
			dataPoints.shift();
		}
		chart.render();		
	};	
	
	// update chart every second	
	setInterval(function(){updateChart()}, timer);
}	
</script>

How do i fix my error? Thanks all.
Sorry my english is not good.

[Vishwas R]

Kindly refer this page to know step-by-step approach to create dynamic charts. If that doesn’t help, kindly create jsfiddle with the issue, so that we can look into it and help you out.

[quocnamvnn.vnn]

Thanks VishwasR.
I want to ask one other question about tooltips. When displaying tooltips on 1 row 2 graph, the chart is not properly positioned tooltips (chart 2)
Example: link

• This reply was modified 7 years, 7 months ago by quocnamvnn.vnn.

[Vishwas R]

The issue is with the css-styling. Instead of using float:left, you can use display: inline-block. Check this example.

[quocnamvnn.vnn]

thanks Vishwar R :D. I added properties “display: display:inline-table;” :).