This is a migrated thread and some comments may be shown as answers.

chart rebind

2 Answers 135 Views
Charts
This is a migrated thread and some comments may be shown as answers.
Chung
Top achievements
Rank 1
Chung asked on 18 Sep 2012, 11:02 PM
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 Answers, 1 is accepted

Sort by
0
Hristo Germanov
Telerik team
answered on 19 Sep 2012, 07:36 AM
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!
0
Spartan IV
Top achievements
Rank 1
answered on 19 Sep 2012, 06:31 PM
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
               });
         
       }
Tags
Charts
Asked by
Chung
Top achievements
Rank 1
Answers by
Hristo Germanov
Telerik team
Spartan IV
Top achievements
Rank 1
Share this question
or