Binding chart to json advice

3 posts, 0 answers
  1. Karl
    Karl avatar
    4 posts
    Member since:
    Jan 2013

    Posted 03 Feb 2013 Link to this post

    Hi, I have json data coming back correctly (can see it in fiddler) but I'm not sure how to bind it to kendo charts correctly.

    This is how the data is formatted:

    [{"Question":"lorem ipsum....?","OptionTitles":["Branch Office 2","Head office"],"OptionCounts":[1,1]}]

    The data I want to use for the chart is the option titles for categories and the option counts as the bar/column display. 

    The example below is of a bar chart, currently there are no bars and the y axis displays [object Object], maybe I need to drill into the json somehow?
    My chart:

     $("#chartBar").kendoChart({
                    theme: "metro",
                    dataSource: {
                        transport: {
                            read: {
                                url: 'urltodata',
                                dataType: 'json'
                            }
                        }
                    },
                    series: [{ name: "Stuff", type: "bar", field: "OptionCounts" }],

                    categoryAxis: [{ field: "OptionTitles" }],
                    line: { visible: false },
                    tooltip: { visible: true, format: "{0:00}%" },
                    legend: { position: "bottom" }
                });

    Many thanks!
  2. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2622 posts

    Posted 05 Feb 2013 Link to this post

    Hi Karl,

    I am afraid what you are trying to achieve is not possible in Kendo UI because the DataSource does not support nested data structures. In order to display the "OptionCounts" as series and "OptionTitles" as categories you should modify your data. For example: 
    var data = [ {
       "OptionTitles": "Branch Office 2",
       "OptionCounts": 1
      }, {
       "OptionTitles": "Head office",
       "OptionCounts": 1
      }
    ]
     
    $("#chartBar").kendoChart({
      //....
      series: [{
         field: "OptionCounts"
      }],
      categoryAxis: {
         field: "OptionTitles"
      }
    });
    I hope this will fit your requirements.

    Regards,
    Iliana Nikolova
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Karl
    Karl avatar
    4 posts
    Member since:
    Jan 2013

    Posted 12 Feb 2013 Link to this post

    I managed to get this working by iterating through the JSON, also by the excellent support given by Iliana :)
Back to Top