Problems formatting axis and category in DataViz Bar Chart using ASP.NET MVC wrappers

[Phil]

I've hit a DataViz formatting road block. Any help would be appreciated.

I've created a stacked bar chart with the following specs:
- using ASP.NET MVC DataViz controls
- My GetAllWeeklyResultsForSpecificYear is passing back an object of type IList that contains
-- int TotalResults
-- int NorthAmericaResults
-- int ItalyResults
-- int FranceResults
-- int Year
-- int Quarter
-- int Month
-- int Week
-- DateTime FirstMondayOfWeek

Stored in this list of objects is every week number, year number, and the first Monday of that week.

For example,
Week 1 might contain   Week = 1
                                    Year = 2013
                                    FirstMondayOfWeek = Dec 31, 2012
                                    
Week 2 might contain   Week = 2
                                    Year = 2013
                                    FirstMondayOfWeek = Jan 7, 2013

I would like the X axis to display the stacked bar chart based on the Week (this is the category). This currently works using the code below:

{code}

@using System.Globalization

@using Kendo.Mvc.UI

@using Kendo.Mvc.UI.Fluent

@using My.Dashboard.Results.Domain.Entities

@model My.Dashboard.Web.Models.GraphSettingsViewModel

<div id="weeklyResultsForSpecificYearChart-wrapper" style="width:100%">

    @(Html.Kendo().Chart<WeeklyResult>()

          .Name("WeeklyResultForSpecificYearChart")

          .Theme("MetroBlack")

          .Tooltip(new Action<ChartTooltipBuilder>(t => t.Visible(true).Template("#=value# #=series['name']# Results For week number #=category#")))

          .Title("Weekly Results for " + Model.Year.ToString(CultureInfo.InvariantCulture))

          .Legend(legend => legend.Position(ChartLegendPosition.Bottom))

          .DataSource(dataSource => dataSource.Read(read => read.Action("GetAllWeeklyResultsForSpecificYear", "Result", new { year = Model.Year })))

          .Series(series =>

          {

              series.Column(model => model.FranceResults).Name("France").Stack("All");

              series.Column(model => model.NorthAmericaResults).Name("North American").Stack("All");

              series.Column(model => model.ItalyResults).Name("Italy").Stack("All");

          })

          .CategoryAxis(axis => axis

          .Categories(model => model.Week)

          .Labels(labels => labels.Rotation(-90)))

          .CategoryAxis(axis => axis

          .Labels(model => model.Format("{0:0}"))))

</div>

1. I would like to display the X axis label as a formatted DateField for example "d" to display the date as "Jan 2". In order to do this, I need to get the property "FirstMondayOfWeek" and render it.  If I changed the code to the snippet below, it works, but the text is not legible and the bars that are drawn become spaced out by 5 or 6 additional lines. Basically instead of it grouping it by the week(ie: 52 weeks), it now groups it by the FirstMondayOfWeek (365 days), even thought there are only 52 data points. This is because the week number is stored as an integer and the FirstMondayOfWeek is stored as a DateTime object. Instead of it just basing it on the data points, it bases it on the day of the week.

.CategoryAxis(axis => axis.Categories(model => model.FirstMondayOfWeek)

.Labels(labels => labels.Rotation(-90)))

          .CategoryAxis(axis => axis

          .Labels(model => model.Format("dd"))))

The above snippet currently renders this:  FirstMondayOfWeek-Category-Displays-5-Days-Between-Data-Points.PNG


This snippet below renders: Week-Category-Displays-52-Weeks-Looks-Nicer.PNG

.CategoryAxis(axis => axis

              .Categories(model => model.Week)

              .Labels(labels => labels.Rotation(-90)))

          .CategoryAxis(axis => axis

                  .Labels(model => model.Format("{0:0}"))))

Is it possible to show the number of data points in "Week-Category-Displays-52-Weeks-Looks-Nicer.PNG" (ie: 52 data points instead of 365), but display the FirstMondayOfWeek as the X axis label and on the tooltip template?

2. I would like to be able to display the tool tip with a value from the FirstMondayOfWeek property.  Is it possible to extract the series values? The snipped below does not do this, but perhaps someone can let me know if it's feasible to do this and how to do it.

.Tooltip(new Action<ChartTooltipBuilder>(t => t.Visible(true).Template("#=value# #=series['name']# Results For #=FirstMondayOfWeek#")))

Thanks for you help!

[Iliana Nikolova]

Hello Phil,

Straight to your questions: 

1. Generally speaking, you can access the original data via the dataItem. Hence you can use a template for the categoryAxis's labels and display the FirstMondayOfWeek. For example: 

   .CategoryAxis(axis => axis
        .Categories(model => model.Week)
        .Labels(labels => labels.Rotation(-90).Template("#= dataItem.FirstMondayOfWeek #"))
   )

2. You can use the approach suggested in the previous point -  template for the tooltip:

   .Tooltip(tooltip => tooltip
       .Visible(true)
       .Template("#= dataItem.FirstMondayOfWeek # ")
   }

Regards,
Iliana Nikolova
the Telerik team

[Phil]

Thank you Iliana! That resolved the issue.

For question 1, I changed this to:

.Labels(labels => labels.Rotation(-35).Template(("#= kendo.toString(dataItem.FirstMondayOfWeek,'MMM d') #")))

This produced the result: question-1-resolved.png 


For question 2, I changed this to:

.Tooltip(tooltip => tooltip.Visible(true).Template("#=value# #=series['name']# Results for week beginning #= kendo.toString(dataItem.FirstMondayOfWeek, 'MMM. d, yyyy') #"))

Which displayed the date and formatted it nicely.