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 10 months, 1 week ago.

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

    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

    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;
    <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",{
    				text:"Live Chart with dataPoints from External JSON"
    			zoomEnabled: true,
    				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,
    	function updateChart() {
    	$.getJSON('JSON.php', function(data) {
    		$.each(data, function(key, value) {
    		setTimeout(function(){updateChart()}, 5000);
    <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>
    <div id="chartContainer" style="height: 300px; width: 100%;"></div>


    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


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



    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


    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.


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

        $dataPoints = array();
             // Creating a new connection.
            $link = new \PDO(   'mysql:host=;dbname=light;charset=utf8mb4', 
                                    \PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION,
                                    \PDO::ATTR_PERSISTENT => false
            $handle = $link->prepare('select BTime, TSensor2 from bottomsensors'); 
            $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){
        echo json_encode($dataPoints, JSON_NUMERIC_CHECK);

    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.



    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.