Shared tooltip - how to hide zero values?

[Peter]

I have a chart with two series, both grouped by an identical category field. When I display the tooltip I want to be able to hide items that have a value of zero. How would I do this?

Here is my code for the chart, and I attached a screenshot of it:

@(Html.Kendo().Chart<JobChartVm>()
 .Name("durationChart")
 .Theme("Bootstrap")
 .Title("Execution Time & Error Counts By Job (Last 7 Days)")
 .Legend(legend => legend
 .Position(ChartLegendPosition.Top)
 .Labels(labels => labels.Padding(0, 20, 0, 0))
 .Padding(5, 5, 5, 20)
 .Background("#f5f5f5")
 .Border(1, "#ddd", ChartDashType.Solid)
 )
 .DataSource(dataSource => dataSource
 .Read(read => read.Action("GetJobChartData", "Admin"))
 .Group(group => group.Add(model => model.Entity.JobName))
 .Sort(sort => sort.Add(model => model.Entity.TimeStamp).Ascending())
 )
 .SeriesDefaults(seriesDefaults =>
 seriesDefaults.Line().Style(ChartLineStyle.Smooth)
 )
 // in order not to duplicate the legend we need to specify 1 unique color per group
 .SeriesColors("#428bca", "#5bc0de", "#5cb85c", "#f2b661", "#e67d4a", "#da3b36", "#967adc")
 .Series(series =>
 {
 series
 .Line(model => model.Entity.Duration, categoryExpression: model => model.Entity.TimeStamp)
 .Aggregate(ChartSeriesAggregate.Avg)
 .Notes(notes => notes.Label(label => label.Position(ChartNoteLabelPosition.Outside)).Position(ChartNotePosition.Bottom))
 .Name("#= group.value #")
 .Tooltip(tooltip => tooltip
 .Visible(true)
 .Format("{0:N0}s")
 );
 series
 .Column(model => model.Failures, categoryExpression: model => model.Entity.TimeStamp)
 .Aggregate(ChartSeriesAggregate.Sum)
 .VisibleInLegend(false)
 .Gap(0.2)
 .Spacing(0.1)
 .Name("#= group.value #")
 .Tooltip(tooltip => tooltip
 .Visible(true)
 .Format("{0:N0} errors")
 );
 })
 .CategoryAxis(axis => axis
 .Date()
 .Labels(labels => labels.Rotation(-90))
 .BaseUnit(ChartAxisBaseUnit.Fit)
 .Crosshair(c => c.Visible(true))
 )
 .ValueAxis(axis => axis
 .Logarithmic()
 .MinorGridLines(minorGridLines => minorGridLines.Visible(true))
 .Labels(labels => labels.Format("{0:N0}"))
 .Title("Execution Time (sec) / Error Count")
 .Min(0.9)
 .AxisCrossingValue(0.9)
 )
 .Tooltip(tooltip => tooltip
 .Visible(true)
 .Shared(true)
 )
 .Events(events => events
 .DataBound("function(e){ kendo.ui.progress($('#durationChart'), false); }")
 )
 .Pannable(pannable => pannable
 .Lock(ChartAxisLock.Y)
 )
 .Zoomable(zoomable => zoomable
 .Mousewheel(mousewheel => mousewheel.Lock(ChartAxisLock.Y))
 .Selection(selection => selection.Lock(ChartAxisLock.Y))
 ))

[Stamo Gochev]

Hi Peter,

You can configure the sharedTemplate and filter the data items based on a condition:

.Tooltip(tooltip => tooltip
    .Visible(true)
    .Shared(true)
    .SharedTemplate(
        "# for (var i = 0; i < points.length; i++) { #" +
            "# if (points[i].value !== 0) { #" +
                "<div>#: points[i].value #</div>" +
            "# } #" +
        "# } #"
    )
)

I am also attaching a modified version of your page with hard-coded data, so you can test the idea. Please note that you might need to further customize the template, so that the final result is in the format that you want.

In addition, you can find more information regarding client templates in MVC in the following article:

http://docs.telerik.com/kendo-ui/aspnet-mvc/helpers/grid/faq

Regards,
Stamo Gochev
Telerik