0

I would like to draw two dataset (stats and stats2).

I could able to draw one series (stats),

dataSource: {  data: stats},

http://jsfiddle.net/1sgt4810

but when I add the second one, it does not draw.

dataSource: {  data: stats, stats2 },

http://jsfiddle.net/1sgt4810/2/

I know there is an option of doing it as follows

                      series: [{
                            type: "line",
                            field: "y",
                            categoryField: "x",
                            name: "Path1",
                            style: "smooth",
                            data: stats,
                            markers: {
                             visible: false
                          }
                        }, {
                            type: "line",
                            field: "y",
                            categoryField: "x",
                            name: "Path2",
                            style: "smooth",
                            data: stats2,
                            markers: {
                             visible: false
                          }
                        }],

Because in the future, I will have many of the lines, I need to know how to handle with multiple lines in a modular way.

casillas
  • 16,351
  • 19
  • 115
  • 215

2 Answers2

2

Option 1

Rather than using dataSource, you can supply multiples series and give them each a data attribute. You can see this in the example on Kendo UI's site.

series: [{
    name: "Path1",
    //other properties
    data: stats
}, {
    name: "Path2",
    //other properties
    data: stats2
}],

Here's an updated fiddle with both lines shown. I don't believe there's a way to do it without having multiple series.

Option 2

If you want to merge the lines into one, you could concatenate the arrays like so:

dataSource: [].concat(stats, stats2)

Here's a fiddle for that.

Option 3

Another possibility is to generate the series based on how many arrays you have. For example:

series: [ stats, stats2 ].map(function (data, idx) {
    return {
        type: "line",
        field: "y",
        categoryField: "x",
        name: "Path" + (idx + 1),
        style: "smooth",
        data: data,
        markers: {
            visible: false
        }
    };
})

You can see that here.

redbmk
  • 4,687
  • 3
  • 25
  • 49
  • thanks for the effort, however I do not neither want to concatenate them or use separate datasource since I need to handle multiple linesources. In addition to that, this data source attributes are exactly same. – casillas Apr 15 '15 at 23:06
  • @ilyasUyanik, I guess I'm not sure what you're after. You want the data from both `stats` and `stats2`, but you don't want them to be on the same line nor two have two separate lines. What do you want it to look like? – redbmk Apr 15 '15 at 23:39
  • @ilyasUyanik I've added another example, if you're just trying to avoid manually entering a series for each datasource – redbmk Apr 15 '15 at 23:48
  • Any idea for the following question http://stackoverflow.com/questions/30173359/mouse-hover-or-click-event-in-line-chart – casillas May 11 '15 at 17:18
1

Looking at your jfiddle you problem is that you trying to pass two stats array in to datasource and would want it to draw a line for you instead you need to modife your exitent stat

 { x: 1227.35612555829, y: 6016.67309037634,  z: 6013.67309037634},

take a look at http://jsfiddle.net/1sgt4810/19/

COLD TOLD
  • 13,513
  • 3
  • 35
  • 52
  • Could u elaborate a little bit. why did you add z property? You need to take a look the following fiddle: http://jsfiddle.net/1sgt4810/2/ – casillas Apr 15 '15 at 23:15
  • I know how to add two lines manually by adding another series as mentioned in the question. However, I would like to avoid manual work. What if I will have 50 series of line? I need to find a way to make it modular. – casillas Apr 15 '15 at 23:20
  • check http://jsfiddle.net/3yhbyy2g/1/ the following. It could be done using scatterLine. – casillas Apr 16 '15 at 23:13
  • I would be glad if you have an idea of the following http://stackoverflow.com/questions/29687368/reverse-y-axis-in-scatterline-kendo-ui – casillas Apr 16 '15 at 23:14