I am able to bind pie chart data from code behind but I am not sure how to bind my Javascript object to Pie chart.
I am using ASP.NET Web Form and using AJAX to call Handler. I need to bind data after handler returns data.
Rumen
Telerik team
commented on 19 Sep 2023, 07:53 AM
Hi Anuj,
You can take advantage of the client-side data-binding and set_dataSource() method to bind the RadHtmlChart demonstrated in the Client-side Binding demo.
Here is an example:
You are probably using jQuery $.ajax() method or another AJAX method to call your handler and get the data.
Once you've obtained the data from the handler, use the set_dataSource() method of RadHtmlChart to bind the new data.
functionbindChartData() {
// Make AJAX call to your handler
$.ajax({
type: 'GET', // or 'POST' depending on your handlerurl: 'YourHandlerURL.ashx', // Replace with your handler's URLdataType: 'json',
success: function (data) {
bindToChart(data);
},
error: function (error) {
console.log("Error fetching data from handler:", error);
}
});
}
functionbindToChart(data) {
// Assume 'chart' is the RadHtmlChart's client-side instance. // If not, you'll need to get it. You can use $find('RadHtmlChartClientID') to get it.var chart = $find('RadHtmlChartClientID'); // Replace 'RadHtmlChartClientID' with your actual chart's ClientID// Set the new data source to the RadHtmlChart
chart.set_dataSource(data);
// Repaint the RadHtmlChart to apply the changes
chart.repaint();
}
// Call the function to bind data when needed
bindChartData();
Hi Anuj,
You can take advantage of the client-side data-binding and set_dataSource() method to bind the RadHtmlChart demonstrated in the Client-side Binding demo.
Here is an example:
You are probably using jQuery $.ajax() method or another AJAX method to call your handler and get the data.Once you've obtained the data from the handler, use the set_dataSource() method of RadHtmlChart to bind the new data.
function bindChartData() { // Make AJAX call to your handler $.ajax({ type: 'GET', // or 'POST' depending on your handler url: 'YourHandlerURL.ashx', // Replace with your handler's URL dataType: 'json', success: function (data) { bindToChart(data); }, error: function (error) { console.log("Error fetching data from handler:", error); } }); } function bindToChart(data) { // Assume 'chart' is the RadHtmlChart's client-side instance. // If not, you'll need to get it. You can use $find('RadHtmlChartClientID') to get it. var chart = $find('RadHtmlChartClientID'); // Replace 'RadHtmlChartClientID' with your actual chart's ClientID // Set the new data source to the RadHtmlChart chart.set_dataSource(data); // Repaint the RadHtmlChart to apply the changes chart.repaint(); } // Call the function to bind data when needed bindChartData();