Home forums Using CanvasJS How to plot multiple line graphs on same Chart

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #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”&gt;
    <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&gt;
    </body>
    </html>

    #26271

    @welshp2,

    Please take a look at this documentation page to create multi-series 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.