refresh chart data with daterangepicker

[Kenneth Tang]

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

[Dharanidharan Dharmasivam]

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: 

 

Sample: http://www.syncfusion.com/downloads/support/directtrac/general/ze/dateRangePicker-1036810902.zip 

 

Regards, 

Dharani. 

[Kenneth Tang]

Dear Dharani,

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

KennethT 

[Dharanidharan Dharmasivam]

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. 

http://www.syncfusion.com/downloads/support/forum/141492/ze/DATERANGE1078243056  

 

Thanks, 

Dharani. 

[Kenneth Tang]

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

[Dharanidharan Dharmasivam]

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. 

[Muhamad Adam Fakhrullah Nik Mohamad]

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

[Srihari Muthukaruppan]

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. 

  

Sample:  https://www.syncfusion.com/downloads/support/directtrac/general/ze/DateTimeAxisLabelFormat-1222110771.zip 

 

UG Link: https://ej2.syncfusion.com/aspnetmvc/documentation/chart/date-time-axis/#label-format 

 

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 still, this 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