Binding multiple series data to a chart

[Ricardo]

Hi, i'm currently experimenting with kendoUI, and it looks pretty good and easy to use.
I have a question regarding binding data to a multiple series chart. My objective would be binding local data from a datasource, and then move on to binding remote JSON data to the chart.
Starting from the scatter line multiple series example at http://demos.kendoui.com/dataviz/scatter-charts/scatter-line.html, i tried putting the provided data into a data source:

var ds = new kendo.data.DataSource ({
        data: [
            {"name": "0.8C", "values": [[10, 10], [15, 20], [20, 25], [32, 40], [43, 50], [55, 60], [60, 70], [70, 80], [90, 100]]},
            {"name": "1.6C", "values": [[10, 40], [17, 50], [18, 70], [35, 90], [47, 95], [60, 100]]},
            {"name": "3.1C", "values": [[10, 70], [13, 90], [25, 100]]}
        ],
    });

However, i can't understand how to bind this data to the chart. Of course, i will need to specify the chart's datasource as the defined variable, but in single-series charts i must specify the columns from the data source. How can i configure the chart to display correctly the legend (name field) and each value?

[Ricardo]

Searching around the forums and debugging the javascript i have managed to find a solution, although it doesnt seem very correct. I extracted the data from the datasource, pushed it into an array and then configured the chart to use that array as the source of the series:

dataSource.read();

var view = dataSource.view();

var chartSeries = [];

      

for (var groupIx = 0; groupIx < view.length; groupIx++) {

        var group = view[groupIx];

    chartSeries.push({

        data: group.items[0].data,

        field: "data",

        name: group.value

    });
}

$("#chart").kendoChart({
       (...)
       series: chartSeries,
       (...)
}

Is there a more elegant solution? And if I use a datasource bound to external data, do i have to perform these steps as well?

[T. Tsonev]

Hi,

Your solution is completely adequate for the specified data format.

Grouping can be done automatically, but this will require changes to the data structure. For example:

    dataSource: {
        data: [{ name: "0.8C", x: 10, y: 10 }, { name: "0.8C", x: 15, y: 20 },
               { name: "0.8C", x: 10, y: 10 }, { name: "0.8C", x: 15, y: 20 }],
        group: {
            field: "name"
        }
    },
    series: [{
        type: "scatter",
        xField: "x",
        yField: "y"
    }]

-- Live demo --

Make sure to check out the Binding to grouped data demo as well.

Regards,
T. Tsonev
Telerik

[Ricardo]

Thanks, that was actually the solution i was looking for originally. I wasn't being able to bind the data properly since i was missing the series definition you gave on your example.