Tooltip template using dataItem not always working

[Dirk]

Hi,

a tooltip template of a stacked chart area, that uses dataItem of series (data from JSON dataSource) works as long as you use fixed string category values. If you use data of the datasource (see below) as values for category axis you in tooltip can only access the value of the dataItem the mouse pointer is in/over.

Here's the code (tooltip template not correctly working). Data for category '(model => model.TS)' is of type DateTime (01/012013, 01/02/2013...):

series

.Series(series =>
              {
                  series.Area(data => data.CL).Stack(true).Name("Gespräche verpasst");
                  series.Area(data => data.CO).Stack(true).Name("Gespräche gehend");
                  series.Area(data => data.CI).Stack(true).Name("Gespräche kommend");
              })

category axis

          .CategoryAxis(axis => axis
                                    .Categories(model => model.TS)
                                    .Labels(builder => builder
                                                           .Format(Model.CategoryAxisLabelFormat)
                                                           // TODO calculate step
                                                           .Step(Model.CategoryAxisStep)
                                                           .Rotation(-90))
                                    .Line(line => line.Visible(true))
                                    .MajorGridLines(lines => lines.Visible(false))

tooltip template

.Tooltip(tooltip => tooltip
                                  .Visible(true)
                                  .Template("Zeitpunkt : #= kendo.format('{0:dd.MM.yyyy}', category) #<br/><br/>Gespräche kommend : #= dataItem.CI # <br/>Gespräche gehend : #= dataItem.CO #<br/>Gespräch verpasst : #= dataItem.CL #" + "<br/><br/>Summe : #= dataItem.CI + dataItem.CO + dataItem.CL #")

If you replace '  .Categories(model => model.TS)' with '{ "01/01/2013", "01/02/2013", "01/03/2013" etc }' all values od dataItems are correctly shown in tooltip.
What causes this behaviour?

Thanks for your support
Dirk

[Hristo Germanov]

Hello Dirk,

Please accept my apology for the delay.

I think that you may hit a bug. Could you please give me a sample project that reproduce the issue and I will be able to give you a quick solution for the problems that you have? Thank you for the understanding.

Regards,
Hristo Germanov
Telerik

[Dirk]

Hi Hristo,

Sorry I don't have a demo project, but the behaviour can be reproduced by a simple asp.net mvc project.
Here's an example based on telerik chart demo, which can be found here: http://demos.kendoui.com/dataviz/area-charts/index.html.

First modification is to use a datasource for the values to have a dataItem object for each series at all.

After that chart tooltip template is working fine, as long as the category values are provided in chart definition (.Categories("2002", "2003", "2004", "2005", "2006", "2007", "2008", "2009", "2010", "2011"))
Replacing the categories with   .Categories( model=>model.Year) loading the category values from datasource too, the values of the dataItems are not properly shown in tooltip.

Here's the code:
DTO class:
public class ElectricityData
    {
        public DateTime Year { get; set; }
        public double India { get; set; }
        public double World { get; set; }
        public double Haiti { get; set; }
    }
Controller action method:
public ActionResult GetChartData()
        {
            var chartData = new List<ElectricityData>();
            chartData.Add(new ElectricityData() { Year= DateTime.Parse("01/01/2002"), India = 3.907, World = 1.988, Haiti = -0.253 });
            chartData.Add(new ElectricityData() { Year= DateTime.Parse("01/01/2003"), India = 7.943, World = 3.994, Haiti = 0.362 });
            chartData.Add(new ElectricityData() { Year= DateTime.Parse("01/01/2004"),India = 7.848, World = 3.994, Haiti = -3.519 });
            chartData.Add(new ElectricityData() { Year= DateTime.Parse("01/01/2005"),India = 9.284, World = 3.464, Haiti = 1.799 });
            chartData.Add(new ElectricityData() { Year= DateTime.Parse("01/01/2006"),India = 9.263, World = 4.001, Haiti = 2.252 });
            chartData.Add(new ElectricityData() { Year= DateTime.Parse("01/01/2007"),India = 9.801, World = 3.939, Haiti = 3.343 });
            chartData.Add(new ElectricityData() { Year= DateTime.Parse("01/01/2008"),India = 3.890, World = 1.333, Haiti = 0.843 });
            chartData.Add(new ElectricityData() { Year= DateTime.Parse("01/01/2009"),India = 8.238, World = -2.245, Haiti = 2.877 });
            chartData.Add(new ElectricityData() { Year= DateTime.Parse("01/01/2010"),India = 9.552, World = 4.339, Haiti = -5.416 });
            chartData.Add(new ElectricityData() { Year= DateTime.Parse("01/01/2011"),India = 6.855, World = 2.727, Haiti = 5.590 });

            return Json(chartData);
        }
View:
<div class="chart-wrapper">
    
    @(Html.Kendo().Chart<ElectricityData >()
          .Name("Test")
          .Theme("bootstrap")
          .DataSource(dataSource => dataSource
                                        .ServerOperation(true)
                                        .Read(read => read.Action("GetChartData", "Home"))
          )
          .Title(Model.ChartTitle)
          .Legend(legend => legend
                                .Position(ChartLegendPosition.Bottom)
          )
          .ChartArea(chartArea => chartArea
                                      .Background("transparent")
          )
        
          .Series(series =>
              {

                  series.Area(data => data.India).Stack(true).Name("India");
                  series.Area(data => data.World).Stack(true).Name("World");
                  series.Area(data => data.Haiti).Stack(true).Name("Haiti");
              })
          .CategoryAxis(axis => axis
            .Categories( model=>model.Year)
            // replace with the following line to work properly
            //.Categories("2002", "2003", "2004", "2005", "2006", "2007", "2008", "2009", "2010", "2011")
            .MajorGridLines(lines => lines.Visible(false))
          
          )
          .ValueAxis(axis => axis
                                 .Numeric()
                                 .Labels(labels => labels.Format("{0}"))
                                 .AxisCrossingValue(-10)
                                 .Line(line => line.Visible(false)
                                 )
                  .Title("Anzahl")
                          
            
          )

          .Tooltip(tooltip => tooltip
              .Visible(true)
                                  .Format("{0}")
                                  .Template("India : #= dataItem.India # <br/>World : #= dataItem.World #<br/>Haiti : #= dataItem.Haiti #" +
                                            "<br/><br/>Summe : #= dataItem.Haiti + dataItem.World + dataItem.India #")
          )
          )
</div>

If i missed something important, please tell me.

Thanks in advance
Dirk

[T. Tsonev]

Hi,

Thank you for taking the time to help us with reproducing the issue.

The problem is caused by the automatic date grouping that is enabled for date series.
The data items for each category (year) are aggregated into a single value. Additional fields are discarded.
The tooltip should still allow for accessing the original data items and we'll look into this.

If you only have one point per year, as in the demo, then you can turn off the automatic aggregation by binding the category axis to a string field:
    .Categories(model => model.YearString)

    public class ElectricityData
    {
        // ...
        public string YearString {
            get {
                return Year.ToString("yyyy");
            }
        }
    }

If this is not the case we can use custom aggregate function. I'll elaborate if you need this.

Apologies for the caused inconvenience.

Regards,
T. Tsonev
Telerik

[Dirk]

Hi,

the workaround using strings instead of dates works even if you're working with 'normal' dates (not only years).
The only con is, that I have to do a lot of casting with providing formats (german oder englisch etc.) to get a date from the string values, e.g. get the name of a weekday.

So if you find a final solution to the problem, please let me know.

Thanks for the extraordinary support
Dirk

[T. Tsonev]

Hello,

I've noticed that we already expose type: "category" override in the MVC wrappers. Better late than never they say.
This disables date grouping and will remove the need for casting your data:

.CategoryAxis(axis => axis
    .Type(ChartCategoryAxisType.Category)
    // ...
)

I hope this helps.

Regards,
T. Tsonev
Telerik

[Dirk]

Hello,

I think the Type property is not exposed by the MVC wrapper (Version 2013.2.716).
I can't set it the way you describe, because there is no 'Type' property on CategoryAxis.
There may be a HTML attribute for it but on the MVC wrapper the only thing I found was the following, which does not work:

.CategoryAxis(axis => axis
                                    .Categories(model => model.T)
                                    .Labels(builder => builder
                                                           .Format(Model.CategoryAxisLabelFormat)
                                                           .Rotation(-90))
                                    .Line(line => line.Visible(true))
                                    .MajorGridLines(lines => lines.Visible(false))
                                    .Justify(true)
          )
.CategoryAxis(axis => axis.Axis.Type = ChartCategoryAxisType.Category)  // has to be separated from the above

Did I miss something?

TIA
Dirk

[T. Tsonev]

Hello,

The following syntax seems to work for me:

.CategoryAxis(axis => axis
  .Categories(model => model.T)
  .Labels(builder => builder
       .Format(Model.CategoryAxisLabelFormat)
       .Rotation(-90))
  .Line(line => line.Visible(true))
  .MajorGridLines(lines => lines.Visible(false))
  .Justify(true)
  .Type(ChartCategoryAxisType.Category)
)

I only substituted the model value for a hard-coded string.

Regards,
T. Tsonev
Telerik

[Dirk]

Hello,

I tried a lot, but I did not get these 'type' method.
It is not listed in IntelliSense.
If I use it on any of my charts the way you describe i get an appropriate exception at runtime...

My kendo ui version is, as already stated, 2013.2.716
I've found the 'Type' method in API Reference: http://docs.kendoui.com/api/wrappers/aspnet-mvc/Kendo.Mvc.UI.Fluent/ChartCategoryAxisBuilder

Is there anybody else who can't use this method???

Here's an example of code I'm using:

@(Html.Kendo().Chart<AverageCountsFromComPerGroupDto>()
        .Name("AverageCountPerWeek")
        .Theme(Model.ChartTheme)
        .Events(builder => builder.DataBound("fixValueAxisMaxOfAverageCountPerWeek"))
        .DataSource(dataSource => dataSource
                                    .ServerOperation(true)
                                    .Read(read => read.Action("GetAverageCountsPerWeek", "GroupAverage", new {groupID = Model.GroupID, startDate = Model.StartDate, endDate = Model.EndDate, granularity = TimeGranularity.Week }))
        )
        .Title(builder => builder
                            .Text(Model.ChartTitle)
                            .Font("18px Arial, Helvetica,sans-serif")
                            .Align(ChartTextAlignment.Center)
                            .Position(ChartTitlePosition.Top))
        .Legend(legend => legend.Position(ChartLegendPosition.Bottom))
        .ChartArea(chartArea => chartArea.Background("transparent"))
        .Series(series =>
            {
                series.Column(data => data.CL).Stack(true).Name("Gespräche verpasst").Opacity(0.7).Overlay(ChartBarSeriesOverlay.Glass);
                series.Column(data => data.CI).Stack(true).Name("Gespräche kommend").Opacity(0.7).Overlay(ChartBarSeriesOverlay.Glass);
                series.Column(data => data.CO).Stack(true).Name("Gespräche gehend").Opacity(0.7).Overlay(ChartBarSeriesOverlay.Glass);
            })
        .CategoryAxis(axis => axis
                                .Categories(Model.Categories)
                                .Labels(builder => builder
                                                        .Format(Model.CategoryAxisLabelFormat)
                                                        .Rotation(0))
                                .Line(line => line.Visible(false))
                                .MajorGridLines(lines => lines.Visible(false))
        )
        .ValueAxis(axis => axis
                                .Numeric()
                                .Labels(labels => labels.Format("{0}"))
                                .AxisCrossingValue(0)
                                .Line(line => line.Visible(false))
        )
        .Tooltip(tooltip => tooltip
                                .Visible(true)
                                .Opacity(Model.TooltipOpacity )
                                .Color(Model.TooltipForeColor )
                                .Background(Model.TooltipBackroundColor)
                                .Template("Durchschnitt<br/>#= kendo.format('{0:dd.MM.yyyy}', category) #<br/><br/>Gespräche kommend : #= kendo.toString(dataItem.CI, 'N0', 'de-DE') #<br/>" +
                                        "Gespräche gehend : #= kendo.toString(dataItem.CO , 'N0', 'de-DE')#<br/>Gespräche verpasst : #= kendo.toString(dataItem.CL, 'N0', 'de-DE') #" +
                                        "<br/><br/>Summe : #= kendo.toString(dataItem.CI + dataItem.CO + dataItem.CL, 'N0', 'de-DE') #")

        )

Thanks in advance
Dirk

[T. Tsonev]

Hi,

The Type property was introduced in later versions (2013.2.720+), please upgrade to SP1 (2013.2.918).

Apologies for not noticing what version you're using.

Regards,
T. Tsonev
Telerik