Show multiple series value in a CategoryAxis CrossHair Tooltip.

6 posts, 1 answers
  1. Benoit
    Benoit avatar
    5 posts
    Member since:
    Apr 2013

    Posted 16 May 2013 Link to this post

    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)
                   )
    %>

  2. Hristo Germanov
    Admin
    Hristo Germanov avatar
    703 posts

    Posted 16 May 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Benoit
    Benoit avatar
    5 posts
    Member since:
    Apr 2013

    Posted 16 May 2013 Link to this post

    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

  4. Benoit
    Benoit avatar
    5 posts
    Member since:
    Apr 2013

    Posted 16 May 2013 Link to this post

    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.



  5. Answer
    Hristo Germanov
    Admin
    Hristo Germanov avatar
    703 posts

    Posted 16 May 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  6. Benoit
    Benoit avatar
    5 posts
    Member since:
    Apr 2013

    Posted 16 May 2013 Link to this post

    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 #")
                    )
    %>
Back to Top