chart rebind

3 posts, 0 answers
  1. Chung
    Chung avatar
    1 posts
    Member since:
    Apr 2012

    Posted 18 Sep 2012 Link to this post

    which is the best way to rebind data for charts



    from js and asp.net mvc extensions.



    Documentation is not as deep as the older controls
  2. Hristo Germanov
    Admin
    Hristo Germanov avatar
    703 posts

    Posted 19 Sep 2012 Link to this post

    Hi Chung,

    Can you examine this online example and tell me if it works for you.

    Regards,
    Hristo Germanov
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Spartan IV
    Spartan IV avatar
    10 posts
    Member since:
    Sep 2012

    Posted 19 Sep 2012 Link to this post

    With KendoUI chart I believe there is no $('#chart').rebind(params) like the old MVC controls you have to create a javascript function that creates the chart (without using MVC extensions, pure kendo ui jquery)

    .
    .

    at the chart dataSOurce the url points to a controller action, but on data you can add params and read from UI components to get the values, they are passed to your controller

    You call this function again over and over everytime you want to refresh the chart with new data with different
    parameters.

    Let's say you have a date picker with a selected date, and a button to Refresh Chart, then inside:

    dataSource => transport => read, you add a data property that reads the current value from the date picker or any field (one or more fields), they are passed to the controller action in the same order


    function createChart() {            
                   $("#chart").kendoChart({
                       theme: $(document).data("kendoSkin") || "default",
                       title: {
                           text: "My Cool Bubble Chart"
                       },
                       legend: {
                           visible: true,
                           position: "bottom"
                       },
                       dataSource: {
                           transport: {
                               read: {
                                   url: "@Url.Content("~/Controller/ActionName")",
                                   dataType: "json",
                                   data: { // This are the parameters
                                       date: function() {
                                           return $('#date').val();
                                       }
                                   }
                               }
                           },
                           group: {
                               field: "GroupField"
                           }
                       },
                       series: [{
                           type: "bubble",
                           xField: "MyXField",                        
                           yField: "MyYField",
                           sizeField: "MySizeField",
                           categoryField: "MyCategoryField"
                       }],
                       seriesColors: ['orange','dodgerblue','green','red', 'yellow', 'silver', 'cyan', 'magenta'],
                       xAxis: {
                           title: {
                               text: "My X data"
                           },
                           labels: {
                               format: "{0:N0}",
                               skip: 1,
                               rotation: 90
                                 
                           },
                           axisCrossingValue: -10000,
                           //majorUnit: 500,
                           plotBands: [{
                               from: -5000,
                               to: 0,
                               color: "#00f",
                               opacity: 0.05
                           }]
                       },
                       yAxis: {
                       title: {
                               text: "My X data"
                           },
                           labels: {
                               format: "{0:N0}"
                           },
                           line: {
                               width: 0
                           }
                       },
                       tooltip: {
                           visible: true,
                           opacity: 1,
                           template: "Data: #= category # (Other: #= dataItem.OtherData #): #= kendo.toString(value.size, 'N0') # clicks"
                       },
                       transitions: true
                   });
             
           }
Back to Top