I had query regarding the Tool tip display in RadHtmlChart.I wanted to display 4 things on tooltip if my condtion of dropdown is All else it should show only single value.
For example, A user has 4 types of call i.e SMS,MMS,Voice,DataCharges on which they accounted for. My dropdown has 4 values(Data,voice,SMS,MMS,All).In All condition of dropdown it should display different multiline ToolTip else it should just display column value respectively.
And if the value contains 0 then multiline tooltip should specify that it is zero.For instance if (Total Usage:10 <br/>SMS:0<br/>MMS:5<br/>DATACharges:4<br/>Voice:1)
I have done upto displaying the multiline tooltip but problem is coming when i should display one tooltip for individual dropdownvalue it repeats all other tooltip which was displaying the other data as undefined.
Attaching the images for close look.
Thanks in advance.
Best Regards,
Shikhar
3 Answers, 1 is accepted
I can suggest that you try one of the following things:
- Use JavaScript inside the tooltip template to specify the particular tooltip based on some condition (e.g., if or switch statement) - http://docs.telerik.com/devtools/aspnet-ajax/controls/htmlchart/functionality/clienttemplate/display-html-and-execute-javascript
- Define the template for the series on the client-side, after the interaction with the dropdown:
<script> function pageLoad() { var chart = $find("<%=RadHtmlChart1.ClientID%>"); chart.get_kendoWidget().options.series[0].tooltips.template = "#if(value > 20) {# Value #=value# is a good option#} else {# value below 20 is a bad option #}#"; chart.repaint(); }</script>Regards,
Danail Vasilev
Telerik
Rank 1
Thanx Danail,
I made it,just one issue is this upon one drop down selected other then ALL condition.My toolTip display (Total Usage:some value) but if I need to define proper label for Tooltip which is different as like same dropdown selected text .For example ,if I select Data in dropdown ,I wanted to display in tooltip .(Data=somevalue) else for all I had made changes and attached my code.Just look in to it and convey some solution.
Regards,
Shikhar
<telerik:RadHtmlChart ID="RadHtmlChart2" Skin="Glow" runat="server" Width="1500" Height="500"> <PlotArea> <Series> <telerik:LineSeries Name="Usages" DataFieldY="CostOnData"> <TooltipsAppearance Color="White" DataFormatString="{N}"> </TooltipsAppearance> <LabelsAppearance Visible="false"> <ClientTemplate> #=dataItem.CostOnData# </ClientTemplate> </LabelsAppearance> <TooltipsAppearance Color="White"> <ClientTemplate> #if(dataItem.CostOnData > 0) {# Total Usage:#=dataItem.CostOnData# #}else {##} #<br \> #if(dataItem.SumofSMS > 0) {# SMS: #=dataItem.SumofSMS# #} else {# #} #<br \> #if(dataItem.SUMOFVOICE > 0) {# Voice: #=dataItem.SUMOFVOICE# #} else {##} #<br \> #if(dataItem.SumofDATA > 0) {# DATA: #=dataItem.SumofDATA# #} else {##} #<br \> #if(dataItem.SumofMMS > 0) {# MMS: #=dataItem.SumofMMS# #} else {##} # </ClientTemplate> </TooltipsAppearance> </telerik:LineSeries> </Series> <XAxis DataLabelsField="BetweenDate" StartAngle="0"> <LabelsAppearance RotationAngle="35"> </LabelsAppearance> <TitleAppearance Position="Center" RotationAngle="0" Text="Usage Dates" /> </XAxis> <YAxis> <LabelsAppearance /> <TitleAppearance Position="Center" RotationAngle="0" Text="Cost" /> </YAxis> </PlotArea> <Legend> <Appearance Visible="true" /> </Legend> <ChartTitle Text="30 days Usage Summary - Billed Calls"> <Appearance> <TextStyle Color="White" FontSize="15" FontFamily="Ariel" Margin="10" Padding="20" /> </Appearance> </ChartTitle> </telerik:RadHtmlChart>I can suggest that you try one of the following things:
- Use JavaScript inside the tooltip template to specify the particular tooltip based on some condition (e.g., if or switch statement) - http://docs.telerik.com/devtools/aspnet-ajax/controls/htmlchart/functionality/clienttemplate/display-html-and-execute-javascript
- Define the template for the series on the client-side, after the interaction with the dropdown:
<script> function pageLoad() { var chart = $find("<%=RadHtmlChart1.ClientID%>"); chart.get_kendoWidget().options.series[0].tooltips.template = "#if(value > 20) {# Value #=value# is a good option#} else {# value below 20 is a bad option #}#"; chart.repaint(); }</script>Regards,
Danail Vasilev
Telerik
I can suggest that you try one of the following things:
- Use JavaScript inside the tooltip template to specify the particular tooltip based on some condition (e.g., if or switch statement) - http://docs.telerik.com/devtools/aspnet-ajax/controls/htmlchart/functionality/clienttemplate/display-html-and-execute-javascript
- Define the template for the series on the client-side, after the interaction with the dropdown:
<script> function pageLoad() { var chart = $find("<%=RadHtmlChart1.ClientID%>"); chart.get_kendoWidget().options.series[0].tooltips.template = "#if(value > 20) {# Value #=value# is a good option#} else {# value below 20 is a bad option #}#"; chart.repaint(); }</script>Regards,
Danail Vasilev
Telerik
If I correctly understand your requirement is to display a tooltip in the chart that is based on the selected drop down item. If that is so, then you can store the value from the drop down in a global JavaScript variable which can be used in the tooltip as well. It is fine to use JavaScript in the tooltips, as illustrated in the provided article.
Regards,
Danail Vasilev
Telerik