I am attempting to hurdle our last issue with moving to Kendo charting. On most of our charts, we provide a more indepth look at the data when hovering over a bar series item. Often we will popup a panel with a pie chart breaking down totals, or a grid of the data that makes up the bar item etc.
I can utilize the onserieshover and create the pie chart/grid but can't seem to figure out how to make it appear as though it is a popup/hover item of the parent chart.
My last attempt (which was a horrible idea, but I figured I'll try it), was to expand the .k-tooltip div to the size I needed, append a div tag, and call .chart on that. It works... sort of. It looks like it is drawing the chart, but then disappears.
See fiddle http://jsfiddle.net/giltnerj0/ZPEWN/5/ may hopefully describe what I am trying to do a little better.
If you comment out the
$(".k-tooltip").width(300);
$(".k-tooltip").height(400);
$(".k-tooltip").append("<br /><div id='childChart'></div>");
and then uncomment the
<!--<div id="childChart"></div>-->
It works perfectly, just as a separate chart.
I can utilize the onserieshover and create the pie chart/grid but can't seem to figure out how to make it appear as though it is a popup/hover item of the parent chart.
My last attempt (which was a horrible idea, but I figured I'll try it), was to expand the .k-tooltip div to the size I needed, append a div tag, and call .chart on that. It works... sort of. It looks like it is drawing the chart, but then disappears.
See fiddle http://jsfiddle.net/giltnerj0/ZPEWN/5/ may hopefully describe what I am trying to do a little better.
If you comment out the
$(".k-tooltip").width(300);
$(".k-tooltip").height(400);
$(".k-tooltip").append("<br /><div id='childChart'></div>");
and then uncomment the
<!--<div id="childChart"></div>-->
It works perfectly, just as a separate chart.
8 Answers, 1 is accepted
0

Alan
Top achievements
Rank 1
answered on 05 Sep 2012, 03:38 PM
Bump....
Also looking for a solution to this.
Thanks
Also looking for a solution to this.
Thanks
0
Accepted
Hi,
Tsvetomir Tsonev
the Telerik team
One possible solution is to use the tooltip template to render the "child" chart. For example: http://jsbin.com/ufufom/2/edit
Using Kendo MVVM seems like an even cleaner alternative, but we don't have an example ready.
Tsvetomir Tsonev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0

Robin
Top achievements
Rank 1
answered on 10 Sep 2012, 12:46 PM
Excellent. This work great.
Thank you.
Thank you.
0

David
Top achievements
Rank 1
answered on 21 Dec 2012, 09:24 PM
if i use that example as reference to my app, how i can put that tooltip in a static position,
im using this for static position:
but the tooltip dosnt close when im not hover over the series
explain me please
im using this for static position:
<script>
$(
"#chart"
).kendoChart({
//....
tooltip: {
visible:
false
},
seriesHover: showTooltip
});
var
showTooltip =
function
(e) {$(
"#chart .k-tooltip"
).html(e.value).show();
}
</script>
<style>
.k-tooltip{
//custom position
}​
</style>
but the tooltip dosnt close when im not hover over the series
explain me please
0
Hi David,
The observed behavior is due to the following:
Regards,
Iliana Nikolova
the Telerik team
The observed behavior is due to the following:
- The default chart's tooltip is not visible;
- In the seriesHover event the element with class .k-tooltip is shown (using jQuery show() method), but such element is never hidden.
I am afraid at present there is no event which is fired when the series in Kendo UI Chart are not hovered. As a possible workaround you could hook up to the jQuery mouseleave event and hide the element with class .tooltip when the mouse leaves the chartArea. For example:
$(
"#chart"
).mouseleave(
function
(e){
$(
"#chart .k-tooltip"
).html(e.value).hide()
})
Regards,
Iliana Nikolova
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0

David
Top achievements
Rank 1
answered on 03 Jan 2013, 01:18 PM
so where i use that function if the chart donde have this statment like seriesHover: function??
0
Hi David,
You can call such function after the chart is initialized. For your convenience I prepared a simple jsFiddle example which demonstrates the suggested approach in action.
Regards,
Iliana Nikolova
the Telerik team
You can call such function after the chart is initialized. For your convenience I prepared a simple jsFiddle example which demonstrates the suggested approach in action.
Regards,
Iliana Nikolova
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0

David
Top achievements
Rank 1
answered on 03 Jan 2013, 02:29 PM
Oooooo thanks thanks,