Overview – Showing Multi Series Data in Chart

Comments 47

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

   • You can skip the same.

   • And thank you very much for your time Sunil!

2. 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.

   • 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. 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. 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?

   • I could get the fiddle working http://jsfiddle.net/canvasjs/eMVsL/

     Reason why it is not skipping first few point is because you are using labels to show dates. Labels are just considered as strings and not a date and hence they always start from the beginning. If you want to show values by date, you need to set JavaScript Date Object or TimeStamp to x.
     https://canvasjs.com/docs/charts/basics-of-creating-html5-chart/date-time-axis/

5. 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?

   • This page is focusing on Multi Series Charts and not date, time or labels. Here are appropriate sections to look at.

     Date Time Axis
     Formatting Date & Time Values

     —
     Sunil Urs

     • Hello,
       Could you please let me know, how the json file would be for a multi-series column (json file on a separate server) and how to read the datapoints in script, as the current examples for $getJSON have only 1 parameter?
       Thanks!

       • no answer?

         • Michael,

           You need to get data from multiple JSON using multiple $getJSON and then render chart. Here is an example.

6. 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

   • 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.

     • 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. 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

   • Yes. You can use secondary axis for the same.

8. Hi, how can i write title in 2 lines?
   Something like that:
   Text1
   Text2

   • vlad,

     This feature is not available yet.

9. how to display Multiseries Dynamically in asp.net c#?

10. 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).

    • Yes, you can do so by adding dataSeries to data array dynamically as shown in this page.

11. 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?

    • srinivas,

      Diff / multiSeries pie charts are not available yet.

12. How can we have the same with pie charts?? I mean a diff chart?

    • kishore,

      MultiSeries pie charts are not available yet.

13. can you please help me how to make a char follow this image :

    https://fbcdn-sphotos-d-a.akamaihd.net/hphotos-ak-xaf1/v/t1.0-9/11535812_1128789780470665_9186310511748209765_n.jpg?oh=4fee0ec4356166d9095f6005feb0d7b9&oe=562D0E86&__gda__=1444760881_b6f6cca6b2626a869dae645dbcf86056

    with the text in left (the y ) and some comment on right (the y ).

    • 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.

14. why “CanvasJS Charting Library” occur error in my computer?

    • Juyeon,

      May I know the error which you are getting? Would also be helpful if you can reproduce the problem in a jsfiddle.

15. 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. 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!

    • Adon,

      Its helpful if you can reproduce the problem in a jsfiddle

17. 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!

    • Sorry, as of now we don’t have a way to show gap between corresponding dataPoints from different series.

18. 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

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

    • Tejas,

      Please refer to this article to know how to add dataPoints/dataSeries dynamically. Here is one more jsfiddle.

      If this doesn’t answer your question, please create a jsfiddle and explain in detail on the requirement.

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

    • Wilfred,

      Sorry we don’t have this functionality as of now.

20. 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.

21. Is this work with date on x axis and values on Y axis

    • Yes, Multi Series Charts will also work with dateTime axis.

22. In multi-series column chart, how do we customize the color of the series?

    • You can set color property inside dataSeries to customize the color of the series.

23. i m change id and unction name but canvas multingraph are not use a my single webpage please suggest