Rebind data in Column range chart

[jsu]

Hi Team,

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

Thanks

[Kalaimathi Chellaiah]

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: 

 

Sample:  http://www.syncfusion.com/downloads/support/directtrac/general/ze/rangecolumndatabind2125533885.zip 

 

Regards, 

kalai