Overview – Showing Multi Series Data in Chart

You can add more than one dataSeries element to data Array in order to create Multi-Series charts. Using “type” property of dataSeries, you can define how it should be rendered – column, line, area, bar, bubble, point, stackedArea, stackedColumn, etc.

Pie or doughnut charts can only have one series – multiple series are not supported yet.

Basic Multi-Series Chart

Below we have a basic multi-series line chart with four dataSeries.

Try Editing The Code

Finishing it up

Similar to the above example, we can plot a Multi-Series area, line, column, bar, etc.
In the next snippet we have a multi series column chart. You can try changing it to “bar”, “area” , “line” , “column” etc.

Try Editing The Code

  Also See:    

If you have any questions, please feel free to ask in our forums.Ask Question

47 Comments

  1. Zach says:

    What if you don’t want to have a point for every single x-axis index for one or more of the lines?

  2. Zach says:

    Could you elaborate a bit? Like I have two lines on the same plot. Of 10 possible dates, one of the lines only has data for 8 of those, and the other has data for all 10. When I plot them, the axis reads for all 10 and the line with 10 points plots correctly but the line with 8 data points plots on the left most 8 positions even though it should skip some earlier.

    • Sunil Urs says:

      I just tried with two series that have different number of dataPoints and it worked as expected – skipping first few points. Have you given x values to all dataPoints in both the series? Could you please create a fiddle for the same so that I can understand it better. Also lets take the conversation to the forum where it would be helpful for others too.

  3. Zach says:

    Yes, I will create one asap but I can’t right now so I will post back here a link tomorrow or the next day. Thank you again.

  4. Zach says:

    Hi Sunil,

    I created a filddle for this: http://jsfiddle.net/zdogz/3WYnm/

    I don’t know how to include the canvas library there but it ran with the error that I expected on my computer.

    Do you know how I can get the data collection named “Fewer Data Points” to display over the proper x-axis markers?

  5. CanonGirl says:

    What good is the X-axis label in your example? How about an example that actually means something. How do you specify labels for the x-axis, such a “Jan”, “Feb” or Dates?

  6. Mabz says:

    Hi,

    I have been looking for the mapping function documentation as highlighted in the link below.

    http://ioi.solutions/2014/04/28/lightswitch-html-canvas-js-interactive-html5-charts/ .

    I am trying to use the mapping function for both “highest” and “grades”.

    [{“MarkID”:223,”HighestMarkID”:218,”Rank”:5,”Test”:”Debit and Credit Principles”,”label”:”Accounts”,”grades”:70.0,”highest”:95.0},{“MarkID”:94,”HighestMarkID”:91,”Rank”:7,”Test”:”Elements and Molecules”,”label”:”Chemistry”,”grades”:48.0,”highest”:93.0},{“MarkID”:86,”HighestMarkID”:86,”Rank”:1,”Test”:”Ergonomical Mechanics”,”label”:”Design Technology”,”grades”:83.0,”highest”:83.0},{“MarkID”:78,”HighestMarkID”:76,”Rank”:4,”Test”:”Binary Notation”,”label”:”Computer Science”,”grades”:80.0,”highest”:100.0}]

    using this

    $.getJSON(“../Stats/RecentGrades/” + contentItem.screen.Student.Id, function(data) {
    var chart = new CanvasJS.Chart(“chartC”, {

    title: {
    text: “Recent Papers”
    },
    data: [{
    name: “Grade”,
    type: “column”,
    showInLegend: true,
    mapping: [{ from: “grades”, to: “y” }],
    axisY: {
    suffix: “%”
    }
    },
    {
    name: “Highest”,
    type: “column”,
    dataPoints: data,
    showInLegend: true,
    mapping: [{ from: “highest”, to: “y” }],
    axisY: {
    suffix: “%”
    }
    }

    ]
    });
    chart.render();
    });

    This doesn’t seem to work

    • Sunil Urs says:

      Hi Mabz,

      Mapping function is a custom function created by the author of the article and is not part of CanvasJS API. Please refer the source code provided by the author – it should give you enough idea to build your own.

      At the same time, I’ve also created a simple mapping function that might be of help. Here is an example.

      • man says:

        hii sunil,
        in this case, how i get the json from php file, so the the “var jsonArray” not a hard code but i parshe json from url/.php
        i had try like this :

        var jsonArray;
        $.getJson(‘url’,data,function(jsonData){
        jsonArray = jsonData;
        });

  7. Stuart says:

    Hi Sunil,

    In a multi series chart is it possible to have different scales. I have a requirement where I have to draw to series. The y values in one series is in millions whereas the other series has values in hundreds units. Is it possible to give a differnet scales to the series that have smaller values. So it does not look very tiny in the chart.

    Thanks
    Stuart

  10. Jml says:

    is it possible to create Multi series line Chart in a Loop (for loop)? i want to Display multiple real time, overlaying sine curves and remove the old ones as the new sine curves are adding up (keeping the browser Performance stable).

  11. Srinivas says:

    Hello Sunil,
    We would like to have a diff chart of 2 pie charts using CanvasJS, similar to Google developer’s Diff Chart. Is there a way to achieve this in CanvasJS?

    • Anjali says:

      duy,

      As of now it is not possible to swap x and y axis position as shown in the picture – which is required for showing text to the left.

  15. veeru says:

    Is it possible to have a overlapping bar or column chart (by giving opacity value)?
    ex:
    type: “column/bar”,
    dataPoints: [
    { x: 10, y: 171 },
    { x: 20, y: 155}
    ]
    },
    {
    type: “column”,
    dataPoints: [
    { x: 10, y: 71 },
    { x: 20, y: 55}
    ]

    For the above JSON, it possible to overlap { x: 10, y: 171 } and { x: 10, y: 71 } in to one column/bar with change in opacity value to make sure it has two datapoints in a same bar/column. I dont want to use a stacked bar/column as it will kind of complicate my code in terms of re-ordering the data based on min and max values in every dataseries.

  16. Adon says:

    I am having an issue with the chart rendering incorrectly. Not sure if it is my data or a bug with multiple datasets. It renders the points correctly but then overlaps them with a straight line. Any thoughts?

    http://i.imgur.com/T3crlzQ.png

    This straight lines across the graph are not supposed to be there. Sometimes on reload it works just fine, and other times it displays like this.

    Thanks in advance!

  17. Nadia says:

    Hello,

    I’d like to know if there is some way to leave some separation between the bars of different series (in the graphic above,this would be a gap between red and blue bars).

    Thanks in advance!

  18. Tejas Masurkar says:

    Hello i have to plot multiple line charts dynamically
    For ex
    i have 3 time stamps 2:10:10 , 3:10:10, 4:10:10
    and need to plot line charts for 2,3,4 4,5,6 5,6,7 for corresponding timestamps
    I knw there is static method to do this.
    But what if my values are changed to 2,3,4,5 4,5,6,7 5,6,7,8 to 4 lines dynamically.
    Is there any way to do this

    • Tejas Masurkar says:

      to be more clear
      data: [{
      type: “column”,
      dataPoints: [
      { x: 10, y: 171 },
      { x: 20, y: 155},
      { x: 30, y: 150 },
      { x: 40, y: 165 },
      { x: 50, y: 195 },
      { x: 60, y: 168 },
      { x: 70, y: 128 },
      { x: 80, y: 134 },
      { x: 90, y: 114}
      ]
      },
      {
      type: “column”,
      dataPoints: [
      { x: 10, y: 71 },
      { x: 20, y: 55},
      { x: 30, y: 50 },
      { x: 40, y: 65 },
      { x: 50, y: 95 },
      { x: 60, y: 68 },
      { x: 70, y: 28 },
      { x: 80, y: 34 },
      { x: 90, y: 14}
      ]
      }
      ]
      });
      can this be like data.push[
      type:column,
      datapoints:datapoint[0][0]] and this all thing in loop so that we can plot datapoints dynamically (like 2 lines 3 lines)

  19. wilfred says:

    In multi-series column chart, how do we customize the dataPointWidth between the red and the other color?

  20. pk says:

    Hi
    I am new to javascript.
    can any one help me here to draw a Showing Multi Series Data,
    my formate of data is
    31 34 45 67 68 89 56 75
    34 35 63 71 43 87 53 78
    57 84 35 97 88 89 56 75
    64 45 73 51 73 87 53 78
    here each using column , I have to represent the separate the line.

If you have any questions, please feel free to ask in our forums. Ask Question