Multiple Series of Line in Kendo-UI

Question

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.

Answer 1

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 .

Answer 2

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/