I have a Kendo Chart with several data points over time. The default scale is set to months. On hovering each of these points the tooltip is displayed with the value of each point. I have customized an event on the series click in which I detect the current month clicked and update the x axis to show the information for the month selected. The event code is as follows:
function onSeriesClick(e) {
var selectedDate = e.category;
var categoryAxis = $('#chart').data('kendoChart').options.categoryAxis;
categoryAxis.min = new Date(selectedDate.getFullYear(), selectedDate.getMonth());
categoryAxis.max = new Date(selectedDate.getFullYear(), selectedDate.getMonth() + 1);
categoryAxis.baseUnit = "days";
categoryAxis.labels.rotation = -90;
$('#chart').data('kendoChart').refresh();
}
As you see, the above mentioned function just obtains the date of the selected point and updates the category axis to show only a month span. The chart is then refreshed to show this changes.As a result of the range change, some of the data points disappear from the chart which is an expected behaviour. However, even tough the points have disappeared from the chart, moving the cursor over the chart where the other points used to be, results in the tooltip for them to still show. I have to either click somewhere on the chart or move the cursor completely away from the chart area to make the tooltips for the points that are not there anymore to disappear.My question is, is there anything that I can do to "refresh" the tooltip when the range for the chart is refreshed? I was thinking in something like
$('#chart').data('kendoChart').options.tooltip.refresh();
But this method does not exist. What can I do?
I have provided a jsfiddle which illustrates my problem. Just click on any of the data points and then move the cursor inside the chart area and you will see the problem.
http://jsfiddle.net/pagasnc1/
function onSeriesClick(e) {
var selectedDate = e.category;
var categoryAxis = $('#chart').data('kendoChart').options.categoryAxis;
categoryAxis.min = new Date(selectedDate.getFullYear(), selectedDate.getMonth());
categoryAxis.max = new Date(selectedDate.getFullYear(), selectedDate.getMonth() + 1);
categoryAxis.baseUnit = "days";
categoryAxis.labels.rotation = -90;
$('#chart').data('kendoChart').refresh();
}
As you see, the above mentioned function just obtains the date of the selected point and updates the category axis to show only a month span. The chart is then refreshed to show this changes.As a result of the range change, some of the data points disappear from the chart which is an expected behaviour. However, even tough the points have disappeared from the chart, moving the cursor over the chart where the other points used to be, results in the tooltip for them to still show. I have to either click somewhere on the chart or move the cursor completely away from the chart area to make the tooltips for the points that are not there anymore to disappear.My question is, is there anything that I can do to "refresh" the tooltip when the range for the chart is refreshed? I was thinking in something like
$('#chart').data('kendoChart').options.tooltip.refresh();
But this method does not exist. What can I do?
I have provided a jsfiddle which illustrates my problem. Just click on any of the data points and then move the cursor inside the chart area and you will see the problem.
http://jsfiddle.net/pagasnc1/