Home forums Using CanvasJS Problems with shift function to delete array: dataPoints.shift

This topic contains 4 replies, has 2 voices, and was last updated by  quocnamvnn.vnn 3 months, 2 weeks ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #11761

    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.

    #11770

    Vishwas R
    Keymaster

    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.

    #11808

    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

    #11838

    Vishwas R
    Keymaster

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

    #11858

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

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

You must be logged in to reply to this topic.