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

refresh chart data with daterangepicker

Dear all,

We want to change the chart data dynamic after change the date range at DateRangePicker

cshtml
@{
    ViewBag.Title = "Home Page";
}

<style>
    #wrapper {
        max-width: 246px;
        margin: 30px auto;
        padding-top: 50px;
    }
</style>

<div class="jumbotron">
    <h1>ASP.NET</h1>
</div>

<div class="row">
    <div class="col-md-6">
        <div class="col-lg-12 control-section">
            <div>
                <div id="wrapper">
                    @Html.EJS().DateRangePicker("daterange").Format("yyyy-MM-dd").Placeholder("Select a Range").MinDays(4).MaxDays(7).Width("300px").Change("onChange").Render()
                </div>
            </div>
            <div id="weeklyReport" class="row">
                @Html.Action("_CoreChart", "Home", new { frmDate = ViewBag.frmDate, toDate = ViewBag.toDate })
            </div>
        </div>
    </div>
</div>
<script>
    function onChange(args) {
        //to check whether change event is triggered becuase of apply button 
        if (args.event && args.event.target.classList.contains("e-apply")) {
               ?? how should we code for refresh chart value??
        }
    } 
</script>

controller:
        public ActionResult Index()
        {
            ViewBag.frmDate = "2018-09-02";
            ViewBag.toDate = "2018-09-08";

            return View();
        }

        public ActionResult _CoreChart(string frmDate, string toDate)
        {
            ViewBag.frmDate = frmDate;

            #region Bar Chart Source
            List<chartData> bc = new List<chartData>();
            var SerieData = pd.getPedestrainInRangeList(frmDate, toDate);

            bc.Add(new chartData { serieData = SerieData.Where(x => x.CatName == "IN").OrderBy(x=>x.xValue).ToList(), SerieName = "IN", SerieColor = "BLUE" });
            bc.Add(new chartData { serieData = SerieData.Where(x => x.CatName == "OUT").OrderBy(x => x.xValue).ToList(), SerieName = "OUT", SerieColor = "YELLOW" });
            bc.Add(new chartData { serieData = SerieData.Where(x => x.CatName == "TOTAL").OrderBy(x => x.xValue).ToList(), SerieName = "TOTAL", SerieColor = "GREEN" });
            ViewBag.chartData = bc;
            ViewBag.chartTitle = "Weekly Analysis";
            #endregion


            return PartialView();
        }


How could we capture the DateRangePicker value and refresh the chart data ? Please advance & thx.

KennethT

7 Replies

DD Dharanidharan Dharmasivam Syncfusion Team December 14, 2018 06:02 AM

Hi Kenneth, 
 
We have analyzed your query with attached code snippet. We have created sample with your requirement. We have rendered chart initially in partial view and refreshed the chart data based on the filter from date range picker of start and end date value in change event. Find the code snippet to achieve this requirement. 
 
//Date range picker change event 
var Change = function(args) { 
        if (args.event && args.event.target.classList.contains("e-apply")) { 
            if ((document.getElementById('container').childNodes.length > 1)) { 
                Getting instance of chart 
                var chart = document.getElementById('container').ej2_instances[0]; 
                Get filtered data based on start and end values 
                var filterData = chartData.filter(function (data) { 
                    return (data['x'].getTime() >= (args.startDate) && data['x'].getTime() <= (args.endDate)); 
                }); 
                 Bind data to chart and refresh 
                 chart.series[0].dataSource = filterData; 
                 chart.refresh(); 
            } 
        } 
    } 
 
Screenshot: 
 
 
Regards, 
Dharani. 



KT Kenneth Tang December 14, 2018 11:04 AM

Dear Dharani,

Thank for info. But we can't run your sample because there are missing controller file. PLease advance & thx.

KennethT 


DD Dharanidharan Dharmasivam Syncfusion Team December 17, 2018 02:00 AM

Hi Kenneth, 
 
We would like to let you know that, in our previous sample we have initialized the ajax request in Index.cshtml page and rendered the chart in partial view page (_CoreChart.cshtml). So, we have removed the unwanted files as well as dlls. Now based on your request we have shared the runnable sample, rendered chart as said above. The sample can be found below. 
 
Thanks, 
Dharani. 



KT Kenneth Tang December 23, 2018 07:22 AM

Dear Dharani,

Thank for the example link.

We have changed the onchange event as follow:

    var onChange = function(args) {
        if (args.event && args.event.target.classList.contains("e-apply")) {
            var chart = document.getElementById('InOutWeekly').ej2_instances[0];
            var startDate = new Date(args.startDate.getTime() - (args.startDate.getTimezoneOffset() * 60000)).toISOString().split("T")[0];
            var endDate = new Date(args.endDate.getTime() - (args.endDate.getTimezoneOffset() * 60000)).toISOString().split("T")[0];
            var ajax = new ej.base.Ajax("/Home/_InOutBarWeekly?frmDate=" + startDate + "&toDate=" + endDate, "POST", true); // call API
                 ajax.onSuccess = function (value) {
                     val = value;
                     chart.refresh()
                 };
            ajax.send();
        }
    }

with controllor :

        public ActionResult _InOutBarWeekly(string frmDate, string toDate)
        {
            ViewBag.frmDate = frmDate;

            #region Bar Chart Source
            List<chartData> bc = new List<chartData>();
            var SerieData = pd.getPedestrainInRangeList(frmDate, toDate);

            bc.Add(new chartData { serieData = SerieData.Where(x => x.CatName == "IN").OrderBy(x=>x.xValue).ToList(), SerieName = "IN", SerieColor = "BLUE" });
            bc.Add(new chartData { serieData = SerieData.Where(x => x.CatName == "OUT").OrderBy(x => x.xValue).ToList(), SerieName = "OUT", SerieColor = "YELLOW" });
            bc.Add(new chartData { serieData = SerieData.Where(x => x.CatName == "TOTAL").OrderBy(x => x.xValue).ToList(), SerieName = "TOTAL", SerieColor = "GREEN" });
            ViewBag.chartData = bc;
            ViewBag.chartTitle = "Weekly Analysis";
            #endregion
            return PartialView();
        }

It seem the chart has been refreshed but all chart data still unchange. Please advance, thx.

KennethT


DD Dharanidharan Dharmasivam Syncfusion Team December 24, 2018 05:45 AM

Hi Kenneth, 
 
 
Thanks for the information. 
 
We have analyzed your query with the shared code example. Form your code we found that, you have refreshed the chart without binding the data. Therefore, chart gets refreshed without updating the data. We have created sample based on your requirement. In this sample we have bind to the chart data source in two ways.  
 
First, we passed the data to partial view from the controller through ajax request and this request will be send when date range picker’s value is changed. In the below code snippet, we have refreshed the chart with the arguments returned from partial view. 
 
Code snippet: 
Index.cshtml 
//chart data bind dynamically through on ajax call in partial view 
var Change = function(args) { 
        if (args.event && args.event.target.classList.contains("e-apply")) { 
                var chart = document.getElementById('container').ej2_instances[0]; 
                var startDate =args.startDate; 
                var endDate = args.endDate; 
                var ajax = new ej.base.Ajax("/Home/_CoreChart?frmDate=" + startDate + "&toDate=" + endDate, "POST", true);                ajax.onSuccess = function (value) { 
                    $('#refreshContainer').html(value); 
                }; 
                ajax.send(); 
            } 
            } 
            
 
Next, we have created Json data in controller page then assign that data into the chart data source in index page through ajax call. Get the data from ajax arguments then parse the data and assign the values to the dataSource property and then refresh the chart. 
 
Index.cshtml 
  var Change = function(args) { 
        if (args.event && args.event.target.classList.contains("e-apply")) { 
                var chart = document.getElementById('container').ej2_instances[0]; 
                var startDate =args.startDate; 
            var endDate = args.endDate; 
            //second way 
            var ajax = new ej.base.Ajax("/Home/GetChartData?frmDate=" + startDate + "&toDate=" + endDate, "POST", true);  
            ajax.onSuccess = function (value) { 
                //Bind the data to chart and then refresh 
                chart.series[0].dataSource =JSON.parse(value); 
                chart.refresh(); 
                }; 
               ajax.send(); 
            } 
            } 
 
You can modify the code based on your requirement. Sample for reference can be found below. http://www.syncfusion.com/downloads/support/directtrac/general/ze/DATERANGE-74771128.zip 
 
 
Regards, 
Dharani. 



MA Muhamad Adam Fakhrullah Nik Mohamad August 26, 2020 10:41 PM

Hi, can I know how to change date time format args.startDate? Thank you


SM Srihari Muthukaruppan Syncfusion Team August 30, 2020 02:13 PM

Hi Muhamad, 
 
We have analysed your query. From that, we would like to let you know that we can change the format of the label by using the “labelFormat” property in the chart which results in changing the format of args.startDate. We have also prepared a sample and also attached the documentation link of labelFormat for your reference. Please find the below sample, code snippet, and screenshot. 
  
 
 
Code Snippet: 

 
// add your additional code here 
Html.EJS().Chart("container").Width("100%").LegendSettings(le => le.Visible(false)) 
                       .PrimaryXAxis(px => px.LabelFormat("d-M-y")) 
                       .PrimaryYAxis(py => py.Title("Server Load")). 
                       // add your additional code here 
                      .Render() 
 
// add your additional code here  
  
  
Screenshot: 
 
  
If stillthis is not your exact requirement. kindly revert us with more information which will be helpful for further analysis and provide you solution sooner. 
  
Regards,
Srihari 


Loader.
Live Chat Icon For mobile
Up arrow icon