Pass series name to tooltip template

[AP]

I have a pop-up chart in a tooltip template working for some column charts. The definition passes the dataitem to the template function, which then creates a pie chart in the tooltip.

This is working well for charts which dynamically create the series using a field in the dataitem.

However, I now have a stacked column chart using two fixed series, from two different value fields in the dataitem. To create the pop-up chart, I need to identify which series is being hovered over, but I can't work out how to pass this to the function, as the dataitem field names just seem to get parsed in a 'magical' way.

The chart definition is:-

        @(Html.Kendo().Chart<WLI_Payments.Models.TimelinessChartItem>()
.Name("SummaryTimelinessChartFour")
 //.Title("Paid / Awaiting Payment Requests")
 .Title(ti => ti.Text("Payment Timeliness By Month").Font("11px Arial"))
.Theme("bootstrap")
.Legend(l => l.Visible(true).Position(ChartLegendPosition.Bottom))
.ChartArea(c => c.Background("transparent").Height(250))
.DataSource(ds => ds.Read(read => read.Action("GetTimelinessData", "Dashboard"))

.Sort(s =>
{
    s.Add("Year").Ascending();

}


)
)
 .SeriesDefaults(sd => sd.Column().Stack(true))
    .Series(series =>
    {
        series.Column(model => model.InTime).Name("In Time").Spacing(0).Labels(l => l.Visible(true).Font("9px Arial")).Color("#428BCA");
        series.Column(model => model.Late).Name("Late").Spacing(0).Labels(l => l.Visible(true).Font("9px Arial")).Color("#DA3B36");
    })
    .CategoryAxis(axis => axis
        .Categories(model => model.MonthText)
        .Labels(labels => labels.Rotation(-45).Font("10px Arial"))
        .MajorGridLines(lines => lines.Visible(false))


    )
    .ValueAxis(axis => axis.Numeric()

       .Labels(labels => labels.Font("10px Arial"))



   )
    .Tooltip(tooltip => tooltip
        .Visible(true)
    .Format("{0:N0}")
    //.Template("#=series.name# : #=value#")
    //.Font("10px Arial")
    .Background("White")
    .Template("#=tooltipTemplate4(dataItem)#")
    )

         .Pannable(p => p.Lock(ChartAxisLock.Y))

    .Zoomable(zoomable => zoomable
        .Mousewheel(mousewheel => mousewheel.Lock(ChartAxisLock.Y))
        .Selection(selection => selection.Lock(ChartAxisLock.Y))
    )



        )


    </div>









        <p></p></text>);

    })

)

 

The template definition is:-

<script id="childChartTemplate4" type="text/x-kendo-template">
    <div id="childChart4" />
    # setTimeout(function() { createChildChart4(SeriesName,Mth,Year); }) #
</script>

 

The Mth and Year fields are in the dataitem, and get passed through to the function, but I also need the series name.

The template is defined in the script block as:-

var tooltipTemplate4 = kendo.template($("#childChartTemplate4").html());

 

And then the function createChildChart4 gets the data and builds the chart (or would do, if it had the series name).  How do I pass the series name through to the function?

Thanks

[Stefan]

Hello Andrew,

This can be achieved by passing the series.name value to the template.

I made a Dojo example demonstrating this:

http://dojo.telerik.com/UJaxI

Regards,
Stefan
Progress Telerik

[AP]

Stefan,

 

Thanks for the reply. However, I'm aware I can pass the series name like this. What I need to do is pass the series name and the dataitem. I can do:-

.Template("#=tooltipTemplate3(dataItem, series.name)#")

but I have no idea how to reference the series.name in the function, as the dataitem fields seem to get picked up automatically.

[Stefan]

Hello Andrew,

In this scenario, I can suggest using a function which will create one array which will hold both values. Then that array can be passed to the template.

I modified the example to demonstrate this:

http://dojo.telerik.com/UJaxI/2

I hope this is helpful.

Regards,
Stefan
Progress Telerik

[AP]

Thanks - your answer put me onto the right track.

However, I had to create a new object with the fields I needed, as your solution just adds the data item object to an array, and the series name as another item.