Shared tooltip - how to hide zero values?

2 posts, 0 answers
  1. Peter
    Peter avatar
    9 posts
    Member since:
    Dec 2013

    Posted 04 May Link to this post

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

  2. Stamo Gochev
    Admin
    Stamo Gochev avatar
    157 posts

    Posted 08 May Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. UI for ASP.NET MVC is VS 2017 Ready
Back to Top