Implement a new aggregate function for tooltips in the Kendo chart

I am currently utilizing a kendo chart with a date x-axis. Each point on the graph corresponds to different dates, but the x-axis displays only a monthly view. To showcase the last data point for each month, I have implemented a custom aggregate function as follows:

Data points include:

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

The graph displays: Jan 2014 - $75

When hovering over these points, I want to display a customized tooltip with specific values related to each data point. The tooltip content is generated by my business logic and it’s not necessary to discuss here. If we consider the example values above, the desired tooltips are:

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

However, when hovering over the aggregated point for the current month, the tooltip should ideally show the value 'C' due to the previous aggregate function. Yet, the displayed value is:

Jan 2014 - '$100'

My inquiry is: Is there a method to specify a customized aggregate function for the kendo tooltip?

The code snippet for the chart is presented below:

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 aforementioned aggregate function's code is provided below:

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

I would greatly appreciate any assistance. Warm regards, Luis.

Answer №1

Just had a breakthrough and discovered the solution. When utilizing the aggregate function, I realized that I was only returning the value of the current point instead of the entire dataItem. To rectify this, the correct implementation should be:

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Managing value state with several Formik forms within a single component

I'm currently in the process of constructing a web page using React and Formik. Within this form page, I have integrated three distinct Formik forms that are conditionally displayed based on a switch statement. The reason behind structuring it this wa ...

Angular js is a powerful framework that allows for the seamless transition of views, except for the home

I am currently using the ng-animate module to implement sliding effects for my app views. Each route has its own unique slide animation. Take a look at my simple code below: HTML: <div ng-view ng-animate class="slide"></div> CSS: /*Animatio ...

What is the best way to conceal specific series in a HighCharts legend?

In the chart, I currently have 4 series. At the moment, only 2 of them are visible while the other 2 are hidden when the chart first loads. As the user zooms in on the chart, the visibility of the series changes dynamically. I need help figuring out how ...

Is there a way to delay the start of an ajax function until a few moments after the user

Good evening, I am interested in implementing a new feature using Ajax. Specifically, I would like to introduce a delay of 2 seconds after the user finishes typing before triggering the search function, as opposed to using "onkeyup". Note: This modificati ...

Completing a submission on a bootstrap form, using innerHTML and displaying an alert

I am currently having an issue with navigating to the home page after submitting a form in Bootstrap. Although I have successfully implemented an alert message upon submission, the page does not redirect to the home page as expected. Instead, it redirects ...

ng-init assign value to a new object

<!DOCTYPE html> <html> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> <body> <div ng-app="myApp" ng-controller="myCtrl2" ng-init="person = new Person('Al ...

Examining whether an ajax call was not initiated within an Angular application

Is there a way to verify that an ajax request has not been made using Angular's $httpBackend? I attempted to use verifyNoOutstandingRequest() but it doesn't seem to be triggering test failures in version 1.1.5. Here is more information about the ...

Personalized AngularJS required text

After utilizing the built-in AngularJS directive required and encountering a validation error, I receive a small popup near the field displaying "Please fill out this field". My issue lies in needing the text to be displayed in another language. How should ...

Error: Unable to locate module: Unable to resolve '@/src/components/layout/Header'

Compilation Error Encountered issue in Next.js (version 14.2.4) while trying to locate '@/src/components/layout/Header' at ./src/app/layout.js:3:1 Suddenly, 2 days ago the code was functioning properly but now it's throwing this error. Er ...

Tips for effectively incorporating additional directives into a directive as it is being defined

I'm encountering a significant issue with dynamic directives in angularjs. My goal is to include new directives to a directive while defining it through an object: compile: function () { return { pre: function (scope, iElement, iAttrs) { ...

Using TypeScript, implement a function that is called when a React checkbox's state changes to true

Currently, I am experimenting with the react feature called onChange. My goal is to update local data by adding a value when a checkbox is selected. Conversely, when the checkbox is unselected, I just want to display the original data. However, I find that ...

Editing rows directly within the ng table interface

Hey there, I'm currently working on implementing inline row editing using ng table After clicking the edit icon and changing values, I encounter an error upon clicking the save icon: TypeError: Cannot read property 'untrack' of undefined ...

Tips for positioning an advertisement at the center of a full-screen HTML5 game

I am struggling to find a way to perfectly center my advertisement in a fullscreen HTML5 game. The game automatically expands to fullscreen when played, and I want the advertisement to always be positioned in the center, regardless of whether the game is b ...

Updating all the direct components within the corresponding category with jQuery

Here is the HTML content I am working with: <li class="info"> info<li> <li class="other"> info<li> <li class="other"> info<li> <li class="Error"> error<li> <li class="other"> error<li> < ...

How to Test React Js API Calls with Jest?

I'm currently in the process of writing test cases for my API call function, but I'm encountering difficulties as I am unable to successfully run my tests. Below is the code for the API call function and the corresponding test cases. export async ...

Reactjs, encountering a hitch in utilizing material UI: Incompatible hook call detected

As a newcomer to React, I decided to incorporate Material UI components into my project. After installing the components locally using npm install and importing them into my project, I encountered an error when trying to run start: Error: Invalid hook call ...

What is the best way to transfer information between different pages in an HTML document?

I am facing a specific requirement where I must transfer form data from one HTML page to another HTML page. The process involves a total of 5 pages, with the user entering data in the following order: 1st page: Name 2nd page: Weight 3rd page: Height 4t ...

Creating a text field in an input box using JavaScript or jQuery to input data

At work, I need to use a web application that requires me to fill in two input fields. However, when I try to do so using JavaScript commands, the strings appear but the "Add" button remains disabled. Additionally, even if I enable the button, the data can ...

What is the process of importing the csv-writer module?

Can we use the import statement instead of const createCSVWriter = require('csv-writer').createObjectCsvWriter; Is there a way to achieve this using import ...

Statement after post is not yielding any result

Below is a javascript function that I'm struggling with: function loginsubmit() { var url = "../php/loginsubmit.php"; var data = ""; ajaxRequest(url, "POST",data , true, insertNewBody); } This function is responsible for sending an ajax ...