Home › Forums › Chart Support › How to plot multiple line graphs on same Chart

How to plot multiple line graphs on same Chart

Viewing 4 posts - 1 through 4 (of 4 total)
  • August 13, 2019 at 1:57 am #26269

    welshp2

    Hi ,
    I currently plot an array of POJO measurements objects using the following code
    but I would like to send a 2D array with multiple array measures – to provide multiple line graphs on the same chart.

    I assuming i create a dps [[]] array.
    I’m wondering how to loop around the high level (dataseries level) and inner array.
    Also how is the Chart declared and rendered

    Is it using data [datapoint: dps(0)] and ata [datapoint: dps(1)] as separate charts if I send 2 dataseries.

    Can the building of the charts be done within the loops.
    I have not seen this done in the examples provided.
    thanks in advance

    <!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Test 2</title>
</head>
<body>

<script th:inline="javascript">
/*<![CDATA[*/
window.onload = function() {
    var measures = /*[[${measures}]]*/ 'default';    
   
    var dps = [];   
 

	for(var i=0; i<measures.length;i++) {
		
		var d = measures[i].timeUtc * 1000;
		//console.log("Date is " + d); 
		
   		 dps.push({"x": d, "y":measures[i].temp});
   		
	}
    
    var chart = new CanvasJS.Chart("chartContainer", {
    	animationEnabled: false,
    	theme: "light2",
    	exportEnabled: true,
    	title:{
    		text: "Temperature Readings"
    	},
    	axisY:{
    		includeZero: false
    	},
    	data: [{        
    		type: "line",  	
    		xValueType: "dateTime",
    		dataPoints: dps		
    		
    	}]
    });
    
   
    /* Update dataPoints from AJAX and render the chart*/	
   // chart.options.data[0].dataPoints = measures;	
    chart.render();		
    	
}	
/*]]>*/
</script>
    <div id="chartContainer" style="height: 370px; width: 100%;"></div>
	<script src="https://cdn.canvasjs.com/canvasjs.min.js"></script>
</body>
</html>
    August 13, 2019 at 8:01 pm #26271

    Manoj Mohan

    @welshp2,

    You can render multiple line series in a single chart by adding dataSeries elements to data Array. Please take a look at the below code snippet for the same.

    data: [
  {        
	type: "line",
	dataPoints: [
	  { x: 10, y: 21 },
	  { x: 20, y: 25},
	  { x: 30, y: 20 },
	  { x: 40, y: 25 },
	  { x: 50, y: 27 },
	  { x: 60, y: 28 },
	  { x: 70, y: 28 },
	  { x: 80, y: 24 },
	  { x: 90, y: 26}
	]
  },
  {        
	type: "line",
	dataPoints: [
   	  { x: 10, y: 31 },
   	  { x: 20, y: 35},
   	  { x: 30, y: 30 },
   	  { x: 40, y: 35 },
   	  { x: 50, y: 35 },
   	  { x: 60, y: 38 },
   	  { x: 70, y: 38 },
   	  { x: 80, y: 34 },
   	  { x: 90, y: 44}
	]
   },
   .
   .
   .
]

    Also, please take a look at this documentation page for more information on creating multi-series chart.

    Multi Series Line Chart

    —-
    Manoj Mohan
    Team CanvasJS

    August 13, 2019 at 9:01 pm #26276

    welshp2

    Hi,
    I’ve looked at those examples but they are relatively simple. Hard coding the values in the js/html.
    I’m more specifically interested in how to pass an object that holds 2 arraylists of measurements (or more) and plot a graph for each arraylist.

    Is this possible?
    I have tried using a var dps = [[]]; but it fails.

    Do I need to send a json object and parse that?
    How to code the for loops and perform an inline line graph plot?

    I’m using thymeleaf and Spring Boot mvc – any ideas greatly accepted
    thanks
    Peter

    August 14, 2019 at 6:31 pm #26290

    Manoj Mohan

    Peter,

    Can you please share a sample project along with sample data over Google-Drive or OneDrive so that we can understand your scenario better and help you out?

    —-
    Manoj Mohan
    Team CanvasJS

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

You must be logged in to reply to this topic.