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)
  • #26269

    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://canvasjs.com/assets/script/canvasjs.min.js"></script>
    </body>
    </html>
    #26271

    @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

    #26276

    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

    #26290

    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.