Show 2 datas in tooltip (HTMLChart - Pie chart)

3 posts, 0 answers
  1. Alex
    Alex avatar
    15 posts
    Member since:
    Apr 2011

    Posted 14 Apr 2013 Link to this post

    Hi,
    I want to display more than one data in the tooltip (on mouse hover) in pie chart (HTMLChart)
    ex. project1 - output status(%) - started date.
    <telerik:RadHtmlChart Height="400px" runat="server" ID="PieChartProjectOutput" DataSourceID="DSProjectOutcome"
    Width="800px">
    <Legend>
    <Appearance BackgroundColor="White" Position="Right" Visible="true">
    </Appearance>
    </Legend>
    <PlotArea>
    <Series>
    <telerik:PieSeries DataFieldY="Output" StartAngle="90" Name="Role_id"
     ExplodeField="Output"
    NameField="Project_Name">
      <LabelsAppearance Position="Circle" DataFormatString="{0}" DataField="Output">
     </LabelsAppearance>
    <TooltipsAppearance DataFormatString="{1}{0}"></TooltipsAppearance>
    </telerik:PieSeries>
    </Series>
    </PlotArea>
     </telerik:RadHtmlChart>

    Also i want to change the legend size (to display bigger than the normal size).
    pls help me how to do that.


    Thanks
    -Alex
  2.
  3. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1502 posts

    Posted 15 Apr 2013 Link to this post

    Hi Alex,

    You can display different values for the tooltip of a particular Series Item by using ClientTemplates, and only if the RadHtmlChart is databound to a datasource. For example:
    <telerik:RadHtmlChart Height="400px" runat="server" ID="PieChartProjectOutput" DataSourceID="DSProjectOutcome"
    Width="800px">
    ...
    <telerik:PieSeries DataFieldY="Output" StartAngle="90" Name="Role_id"
     ExplodeField="Output" NameField="Project_Name">
      <LabelsAppearance Position="Circle" DataFormatString="{0}" DataField="Output">
     </LabelsAppearance>
    <TooltipsAppearance ClientTemplate="#= kendo.format(\'{0:P}\', dataItem.OutputStatus)#<br />#=dataItem.StartedDate#"></TooltipsAppearance>
    </telerik:PieSeries>
    ...
    Where the highlighted text is the columns from the datasource which will be used for displaying the tooltips. You can also find useful HtmlChart - Client Templates for Series Labels and Tooltips online demo as well as Formatting Numbers help article.

    Regarding the modifying of the HtmlChart's legend size, you can use the TextStyle property, in order to change its appearance. For example:

    <telerik:RadHtmlChart Height="400px" runat="server" ID="PieChartProjectOutput" DataSourceID="DSProjectOutcome"
    Width="800px">
    <Legend>
    <Appearance BackgroundColor="White" Position="Right" Visible="true">
    <TextStyle FontSize="14" Color="Blue" FontFamily="Courier New, sans-serif" />
    </Appearance>
    </Legend>
    ...


    Regards,
    Danail Vasilev
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  5. Alex
    Alex avatar
    15 posts
    Member since:
    Apr 2011

    Posted 15 Apr 2013 Link to this post

    THanks Danail Vasilev

    It worked for me. Thanks!


    --Alex
Back to Top