Home forums Using CanvasJS Dynamic chart extra lines being added

This topic contains 7 replies, has 2 voices, and was last updated by  Priyanka M S 2 months, 1 week ago.

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #21790

    Vulpe
    Member

    I am running into an issue whenever my chart renders. I am using a line graph that pulls json data from another file, this updates dynamically.

    The issue dynamic line graph issue as shown is that the last point seems to draw a line to the first point.

    Here is the code I am using. Also the JSON is like this https://api.myjson.com/bins/14imny

    <!DOCTYPE HTML>
        <html>
        <head>  
    <style>
    ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
        overflow: hidden;
        background-color: #333;
    }
    
    li {
        float: left;
        border-right:1px solid #bbb;
    }
    
    li:last-child {
        border-right: none;
    }
    
    li a {
        display: block;
        color: white;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
    }
    
    li a:hover:not(.active) {
        background-color: #111;
    }
    
    .active {
        background-color: #004299;
    }
    </style>
    </head>
    <meta charset="utf-8"/>
    <script type="text/javascript">
    window.onload = function() {
    	var dataPoints = [];
    	var chart;
    	$.getJSON('JSON.php', function(data) {  
    		$.each(data, function(key, value){
    			dataPoints.push({x:(value)["x"], y:(value["y"])});
    		});
    		chart = new CanvasJS.Chart("chartContainer",{
    			title:{
    				text:"Live Chart with dataPoints from External JSON"
    			},
    			zoomEnabled: true,
        	axisX:{
    			scaleBreaks:{
    				autoCalculate: true,
    				maxNumberOfAutoBreaks: 5,
    				collapsibleThreshold: "15%"
    			},
    		},
        	zoomType: "xy",
        	//backgroundColor: "#bdcfed",
        	animationEnabled: true,
       		animationDuration: 5000,
        	exportEnabled: true,
        	theme: "dark1",
    			data: [{
    			showInLegend: true,
        		legendText: "Temperature",
        		markerType: "circle",
                markerSize: "3",
                markerColor: "red",
    			xValueType: "dateTime",
        		xValueFormatString: "YYYY-MM-DD HH:mm:ss",
        		toolTipContent: "x:{x}, y: {y}",
        		type: "line",
    				dataPoints : dataPoints,
    			}]
    		});
    		chart.render();
    		updateChart();
    	});
    	function updateChart() {
    	$.getJSON('JSON.php', function(data) {
    		$.each(data, function(key, value) {
    			dataPoints.push({
    			x:(value["x"]),
    			y:(value["y"]),
    			
    			});
    		});
    		
    		chart.render();
    		setTimeout(function(){updateChart()}, 5000);
    	});
    	}
    }
    </script>
    <script type="text/javascript" src="https://canvasjs.com/assets/script/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
    </head>
    <body>
    <div id="chartContainer" style="height: 300px; width: 100%;"></div>
    </body>
    </html>
    #21805

    Priyanka M S
    Member

    @vulpe,

    Every time you call update chart, the new dataPoints along with the complete set of existing dataPoints gets added to the chart. Hence, the complete graph will be drawn repeatedly on top of each other. Clearing the existing dataPoints before adding the next set(complete set) of dataPoints should work fine in your case. Please take a look at this jsfiddle.

    __
    Priyanka M S
    Team CanvasJS

    #21821

    Vulpe
    Member

    I altered my code to match the jsfiddle you linked but now my graph will no longer update in real time.

    #21835

    Priyanka M S
    Member

    @vulpe,

    You can observe this behaviour because the JSON data you are providing to updateChart() method is same as the JSON data provided while rendering chart for the first time. Can you kindly create a jsfiddle that has JSON data updating dynamically, so that we can look into the code, understand your scenario better and help you out?

    __
    Priyanka M S
    Team CanvasJS

    #21838

    Vulpe
    Member

    I’m not sure that would be possible as the JSON.php file I use to get my json data pulls it straight from a local hosted database.
    And the code I posted above updates data dynamically from the database.

    #21839

    Vulpe
    Member

    I don’t know if its of any use to you but here is the code the code that gets my data for me

    <?php
         
        $dataPoints = array();
        
        try{
             // Creating a new connection.
            
            $link = new \PDO(   'mysql:host=192.168.0.89;dbname=light;charset=utf8mb4', 
                                'Jack', 
                                'Password', 
                                array(
                                    \PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION,
                                    \PDO::ATTR_PERSISTENT => false
                                )
                            );
        	
            $handle = $link->prepare('select BTime, TSensor2 from bottomsensors'); 
            $handle->execute(); 
            $result = $handle->fetchAll(\PDO::FETCH_OBJ);
        		
            foreach($result as $row){
                array_push($dataPoints, array("x"=> strtotime($row->BTime)*1000, "y"=> $row->TSensor2));
            }
        	$link = null;
        }
        catch(\PDOException $ex){
            print($ex->getMessage());
        }
        echo json_encode($dataPoints, JSON_NUMERIC_CHECK);
    ?>
    #21843

    Vulpe
    Member

    I managed to solve the problem.

    I changed the updateChart function as according to this forum post https://canvasjs.com/forums/topic/how-to-update-chart-data-every-second/

    Thank you for the help.

    #21856

    Priyanka M S
    Member

    @vulpe,

    Glad that you figured it out.

    __
    Priyanka M S
    Team CanvasJS

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

You must be logged in to reply to this topic.