Home forums Using CanvasJS Multiline chart only shows 1 line with double values for y

Tagged: 

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #28195

    Hello,
    newbie question, but I have gone blind to what I have done wrong, please help.

    JS:

    window.onload = function () {
     
    var dataPoints1 = dataPoints2 = [];
     
    var chart = new CanvasJS.Chart("chartContainer", {
    	animationEnabled: true,
    	exportEnabled: true,
    	title:{
    		text: "Network speeds"
    	},
    	axisY: {
    		title: "In Mbps",
    		includeZero: false
    	},
    	data: [{
    		type: "spline",
    		toolTipContent: "{y} Mbps",
    		dataPoints: dataPoints1
    	},
    	{
    		type: "spline",
    		dataPoints: dataPoints2
    	}]
    });
     
    $.get("../speedchart/speed_results", getDataPointsFromFile);
    
    function getDataPointsFromFile(file) {
    	var Lines = points = speed = [];
    	Lines = file.split(/[\r?\n|\r|\n]+/);
    	for (var i = 0; i < Lines.length; i++) {
    		if (Lines[i].length > 0) {
    			points = Lines[i].split("\t");
    			speed = points[1].split(":");
    			uspeed = points[2].split(":");
    			dataPoints1.push({
    				label: points[0],
    				y: parseFloat(speed[1])
    			});
    			dataPoints2.push({
    				label: points[0],
    				y: parseFloat(speed[1])
    			});
    		console.log("timestamp: " + points[0]);
    		console.log("Down: " + speed[1]);
    		console.log("Up: " + uspeed[1]);
    		}
    	}
    	chart.render();
    }
     
    }

    Console log (part of it), for showing values:

    timestamp: 2020-01-23 18:30 speedchart.php:48:11
    Down:  11 speedchart.php:49:11
    Up:  12 speedchart.php:50:11
    timestamp: 2020-01-23 19:30 speedchart.php:48:11
    Down:  5 speedchart.php:49:11
    Up:  14 speedchart.php:50:11
    timestamp: 2020-01-23 20:30 speedchart.php:48:11
    Down:  8 speedchart.php:49:11
    Up:  16 speedchart.php:50:11
    timestamp: 2020-01-23 21:30 speedchart.php:48:11
    Down:  4 speedchart.php:49:11
    Up:  13 speedchart.php:50:11
    timestamp: 2020-01-23 22:30 speedchart.php:48:11
    Down:  17 speedchart.php:49:11
    Up:  15 speedchart.php:50:11
    timestamp: 2020-01-23 23:30 speedchart.php:48:11
    Down:  67 speedchart.php:49:11
    Up:  15 speedchart.php:50:11
    timestamp: 2020-01-24 00:30 speedchart.php:48:11
    Down:  71 speedchart.php:49:11
    Up:  24 speedchart.php:50:11
    timestamp: 2020-01-24 01:30 speedchart.php:48:11
    Down:  75 speedchart.php:49:11
    Up:  29 speedchart.php:50:11
    #28198

    EDIT:
    Constructed my chart with hints from this jsfiddle AND got it working.

    #28221

    @laakkus,

    Glad that you figured it out :)


    Shashi Ranjan
    Team CanvasJS

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

You must be logged in to reply to this topic.