This is a migrated thread and some comments may be shown as answers.

Pass series name to tooltip template

4 Answers 288 Views
Chart
This is a migrated thread and some comments may be shown as answers.
AP
Top achievements
Rank 1
Veteran
AP asked on 22 Jun 2017, 10:34 AM

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

4 Answers, 1 is accepted

Sort by
0
Stefan
Telerik team
answered on 26 Jun 2017, 06:50 AM
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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data (charts) and form elements.
0
AP
Top achievements
Rank 1
Veteran
answered on 26 Jun 2017, 07:31 AM

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.

0
Stefan
Telerik team
answered on 27 Jun 2017, 08:16 AM
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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
AP
Top achievements
Rank 1
Veteran
answered on 27 Jun 2017, 11:11 AM

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.

Tags
Chart
Asked by
AP
Top achievements
Rank 1
Veteran
Answers by
Stefan
Telerik team
AP
Top achievements
Rank 1
Veteran
Share this question
or