How to bind chart series dynamically with an array of multiple objects of the same type ?

3 posts, 1 answers
  1. Eva
    Eva avatar
    8 posts
    Member since:
    Mar 2017

    Posted 06 Jul Link to this post

    Hello,

    I need to display a chart binded dynamically with multiple series of the same object type.

    I managed to do that using the following chart parameters :

    dataSource: {
        data: data,
        group: {
            field: "group"
        }
    }

    where my data looks like this (this is only an example, data is actually:

    var data = [{
        group: "First",
        category: 1,
        value: 100
    },
    {
        group: "First",
        category: 2,
        value: 200
    },
    {
        group: "Second",
        category: 1,
        value: 200
    },
    {
        group: "Second",
        category: 2,
        value: 400
    }];

     

    However, this structure doesn't suit my other needs (such as displaying a table with one row per group), so I'd like to know if it's possible to display the same chart using data as following :

    var data = [{
        group: "First",
        values: [{
            category: 1,
            value: 100
        },
        {
            category: 2,
            value: 200
        }]
    },
    {
        group: "Second",
        values: [{
            category: 1,
            value: 200
        },
        {
            category: 2,
            value: 400
        }]
    }];

     

    How can I do that ?

    Thanks a lot for your help.

    Best regards

  2. Eva
    Eva avatar
    8 posts
    Member since:
    Mar 2017

    Posted 06 Jul in reply to Eva Link to this post

    Seems like I erased one part of my post :

    Eva said:

    where my data looks like this (this is only an example, real data is actually a list of objects serialized to Json)

  3. Answer
    Daniel
    Admin
    Daniel avatar
    2178 posts

    Posted 10 Jul Link to this post

    Hello,

    It is possible with some code to convert the data items to series configuration - example.

    Regards,
    Daniel
    Progress Telerik
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top