Bind Pie Chart Series Item from JSON

0 Answers 57 Views
Ajax Chart (HTML5) Chart (Obsolete)
Anuj
Top achievements
Rank 1
Anuj asked on 15 Sep 2023, 09:17 AM

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.


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();

No answers yet. Maybe you can help?

Tags
Ajax Chart (HTML5) Chart (Obsolete)
Asked by
Anuj
Top achievements
Rank 1
Share this question
or