How to refresh Series

4 posts, 0 answers
  1. Michel
    Michel avatar
    44 posts
    Member since:
    Sep 2011

    Posted 21 Jul Link to this post

    I need to refresh my PieChart using calculation made in my controller using a DatePicker.

    Despite the update of the Viewbag used for the series in my controller, It seems that the series are not updated when refreshing the Chart.

    Any suggestions ?

    MyView :

    @(Html.Kendo().DatePicker()
              .Name("startDatepicker")
              .Value(DateTime.Now.ToShortDateString())
              .Events(e =>
              {
                e.Change("onStartDateChange");
              }))
    @(Html.Kendo().Chart()
          .Name("chartWorkDuration")
          .Title(title => title.Text("Working time - Total : " +
                                     ViewBag.TotalWorkDuration.ToString() + "h")
                                .Position(ChartTitlePosition.Bottom))
          .ChartArea(chart => chart.Background("transparent"))
          .Series(series => series.Pie(ViewBag.arWorkDuration)
                  .Padding(0)
          )
          .Tooltip(tooltip => tooltip
              .Visible(true)
              .Format("{0:N0}")
          )
    )
    <script>
      function onStartDateChange() {
        var startDate = $("#startDatepicker").data("kendoDatePicker").value().toDateString();
        $.ajax({
          url: 'PlanningGraph/RefreshGraph',
          cache:false,
          data: {
            startDate: startDate
          },
          success: function (xhr, textStatus) {
            $("#chartWorkDuration").data("kendoChart").refresh();
          }
        });
        });
      }
    </script>

    My Controller

    // Creation of my viewmodel elements
    ....
          var workDuration = graphElementViewModels.Select(w => new
            {
            category = w.strCategory,
            value = w.dblValue,
            color = w.strColor
            });
    ViewData["arWorkDuration"] = workDuration;

     

  2. Stefan
    Admin
    Stefan avatar
    1394 posts

    Posted 25 Jul Link to this post

    Hello Michel,

    Thank you for the provided code.

    The described result is expected because the refresh method will only redraw the Chart using the current data and it will not set a new one.

    In this scenario, I can suggest the two approaches. Using a Kendo UI DataSource for the Chart which will allow redrawing the data by calling the read method of the Chart. The other option will be to manually set the new data to the Chart series and then refresh it.

    More information for both implementations can be found in the following forum thread:

    http://www.telerik.com/forums/best-way-to-draw-chart-with-dynamically-changing-data

    http://demos.telerik.com/aspnet-mvc/pie-charts/remote-data-binding

    I hope that this will help to achieve the desired result.

    Regards,
    Stefan
    Progress Telerik
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Michel
    Michel avatar
    44 posts
    Member since:
    Sep 2011

    Posted 25 Jul in reply to Stefan Link to this post

    Hi Stefan,

    Thank you for your reply.

    I have modified my code using a ViewModel because I suspect that perhaps the use of the ViewBag could bring unexpected result.

    Here is my code but as you will notice I did not find a way to set the series with the color inside my ViewModel as KendoChart seem to accept only two parameters. So I have used the SeriesColors property instead to set the colors (not so useful that if color could be inside the ViewModel). Am I Right ?

    My View (including stuff to populate grandTotal in the title):

    ....
       @(Html.Kendo().DatePicker()
                  .Name("startDatepicker")
                  .Value(DateTime.Now.ToShortDateString())
                  .Events(e =>
                  {
                    e.Change("onStartDateChange");
                  }))
    ...
        @(Html.Kendo().Chart<GraphElementViewModel>()
                  .Name("chartWorkDuration")
                  .Title(title => title.Text("Workin time in hour")
                                        .Position(ChartTitlePosition.Bottom))
                  .ChartArea(chart => chart.Background("transparent"))
                .SeriesColors((String[])ViewData["arColor"])
                .DataSource(ds =>
                {
                  ds.Read(read => read.Action("GetWorkDuration", "PlanningGraph").Data("GetStartDate"));
                }
                )
                .Series(series => series.Pie(
                model => model.dblValue, model => model.strCategory)
                )
                .Tooltip(tooltip => tooltip
                    .Visible(true)
                                .Format("{0:N0}"))
              .Events(events => events.DataBound("onChartWorkDurationDataBound")
                )
        )
    <script>
      function GetStartDate() {
        var startDate = $("#startDatepicker").data("kendoDatePicker").value().toDateString();
        return { startDate: startDate };
      }
     
      function onStartDateChange() {
        $("#chartWorkDuration").data("kendoChart").dataSource.read();
      }
     
      function onChartWorkDurationDataBound(e) {
        var pieChart = $("#chartWorkDuration").data("kendoChart");
        var grandTotal = 0;
        var chartSeries = pieChart.options.series;
        for (var i = 0; i < chartSeries.length; i++) {
          var chartSeriesData = chartSeries[i].data;
          //Sum of values
          for (var j = 0; j < chartSeriesData.length; j++) {
            var currDataItem = chartSeriesData[j];
            grandTotal += currDataItem.dblValue;
          }
        }
        pieChart.options.title.text = "Working time in hour - Total : " + grandTotal.toString() + " h";
      }
    </script>

    My controller :

    ...
        public String[] arColorList = new String[]
          {
        "#00C0C0",
        "#009DC0",
        "#0080C0",
         };
     
    ...
     
        public IActionResult Index()
          {
          ViewData["arColor"] = arColorList;
          return View();
          }
    ...
        [HttpPost]
        public ActionResult GetWorkDuration(string startDate)
     
          {
    // Sample stuff - the running version read data from SQL server
          List<GraphElementViewModel> graphViewModels;
           GraphElementViewModel curGraphElementViewModel = new GraphElementViewModel();
           curGraphElementViewModel.strCategory = "Category 1";
           curGraphElementViewModel.dblValue = 30.0;
           graphViewModels.Add(curGraphElementViewModel);
           curGraphElementViewModel = new GraphElementViewModel();
           curGraphElementViewModel.strCategory = "Category 2";
           curGraphElementViewModel.dblValue = 30.0;
           graphViewModels.Add(curGraphElementViewModel);
           curGraphElementViewModel = new GraphElementViewModel();
           curGraphElementViewModel.strCategory = "Category 3";
           curGraphElementViewModel.dblValue = 40.0;
           graphViewModels.Add(curGraphElementViewModel);
          return Json(graphViewModels);
          }
    ...

    My View Model

    ...
      public class GraphElementViewModel
        {
        public string strCategory { get; set; }
        public double dblValue { get; set; }
     
        public GraphElementViewModel()
          {
          strCategory = "";
          dblValue = 0.0;
          }
        }

     

    Hope this code can also help other users.

    Regards.

     

     

     

  4. Stefan
    Admin
    Stefan avatar
    1394 posts

    Posted 27 Jul Link to this post

    Hello Michel,

    I'm glad to hear that the issue is resolved.

    Also, the color can be set from a field in the data using the colorField property of the Chart:

    http://docs.telerik.com/aspnet-mvc/api/Kendo.Mvc.UI.Fluent/ChartPieSeriesBuilder#methods-ColorField(System.String)

    Regards,
    Stefan
    Progress Telerik
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top