I recently dealt with a page that had a Kendo Chart and a Kendo Grid tied to the same DataSource. They were on a page visually right beside each other, so when the user hovered over a row in the Grid, we wanted to highlight the point for that same item in the Chart.
I couldn’t find any information about how to do this in Kendo’s documentation or forums, but I did finally find the following methods in the Chart object:
With these bullets in my coding gun, I began to take aim at this project.
The description of the toggleHighlight method was a little confusing, but you basically pass in true or false as the first argument to turn the highlighting on/off. The second argument can be a string (representing the series or category name you want to highlight), an object (with properties “series” and “category”), or a function.
In my case, I needed to use a function. The function passes you an object with properties about each point in the Chart. For each point, you get access to the dataItem the point represents, so you can check the properties of that item.
In my case, my data objects looked something like this:
var data = [{ Id: 1, Name: "Object 1", Date: new Date(), Amount: 100 }, { Id: 2, Name: "Object 2", Date: new Date(), Amount: 200 }];
And the series looked like this:
var series = {
name: "Series Name",
type: "scatter",
xField: "Date",
yField: "Amount",
data: data
};
I then added event listeners to the Kendo Grid for the mouseenter and mouseleave events on each row:
$("#grid .k-grid-content tr[role='row']").on("mouseenter", function () {
var row = $("#grid").data("kendoGrid").dataItem(this); //get the data item attached to this row being hovered
var chart = $("#chart").data("kendoChart"); //get the chart
chart.toggleHighlight(true, function(point) { return point.dataItem.Id === row.Id; }); //highlight the point where the Ids match
chart.showTooltip(function(point) { return point.dataItem.Id === row.Id; }); //show the tooltip for the point where the Ids match
});
$("#grid .k-grid-content tr[role='row']").on("mouseleave", function () {
var chart = $("#chart").data("kendoChart"); //get the chart
chart.toggleHighlight(false, "Series Name"); //remove all highlights for the Series the point is in
chart.hideTooltip("Series Name"); //hide tooltips for all points in the Series the point is in
});
As you can see, the second argument of the toggleHighlight method is a function that gives you access to the point’s information. I simply accessed the dataItem property of the point and checked its ID versus the ID of the row I hovered over. Voilà! That point is now highlighted in the Chart!
The same kind of ID check applies to the showTooltip method, and it worked perfectly as well.
Here’s what the final product looked like:
Let me know if you have any questions or if this was useful to you!