You must be logged in to post your query.
Home › Forums › Chart Support › How to plot multiple line graphs on same Chart
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>
@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.
—- Manoj Mohan Team CanvasJS
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
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?
You must be logged in to reply to this topic. Login/Register