Switch between Day, week, month view

4 posts, 1 answers
  1. Ronald
    Ronald avatar
    2 posts
    Member since:
    Mar 2016

    Posted 05 Apr Link to this post

    Is it possible to make a toggle button to switch between the day, week and month view in a bar chart? 
  2. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2595 posts

    Posted 07 Apr Link to this post

    Hi Ronald,

    To achieve this you should change the categoryAxis baseUnit. For working example check the following online demo:

    http://demos.telerik.com/aspnet-mvc/bar-charts/date-axis

    Regards,
    Iliana Nikolova
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Ronald
    Ronald avatar
    2 posts
    Member since:
    Mar 2016

    Posted 07 Apr in reply to Iliana Nikolova Link to this post

    Thank you for your reply.

    I like to make my question a little more specific.

    I am using a ViewModel as data in the Bar Chart. In the model I have three series: A, B and C. A and B must be summarized and C is a different stack.

    The HTML looks like this:

     @(Html.Kendo().Chart()
              .Name("chart_Inzet")
              .Title("Inzet")
              .Legend(legend => legend.Position(ChartLegendPosition.Bottom)
              )
              .SeriesDefaults(seriesDefaults => seriesDefaults.Bar().Stack(true))
              .ChartArea(chartArea => chartArea.Background("transparent")
              )
              .HtmlAttributes(new {style = grafiekStyle})
              .Series(series =>
              {
                  series.Column(Model.InzetIntern).Stack("1").Name("Inzet intern").Color("#ff6200");
                  series.Column(Model.InzetEntern).Stack("1").Name("Inzet extern").Color("#A8A8A8");
                  series.Column(Model.NietBeschikbaar).Stack("2").Name("Beschikbaar").Color("#AB0066");
              })

              .CategoryAxis(axis => axis
                  .Date()
                  .Name("label-axis")
                  //.Categories(Model.Categories)
              )
              .ValueAxis(axis => axis
                  .Numeric()
                  .Labels(labels => labels.Format("{0}"))

                  // Move the label-axis all the way down the value axis
                  .AxisCrossingValue(0, int.MinValue)
              )
              .Tooltip(tooltip => tooltip
                  .Visible(true)
                  .Template("#= value # uur, #= series.name #")
              )
              )

    The model like this:

        public class PlanningGraphicsModel
        {
            public List<GrafiekModel> InzetIntern { get; set; }
            public List<GrafiekModel> InzetEntern { get; set; }
            public List<GrafiekModel> NietBeschikbaar { get; set; }
            public string Styling { get; set; }
        }
        public class GrafiekModel
        {
            public DateTime Datum { get; set; }
            public int Totaal { get; set; }
        }

    How to create the Kendo script to make this situation work as mentioned in the earlier post?

     

    Regards,

    Ronald.

  5. Answer
    Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2595 posts

    Posted 11 Apr Link to this post

    Hi Ronald,

    Using the same syntax like in the online demo should help to achieve the expected outcome. As an example: 
    // get a reference to the chart widget
    var chart = $("#chart_Inzet").data("kendoChart");
    // get the chart categoryAxis
    var categoryAxis = chart.options.categoryAxis;
    // set new baseUnit
    categoryAxis.baseUnit = "days"
    // refresh the chart
    chart.refresh();
    On a side note, I observed that you have not set the Datum field - when using date series you should define series categoryExpression (like in the online demo).

    Regards,
    Iliana Nikolova
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top
UI for ASP.NET MVC is VS 2017 Ready