Remote data source returns grouped data?

[David]

Consider the set of data below returned from a remote data source.

[
    {
        activityName: "Scheduled",
        hourlyActivities: [
            {
                hour: 8,
                activityCount: 5
            },
            {
                hour: 12,
                activityCount: 11
            }
        ]
    },
    {
        activityName: "Cancelled",
        hourlyActivities: [
            {
                hour: 8,
                activityCount: 1
            },
            {
                hour: 12,
                activityCount: 5
            }
        ]
    }
]

I'm trying to get a basic line chart that is grouped by activityName (displayed in legend), where the x axis is hour and the y axis is activityCount?  Can I get an MVVM example on how to configure the chart and data source? I was able to achieve grouping when the data source was an array of simple objects (not grouped), but I don't know where to start when the data is grouped by the server.

[Iliana Dyankova]

Hello David,

The dataSource component is designed to work with flat data and does not support nested data structures. In order to achieve the desired outcome I can suggest loading a simple array of objects and grouping the data client-side using the dataSource API (like in this online demo).

Regards,
Iliana Nikolova
Telerik