Binding multiple series data to a chart

4 posts, 1 answers
  1. Ricardo
    Ricardo avatar
    3 posts
    Member since:
    Jul 2013

    Posted 06 Aug 2013 Link to this post

    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?
  2. Ricardo
    Ricardo avatar
    3 posts
    Member since:
    Jul 2013

    Posted 07 Aug 2013 Link to this post

    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?
  3. Answer
    T. Tsonev
    Admin
    T. Tsonev avatar
    2831 posts

    Posted 08 Aug 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  4. Ricardo
    Ricardo avatar
    3 posts
    Member since:
    Jul 2013

    Posted 09 Aug 2013 Link to this post

    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.
Back to Top