2 Answers, 1 is accepted
0
Hi Chung,
Hristo Germanov
the Telerik team
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
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 }); }