Show multiple series value in a CategoryAxis CrossHair Tooltip.

[Benoit]

Hi,
 I've been able to create a chart that fits my need except for one requirement which is to show all the series value in a single tooltip (CategoryAxis CrossHairToolTip).

I have 4 series (Weight1, Time1, Weight2, Time2) and 1 category (Period). By default i can easily show the CategoryAxis value in the CategoryAxis CrossHair Tooltip, but what i want to do is show the value of Weight1, Time1, Weight2 and Time2 in that tooltip. 

Here is the code that show the Category value. and in comment what i would like to show instead.

Thanks in advance for your help.

<%: Html.Kendo().Chart<Data.DonneeChart>()
        .Name("chart")
        .Title("Multiple Series Chart")
        .DataSource(dataSource => dataSource
                    .Read(read => read.Action("Charts_Data", "Home")).ServerOperation(false)
        )
        .Series(series => {
            series.Line(model => model.Weight1)
                  .Color("#ff1a1c")
                  .Name("Weight1")
                  .Axis("weight");
            series.Line(model => model.Time1)
                  .Color("#ff0e00")
                  .Name("Time1")
                  .Axis("time");
            series.Line(model => model.Weight2)
                  .Color("#73e100")
                  .Name("Weight2")
                  .Axis("weight");
            series.Bar(model => model.Time2)
                  .Color("#007aff")
                  .Name("Time2")
                  .Axis("time");
        })
        .CategoryAxis(axis => axis
            .Categories(model => model.Period)
            .AxisCrossingValue(0,9999,9999)
            .Justify(true)
            .Crosshair(crosshair => crosshair
                .Visible(true)
                .Tooltip(tooltip => tooltip
                        .Visible(true)
                        .Template("Category : #= value #") // Here i would like to show the value of Weight1,Time1,Weight2,Time2 instead of Period value !!!
                        .Format("{0:n1}")
                        ))
        )
                .ValueAxis(axis => axis
                   .Numeric("weight")
                   .Min(0)
                   .Title("(Kg)")
                   .Max(8000)
               )
               .ValueAxis(axis => axis
                   .Numeric("weight")
                   .Color("#ffae00")
                   .Min(0)
                   .Max(35)
               )
               .ValueAxis(axis => axis
                   .Numeric("weight")
                   .Color("#007eff")
                   .Min(0)
                   .Max(1.1)
               )
               .Tooltip(tooltip => tooltip
                   .Visible(false)
               )
%>

[Hristo Germanov]

Hello Benoit,

In your case you need to set dataItem.something in the template.
dataItem - the original data item used to construct the point. Will be null if binding to array.

Kind regards,
Hristo Germanov
the Telerik team

[Benoit]

I had already tried to do this :

.CategoryAxis(axis => axis
           .Categories(model => model.Period)
           .AxisCrossingValue(0,9999,9999)
           .Justify(true)
           .Crosshair(crosshair => crosshair
               .Visible(true)
               .Tooltip(tooltip => tooltip
                       .Visible(true)
                       .Template("Weight1 : #= dataItem.Weight1 #") // Here i would like to show the value of Weight1,Time1,Weight2,Time2 instead of Period value
                       .Format("{0:n1}")
                       ))
       )

But i always get the following javascript error :

ReferenceError: dataItem is not defined [http://localhost:53259/Home/Charts:2]

Am i missing something ?

Thanks a lot for your quick response

[Benoit]

Can you explain the following i am not sure what you mean by : "Will be null if binding to array". 

To give you more info the data passed to the chart by the controller is passed that way : 

public ActionResult Charts_Data([DataSourceRequest] DataSourceRequest request)
        {
            return Json(data.GetChartData());
        }

And the data returned by GetChartData is a List<DonneeChart> 

DonneeChart :

public class DonneeChart
 {
     public Double Weight1{ get; set; }

     public Double Time1{ get; set; }

     public Double Weight2 { get; set; }

     public Double Time2{ get; set; }

     public DateTime Period { get; set; }
     public DonneeChart()
     {
     }
 }

So for each Category (Period) There is a value for Weight1, Time1, Weight2, Time2 which i want to show in the tooltip.

[Hristo Germanov]

Hi Benoit,

Please accept my apologize, I didn't understand you in your previous post.

You can't use dataItem in the template of the crosshair tooltip because the it know only for the categories of the categoryAxis in your case.
I think that you need shared tooltip. Can you try it?

Kind regards,
Hristo Germanov
the Telerik team

[Benoit]

I've been able to achieve the result i wanted except that i would have prefered the tooltip to be the CategoryAxis CrossHair Tooltip instead of the series tooltip. But still it respect the requirement i had.

So thanks a lot for the precision.

Here is the corrected code that works :

<%: Html.Kendo().Chart<Data.DonneeChart>()
        .Name("chart") // The name of the chart is mandatory. It specifies the "id" attribute of the widget.
        .Title("Multiple Series Chart")
        .DataSource(dataSource => dataSource
                    .Read(read => read.Action("Charts_Data", "Home")).ServerOperation(false) // Specify the action method and controller name
        )
        .Series(series => {
            series.Line(model => model.Weight1)
                  .Color("#ff1a1c")
                  .Name("Weight1")
                  .Axis("weight");
            series.Line(model => model.Time1)
                  .Color("#ff0e00")
                  .Name("Time1")
                  .Axis("time");
            series.Line(model => model.Weight2)
                  .Color("#73e100")
                  .Name("Weight2")
                  .Axis("weight");
            series.Bar(model => model.Time2)
                  .Color("#007aff")
                  .Name("Time2")
                  .Axis("time");
        })
        .CategoryAxis(axis => axis
            .Categories(model => model.Period)
            .AxisCrossingValue(0,9999,9999)
            .Justify(true)
        )
                .ValueAxis(axis => axis
                   .Numeric("weight")
                   .Min(0)
                   .Title("(Kg)")
                   .Max(8000)
               )
               .ValueAxis(axis => axis
                   .Numeric("time")
                   .Color("#ffae00")
                   .Min(0)
                   .Max(35)
               )
               .ValueAxis(axis => axis
                   .Numeric("weight")
                   .Color("#007eff")
                   .Min(0)
                   .Max(1.1)
               )
                .Tooltip(tooltip => tooltip
                    .Visible(true)
                    .Background("#339900")
                    .Template("Weight1 : #= dataItem.Weight1 # <br/>Weight2 : #= dataItem.Weight2 #<br/>Time1 : #= dataItem.Time1 #<br/>Time2 : #= dataItem.Time2 #")
                )
%>