This is a migrated thread and some comments may be shown as answers.

Tooltips on HTMLChart

20 Answers 660 Views

Dock

This is a migrated thread and some comments may be shown as answers.

20 Answers, 1 is accepted

answered on 09 Jun 2014, 12:34 PM

Hello Jon,

In order for the content of the RadDock to be rendered properly, overflow property is set to the RadDock's wrapper. Therefore using RadDock as a wrapper control or any other control that uses the CSS overflow property, will prevent the setting of higher z-index to the tooltip from taking effect as it has a lower priority.

What I can suggest, however, is that try one of the following approaches:

expand the RadHtmlChart's wrapper by setting higher width and height to the RadDock and align it to the center of the dock, so that there is enough space for the ToolTips to be rendered property.
or set position absolute to the RadHtmlChart and make sure that the width and height properties of the RadDock are set. For example:

ASPX:

<telerik:RadDock ID="RadDock1" runat="server" Width="450" Height="450">

<ContentTemplate>

<div style="width: 450px; height: 450px; position: absolute;">

<telerik:RadHtmlChart ID="RadHtmlChart1" runat="server" Width="450px" Height="450px">

...

</telerik:RadHtmlChart>

</div>

</ContentTemplate>

</telerik:RadDock>

- or try setting some padding to the RadHtmlChart's tooltips through the _chartObject as follows:

ASPX:

<telerik:RadHtmlChart ID="RadHtmlChart1" runat="server" Width="300px" Height="300px">

...

</telerik:RadHtmlChart>

JavaScript:

function pageLoad() {

var chartObject = $find("<%=RadHtmlChart1.ClientID %>")._chartObject;

chartObject._tooltip.chartPadding.top = 15;

chartObject._tooltip.chartPadding.left = 15;

}

Setting such a padding, however, will affect all the tooltips located around the chart, so I can suggest to keep up either with the first approach or with the second one.

There is, however, a special case when multiple RadDocks with RadHtmlChart controls are present on the page. For example if there are two RadDocks - the first RadDock is before the second one in the DOM tree and therefore setting higher z-index for the first chart will not take effect because both RadDocks have by default the same-zIndex, so that additionally created RadDocks will overlap the preceding ones.

What I can suggest in that case is that you set higher zIndex for the RadDock which RadHtmlChart Series are hovered and then get back to the original zIndex. For example:
JavaScript:

<script>

function OnClientSeriesHovered(sender, eventArgs) {

var parentElement = sender.get_parent().get_element();

parentElement.style.zIndex = 3001;

setTimeout(function () { parentElement.style.zIndex = 3000 }, 2000);

}

</script>

ASPX:

<telerik:RadDock ID="RadDock1" runat="server" Width="300" Height="350">

<ContentTemplate>

<div style="width: 300px; height: 350px; position: absolute;">

<telerik:RadHtmlChart ID="RadHtmlChart1" runat="server" Width="300px" Height="300px" OnClientSeriesHovered="OnClientSeriesHovered">

...

</telerik:RadHtmlChart>

</div>

</ContentTemplate>

</telerik:RadDock>

Regards,
Danail Vasilev
Telerik

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

answered on 11 Jun 2014, 01:50 PM

Hi Danail,

I've managed to get your fix working for most of the site however on certain pages I still end up with a problem. The pages in question have a raddock inside a spiltter in order to display a popup filter panel. I have reduced the page down to a sample that demos the issue. Run the code below and then hover over one of the rightmost chart circles. You will see the tooltip get cut off and some scroll bars will appear.

In the style text at the top are some entries that seem to resolve the issue - when I play with them in the browser. The inclusion of them on the page doesn't fix the issue though.

Any thoughts?

Regards

Jon

<html xmlns="http://www.w3.org/1999/xhtml" >

<head runat="server">

<title>Reactive Task Dashboard Page</title>

<style type="text/css" >

.RadDockZone .RadDockZone_Black .rdVertical

{

overflow-y:visible ! important;

}

.RAD_SPLITTER_PANE_CONTENT_Radpane2

{

overflow:auto ! important;

}

</style>

</head>

<body>

<form id="form1" runat="server">

<telerik:RadScriptManager ID="RadScriptManager1" runat="server"></telerik:RadScriptManager>

<telerik:RadStyleSheetManager ID="uxRadStyleSheetManager" Runat="server"></telerik:RadStyleSheetManager>

<telerik:RadSplitter ID="RadSplitter1" runat="server" Width="788" Height="543" Orientation="Horizontal" VisibleDuringInit="false" BorderSize="0" Skin="Black" >

<telerik:RadPane ID="Radpane2" runat="server" >

<telerik:RadDockZone runat="server" ID="uxTaskChartRadDockZone" Width="787" Height="331" style="border: none; padding: 0;">

<telerik:RadDock ID="uxChartsPanel" runat="server" Title="Activity charts" EnableRoundedCorners="False" Skin="Black"

EnableAnimation="false" AutoPostBack="false" Resizable="false" DefaultCommands="None" EnableDrag="False"

Index="-1" Pinned="True" Tag="" Width="787" Height="323" >

<ContentTemplate>

<div style="width:768px;height:300px;position:absolute; ">

<telerik:RadHtmlChart ID="uxTaskHtmlChart" runat="server" Height="300px" Width="768px" Skin="Black">

<Legend>

<Appearance Position="Right" />

</Legend>

<PlotArea>

<Series>

<telerik:LineSeries Name="KPI Score (%)">

<LabelsAppearance Visible="False" />

<TooltipsAppearance>

<ClientTemplate>

SOMETHING OR OTHER: #=value#%f wf ewfew fwewef

</ClientTemplate>

</TooltipsAppearance>

<Items>

<telerik:SeriesItem XValue ="0" YValue="100" />

<telerik:SeriesItem XValue ="1" YValue="50" />

<telerik:SeriesItem XValue ="2" YValue="100" />

<telerik:SeriesItem XValue ="3" YValue="100" />

<telerik:SeriesItem XValue ="4" YValue="100" />

<telerik:SeriesItem XValue ="5" YValue="100" />

<telerik:SeriesItem XValue ="6" YValue="100" />

</Items>

</telerik:LineSeries>

</Series>

</PlotArea>

</telerik:RadHtmlChart>

</div>

</ContentTemplate>

</telerik:RadDock>

</telerik:RadDockZone>

</telerik:RadPane>

</telerik:RadSplitter>

</form>

</body>

</html>

Accepted

answered on 16 Jun 2014, 12:34 PM

Hi Jon,

The mentioned issue stems from the fact that RadDockZone and RadSplitter's RadPane have an overflow:auto property set by default, needed for the proper functionality and appearance of the controls. You can try to change the value of this property on OnClientSeriesHovered event and return its original value after some time out. For example:
JavaScript:

<script>

function OnClientSeriesHovered(sender, eventArgs) {

var chartElement = sender.get_element();

chartElement.style.position = "absolute";

var dockZoneElement = $get("<%=uxTaskChartRadDockZone.ClientID%>");

dockZoneElement.style.overflowY = "initial";

var splitterPaneContentElement = $get("<%=Radpane2.ClientID%>").children[0];

splitterPaneContentElement.style.overflow = "initial";

setTimeout(function () {

chartElement.style.position = "relative";

dockZoneElement.style.overflowY = "auto";

splitterPaneContentElement.style.overflow = "auto";

}, 1000);

}

</script>

ASPX:

<telerik:RadSplitter ID="RadSplitter1" runat="server" Width="788" Height="543" Orientation="Horizontal" VisibleDuringInit="false" BorderSize="0" Skin="Black">

<telerik:RadPane ID="Radpane2" runat="server">

<telerik:RadDockZone runat="server" ID="uxTaskChartRadDockZone" Width="787" Height="331" Style="border: none; padding: 0;">

<telerik:RadDock ID="uxChartsPanel" runat="server" Title="Activity charts" EnableRoundedCorners="False" Skin="Black"

EnableAnimation="false" AutoPostBack="false" Resizable="false" DefaultCommands="None" EnableDrag="False"

Index="-1" Pinned="True" Tag="" Width="787" Height="323">

<ContentTemplate>

<telerik:RadHtmlChart ID="uxTaskHtmlChart" runat="server" Height="300px" Width="768px" Skin="Black" OnClientSeriesHovered="OnClientSeriesHovered">

<Legend>

<Appearance Position="Right" />

</Legend>

<PlotArea>

<Series>

<telerik:LineSeries Name="KPI Score (%)">

<LabelsAppearance Visible="False" />

<TooltipsAppearance>

<ClientTemplate>

SOMETHING OR OTHER: #=value#%f wf ewfew fwewef

</ClientTemplate>

</TooltipsAppearance>

<Items>

<telerik:SeriesItem XValue="0" YValue="100" />

<telerik:SeriesItem XValue="1" YValue="50" />

<telerik:SeriesItem XValue="2" YValue="100" />

<telerik:SeriesItem XValue="3" YValue="100" />

<telerik:SeriesItem XValue="4" YValue="100" />

<telerik:SeriesItem XValue="5" YValue="100" />

<telerik:SeriesItem XValue="6" YValue="100" />

</Items>

</telerik:LineSeries>

</Series>

</PlotArea>

</telerik:RadHtmlChart>

</ContentTemplate>

</telerik:RadDock>

</telerik:RadDockZone>

</telerik:RadPane>

</telerik:RadSplitter>

Note, however, that the above workaround may now work as expected in all cases.

Regards,
Danail Vasilev
Telerik

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

answered on 15 Jul 2014, 09:59 AM

Hi Danail,

I was never able to resolve the issue whereby tooltips opening up would cause issues with scrollbars appearing on my site. The charts were children of raddock controls inside radsplitters.

So I have taken the step of using a radtooltip rather than the tooltip within the chart. This seems to avoid the issue of causing scroll bars to appear. However what I now need to do is get it to appear at the relevant chart point rather than centered above the chart. How should I modify my code to either appear alongside the mouse or next to the hovered chart series point?

function OnClientSeriesHovered(sender, eventArgs) {

var seriesData = eventArgs.get_seriesData();

var selectedDate = new Date( eventArgs.get_category());

window.setTimeout(function () {

var tooltip = $find("<%=uxRadToolTip.ClientID%>");

tooltip.set_text(eventArgs.get_value() + ' ' + eventArgs.get_seriesName() + '<br />' + selectedDate.getDate() + '/' + (selectedDate.getMonth() + 1) + '/' + selectedDate.getFullYear() )

tooltip.set_targetControlID('<%=RadHtmlChart1.ClientID%>');

tooltip.show();

}, 10);

}

Regards

Jon

answered on 17 Jul 2014, 11:57 AM

Hello Jon,

You can obtain the position of the hovered series item and move the tooltip to this position. For example:
ASPX:

<script>

function pageLoad() {

var chart = $find('<%=RadHtmlChart1.ClientID%>');

chart._chartObject.bind("seriesHover", seriesHover);

}

function seriesHover(e) {

var top = e.element.position().top;

var left = e.element.position().left;

var tooltip = $find("<%=uxRadToolTip.ClientID%>");

tooltip.set_text("value is: " + e.value)

tooltip.set_targetControlID('<%=RadHtmlChart1.ClientID%>');

tooltip.show();

setTimeout(function () {

$telerik.setLocation(tooltip.get_popupElement(), { x: left, y: top });

}, 10);

}

</script>

<telerik:RadToolTip ID="uxRadToolTip" runat="server" RelativeTo="Mouse"></telerik:RadToolTip>

<telerik:RadSplitter ID="RadSplitter1" runat="server" Height="500px">

<telerik:RadPane ID="RadPane1" runat="server" Width="100px"></telerik:RadPane>

<telerik:RadPane ID="RadPane2" runat="server" Width="500px">

<telerik:RadDockZone ID="RadDockZone1" runat="server">

<telerik:RadDock ID="RadDock1" runat="server">

<ContentTemplate>

<telerik:RadHtmlChart runat="server" ID="RadHtmlChart1" Width="400px" Height="400px" __OnClientSeriesHovered="OnClientSeriesHovered">

<PlotArea>

<Series>

<telerik:ColumnSeries Name="Product 1">

<TooltipsAppearance Visible="false"></TooltipsAppearance>

<SeriesItems>

<telerik:CategorySeriesItem Y="15000" />

<telerik:CategorySeriesItem Y="23000" />

<telerik:CategorySeriesItem Y="10000" />

</SeriesItems>

</telerik:ColumnSeries>

</Series>

<XAxis>

<Items>

<telerik:AxisItem LabelText="1" />

<telerik:AxisItem LabelText="2" />

<telerik:AxisItem LabelText="3" />

</Items>

</XAxis>

</PlotArea>

<ChartTitle Text="Product sales for 2011">

</ChartTitle>

<Legend>

<Appearance Position="Bottom" />

</Legend>

</telerik:RadHtmlChart>

</ContentTemplate>

</telerik:RadDock>

</telerik:RadDockZone>

</telerik:RadPane>

</telerik:RadSplitter>

Regards,
Danail Vasilev
Telerik

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

answered on 16 Apr 2015, 10:23 AM

imagetooltipissue.png

Hi Danail,

Am using chart's native tooltip. I've followed your answer from here.

http://www.telerik.com/forums/telerik-html-chart---tooltip-position-series-item-border-series-item-smooth-edge

and find the attached image, my tooltip always stays at top left corner irrespective of the bubble position on chart.

please let me know if there is a way to tooltip position according to bubble position on chart( usually how its for all charts), or else at least to set to center of the chart.

Thanks

Swathi Nomula

answered on 17 Apr 2015, 09:09 AM

and one more thing,

I have nearly 10 charts on dashboard(all are user controls), when i change tooltip css in each usercontrol, its been overriding by last loaded control and all are taking the same css. what can i do, if want to apply different tooltip css for each type of chart.

i want following css for bubble chart :

.k-tooltip
{
top: 100px !important;
left: 54px !important;
}

and following for piechart:

k-tooltip
{
top: 0px !important;
left: -4px !important;
}

Pichart is the last loaded usercontrol in dashboard.

Regards

Swathi Nomula

answered on 21 Apr 2015, 06:06 AM

Hi Swathi,

Thank you for the additional information.

There is an important change in the rendering of the tooltips, so that they render now not in the chart but directly in the body tag.

The only way to offset the labels or style them with a particular CSS for a certain chart is to attach to the seriesHover event where you can access them and do that. For example:

CSS:

<style>

.myClass {

color: red !important;

}

</style>

JavaScript:

<script lang="javascript">

function OnSeriesHover(args) {

setTimeout(function () {

//Offset tooltip

var tooltip = $telerik.$(".k-tooltip")[0];

var newLeft = (parseInt(tooltip.style.left) - 56) + "px";

tooltip.style.left = newLeft;

//Add CSS class to the tooltip

Sys.UI.DomElement.addCssClass(tooltip, "myClass")

}, 270);

}

</script>

ASPX:

<telerik:RadHtmlChart runat="server" ID="BubbleChart" Width="500" Height="400">

<ClientEvents OnSeriesHover="OnSeriesHover" />

<PlotArea>

<Series>

<telerik:BubbleSeries>

<Appearance FillStyle-BackgroundColor="#6ab2c9">

</Appearance>

<TooltipsAppearance DataFormatString="Percentage of Market Share: {2}%<br /> Number of products: {0}<br /> Sales: ${1}" />

<SeriesItems>

<telerik:BubbleSeriesItem Size="3" X="5" Y="5500" />

<telerik:BubbleSeriesItem Size="12" X="14" Y="12200" />

<telerik:BubbleSeriesItem Size="33" X="20" Y="60000" />

<telerik:BubbleSeriesItem Size="10" X="18" Y="24400" />

<telerik:BubbleSeriesItem Size="42" X="22" Y="32000" />

</SeriesItems>

</telerik:BubbleSeries>

</Series>

</PlotArea>

</telerik:RadHtmlChart>

Regards,
Danail Vasilev
Telerik

See What's Next in App Development. Register for TelerikNEXT.

answered on 22 Apr 2015, 04:37 PM

Chart.zip

Hi Swathi,

The server-side assigning of a handler to the HtmlChart's OnSeriesHover event should not differ from the way it is done in the markup. I am attaching a very sample page to this reply, demonstrating how to achieve the same functionality both with a chart configured in the markup, and one which is created dynamically.

Please, examine the configurations in it an let me know whether we can be of any further assistance.

Regards,
Vessy
Telerik

See What's Next in App Development. Register for TelerikNEXT.

answered on 23 Apr 2015, 10:20 AM

clienteventerror.png

serverside-error.png

Hi Vessy,

I've tried the way you suggested, but did not get through. please look at attached screenshots. Is there anything am missing here ?

and it is not recognizing from server side too.

Regards

Swathi Nomula

answered on 23 Apr 2015, 11:51 AM

Chart-modified.zip

Hi Swathi,

I assume that you are using a version of the controls released earlier than our 2014 Q3 release where the nested ClientEvents property has been exposed. Upgrading to the latest version of the controls will allow you to use the suggested SeriesHover property of the control.

If you cannot upgrade or there are reasons you need to go with your currently used version of the controls, you will need to use the obsolated OnClientSeriesHovered event of RadHtmlChart:

RadHtmlChart radPiechart = new RadHtmlChart();

radPiechart.ID = "PieChart";

radPiechart.ChartTitle.Text = "Code-behind Chart";

radPiechart.Width = 500;

radPiechart.Height = 400;

radPiechart.OnClientSeriesHovered = "OnSeriesHover";

...

I am attaching the modified example so it is now working with the previous versions of the controls. I made my tests with version 2014.2.618.

Regards,
Vessy
Telerik

See What's Next in App Development. Register for TelerikNEXT.