I have a Kendo UI Chart that contains data that updates every couple of seconds. When the user hovers over the data point a Kendo Chart tooltip appears. However, when new data comes in and the chart is refreshed, Kendo hides the current tooltip, giving the user very little time to read the tooltip.
After looking at the Kendo Chart doc, I tried to use showTooltip() after the chart was refreshed, but was confused with what the filter parameter would be. We have multiple data points on the chart and every point has its own tooltip.
Here is what I have so far:
seriesHover: function (e) {
prevTooltip = e.value;
}
chart.showTooltip(function (point) {
return point.value === prevTooltip;
});
However, it doesn't seem to filter and find the right data point so the tooltip does not get shown.
I would like to refresh the tooltip along with the chart. If a tooltip was active before the chart refresh, then it should update and remain visible after the refresh
Related
I need to display open a pane where I can display the full text of selected column.
I was referring to
How can I add multiple tooltips on kendo ui grid.
but not getting how to get the tooltip for each column selected.
Thanks in advance.
See if this demo helps you.
The Tooltip widget has a content configuration that accepts either a string or a function returning a string.
This function gets a parameter containing the target for the tooltip which is the element your mouse is hovering over.
You can filter the elements so that only tds pop the tooltip.
Here's how I built and applied the tooltip options object I use in the example:
$("#container").kendoTooltip({
filter: "td",
content: function(e) {return e.target.html();}
});
This example will show a tooltip containing the same content as the cell you're poining at.
If you have any further questions, feel free to ask them.
I have a dynamic angular-datatable something similar to this https://l-lin.github.io/angular-datatables/#/withFixedHeader, also table got horizontal scroll bar. Currently fixed header datatable plugin not supporting scroll. Any idea how to implement this ?
Check the scroll event of datatable and initialize it in angular,
angular.element(document).on('init.dt', function() {
document.querySelector('.dataTables_scrollBody').onscroll = function(e) {
// dtInstanceCallback
// call the dtInstance again.
}
})
so, whenever a scroll event happens in angular datatable then it will recreate the table which in turn works as expected.
Note: This makes datatable too compatible with scroll events in angular way :)
I have a situation that user go to page with Kendo Grid and he can add new item to this Grid. Before he refresh page - new items are visible at the top of the Grid (stantard Kendo UI way)
I want to mark newly added rows, for example I want to have them shown in different colour than the "old' ones.
Is is possible to do this?
We are using Kendo UI for ASP.NET MVC. I've looked at the docs and I don't see a method for statically displaying the tooltips upon page load, so that a user is not required to hover over a marker to display the tooltip value.
Is it possible to display the tooltips for a series line upon page load?
Secondly, is it possible to then do so but for only every 4th value, such as shown here ?
I have a number of nvd3 charts on a page, and I store some useful information in the chart's id attribute (basically a rowkey that I used to populate the data).
What I want to do is fetch additional data when the user clicks a point on the graph.
The problem is, with many graphs on the page, when the user clicks (I have registered for lines.dispatch.on('elementClick')), I need to somehow know which graph I am on so I have the information I need to make the subsequent query.
Is there some way to grab the containing chart information when the user clicks on a point? Or knowing the chart's ID?
If you have jquery on your page, then you can use jquery.closest to look for the parent chart element and extract its ID:
.on('elementClick', function (d, i) {
var chartId = $(this).closest('svg').attr('id');
// ...
});