Home forums Using CanvasJS Multi Series Line Graphs

This topic contains 4 replies, has 2 voices, and was last updated by  jamesf 3 years, 6 months ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #4549

    jamesf
    Participant

    Hi Sunil,

    I am trying to figure out how to create a line graph using 2 sets of data which are stored in a json object.

    Below is the code for a single line graph:

    Demo

    $( document ).ready(function() {

    var dps = [ {x: 1, y: 10}, {x: 2, y: 20}, {x: 3, y: 30} ]; //dataPoints.

    var chart = new CanvasJS.Chart(“chartContainer”,{
    title :{
    text: “Live Data”
    },
    axisX: {
    title: “Axis X Title”
    },
    axisY: {
    title: “Units”
    },
    data: [{
    type: “line”,
    dataPoints : dps
    }]
    });

    chart.render();

    });

    What I would like to do is modify dps so that 2 lines are graphed, meaning the dps variable looks something like:
    var dps = [ [{x: 1, y: 10}, {x: 2, y: 20}, {x: 3, y: 30}] , [{x: 1, y: 30}, {x: 2, y: 50}, {x: 3, y: 70}] ];

    How do you build such a json object by merely modifying the above variable dps from above?

    Thanks,
    Jim

    #4554

    Sunil Urs
    Keymaster

    Jim,

    In order to show two line charts, you need to add two separate dataSeries – one for each line. You can just modify the same dataPoints array. So the code would go something like this

    `data: [
    {
    type: “line”,
    dataPoints : dps1
    },
    {
    type: “line”,//or column, area, etc
    dataPoints : dps2
    }
    ]
    `

    Follow the link to learn more about Multi Series Charts & Combination Charts

    #4568

    jamesf
    Participant

    Sunil thanks alot on this. I modified the above code to wok with 2 data sets now. See below for anyone having same issue.

    Demo

    $( document ).ready(function() { // Begin jQuery ready function

    //Creating a multi-series line graph from 2 sets of data. Namely dps1 and dps2.

    var dps1 = [ {x: 0, y: 10}, {x: 2, y: 17}, {x: 3, y: 29} ]; //dataPoints – line 1
    var dps2 = [ {x: 1, y: 15}, {x: 2, y: 28}, {x: 3, y: 42} ]; //dataPoints. – line 2

    var chart = new CanvasJS.Chart(“chartContainer”,{
    title :{
    text: “Live Data”
    },
    axisX: {
    title: “Axis X Title”
    },
    axisY: {
    title: “Units”
    },

    // begin data for 2 line graphs. Note dps1 and dps2 are
    //defined above as a json object. See http://www.w3schools.com/json/
    data: [
    { type: “line”, dataPoints : dps1},
    { type: “line”, dataPoints : dps2}
    ]
    // end of data for 2 line graphs

    }); // End of new chart variable

    chart.render();

    }); // End of jQuery ready function

    #4569

    Sunil Urs
    Keymaster

    The above code works for me except that the quotes had to be changed from “ to “.

    Here is the working code
    http://jsfiddle.net/canvasjs/HA2JY/

    If this is not what you expected, can you please tell me the expected behavior?

    #4570

    jamesf
    Participant

    Sunil,

    Your Fiddle is just what I needed to know. Once you know the structure for 2 series,
    then to build for N series becomes really easy.

    Thanks,
    Jim

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

You must be logged in to reply to this topic.