Add aggregate function on tooltip in kendo chart

784 views Asked by At

I am working with a kendo chart which has a date x-axis. I have several points for different dates, but the x-axis shows only the per month view. I have set a custom aggregate function to display the LAST data point that corresponds to each month, i.e.

Data points are:

Jan 01 2014 - $1500 Jan 03 2014 - $2000 Jan 10 2014 - $75

Shown in the graph is Jan 2014 - $75

When I hover over these points I want to show a custom tooltip with some custom value related to each of these points. The value shown in the tooltip is being generated by my business logic and I do not consider important to discuss it here. Lets say that for the above mentioned values the tooltip I want to show is:

Jan 01 2014 - $100 Jan 03 2014 - $200 Jan 10 2014 - $300

However, when I hover over the aggregated point for the current month I expect the tooltip to show the value 'C' (because of my previous aggregate function). However the value shown is:

Jan 2014 - '$100'

My question is. Is there a way to specify a custom aggregate function to my kendo tooltip?

The code for the chart is:

public class MyModel{
            public DateTime Date {get; set;}
            public double ShownValue {get; set;}
            public double ToolTipValue {get; set;}
        }

@(Html.Kendo().Chart(List<MyModel>)
        .Name("myChart")
        .DataSource(dataSource => dataSource                
            .Sort(s => s.Add(fc => fc.Date))
        )                        
        .SeriesDefaults(seriesDefaults =>
            seriesDefaults.Line().Style(ChartLineStyle.Smooth)
        )
        .Series(series =>
        {
            series.Line(value => value.ShownValue, category => category.Date)                    
                .Aggregate("selectLastPoint");
        })
        .CategoryAxis(axis => axis                        
                    .Labels(labels => labels.Rotation(0).Format("MMM 'yy"))
                    .Date()                        
                    .BaseUnit(ChartAxisBaseUnit.Months)                                        
                    .Justify(false)
        )
        .ValueAxis(axis => axis.Numeric()
            .Labels(labels => labels.Format("{0:c}"))
            )
        .Tooltip(t => t
            .Visible(true)
            .Format("{0:c}")
            .Template("#= kendo.format('{0:C}',dataItem.TooltipValue) #")
        ))

The code to my aggregate function is:

function selectLastPoint(values) {
    return values[values.length - 1];
}

I hope you can help me. Greetings, Luis.

1

There are 1 answers

0
luisgepeto On

Never mind I just found the answer. On the aggregate function I am returning just the value of the current point. I am supposed to return the whole dataItem as follows:

function selectLastPoint(values, series, dataItems) {
    return dataItems[dataItems.length - 1];
}