We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Rebind data in Column range chart

Hi Team,

Could you please here; I want to rebind the column range chart after successful ajax call.


Thanks

1 Reply

KC Kalaimathi Chellaiah Syncfusion Team December 4, 2018 10:54 AM

Hi Jsu, 
 
Greetings from Syncfusion. 
 
We have analyzed your requirement and we have created sample based on  that. In this sample initially we have created empty chart, then get the data from the controller to view page using ajax call in a button click event and bind to the chart. 
 
Code Snippet: 
chartController.cs 
//Getting data from this class 
public class ChartData 
        { 
         …. 
        } 
 
chartFeatures.cshtml: 
//Button click method 
function refreshChart() { 
        var chart = document.getElementById("container").ej2_instances[0]; 
        $.ajax({ 
            type: "GET", 
            url: "./GetChartData", 
            data: {}, 
            dataType: "json", 
            contentType: "application/json;charset=utf-8", 
            success: function (data) { 
                chart.series[0].type = "RangeColumn" 
                chart.series[0].dataSource = data; 
                chart.series[0].xName = "xValue"; 
                chart.series[0].low = "low"; 
                chart.series[0].high = "high"; 
                chart.refresh(); 
            }, 
            error: function (args) { 
                alert('error'); 
            } 
        }); 
    } 
 
Screenshot: 
Empty Chart: 
 
Chart with Data: 
 
 
Regards, 
kalai 
 


Loader.
Live Chat Icon For mobile
Up arrow icon