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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

refresh chart data with daterangepicker

Thread ID:

Created:

Updated:

Platform:

Replies:

141492 Dec 14,2018 04:05 AM UTC Aug 30,2020 06:13 PM UTC ASP.NET MVC - EJ 2 7
loading
Tags: Chart
Kenneth Tang
Asked On December 14, 2018 04:05 AM UTC

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 [Syncfusion]
Replied On December 14, 2018 11:02 AM UTC

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. 


Kenneth Tang
Replied On December 14, 2018 04:04 PM UTC

Dear Dharani,

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

KennethT 

Dharanidharan Dharmasivam [Syncfusion]
Replied On December 17, 2018 07:00 AM UTC

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. 


Kenneth Tang
Replied On December 23, 2018 12:22 PM UTC

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 [Syncfusion]
Replied On December 24, 2018 10:45 AM UTC

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
Replied On August 27, 2020 02:41 AM UTC

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

Srihari Muthukaruppan [Syncfusion]
Replied On August 30, 2020 06:13 PM UTC

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 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon