Switch between Day, week, month view

[Ronald]

Is it possible to make a toggle button to switch between the day, week and month view in a bar chart? 

[Iliana Dyankova]

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

[Ronald]

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.

[Iliana Dyankova]

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