Tool Tip Complications in RadHtmlChart

4 posts, 0 answers
  1. Shikhar
    Shikhar avatar
    4 posts
    Member since:
    Jun 2015

    Posted 15 Jul 2015 Link to this post

     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

     

  2. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1492 posts

    Posted 17 Jul 2015 Link to this post

    Hello Shikhar,

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Shikhar
    Shikhar avatar
    4 posts
    Member since:
    Jun 2015

    Posted 17 Jul 2015 in reply to Danail Vasilev Link to this post

     

    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>
    Danail Vasilev said:Hello Shikhar,

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
    Danail Vasilev said:Hello Shikhar,

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  5. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1492 posts

    Posted 22 Jul 2015 Link to this post

    Hi Shikhar,

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top