chart within tooltip

Thread is closed for posting
5 posts, 0 answers
  1. Saqib
    Saqib avatar
    24 posts
    Member since:
    Jan 2014

    Posted 03 Jul 2014 Link to this post

    Hi
    I m looking for an example to see if I can draw a chart as tooltip on some text.
    By that, I mean, on some text, on mouse hover, a tool tip will appear with chart in it.
    Thanks,
  2. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 04 Jul 2014 in reply to Saqib Link to this post

    Hi Saqib,

    Please have a look into the sample code snippet which shows RadChart as the ToolTip.

    ASPX:
    <telerik:RadToolTip ID="RadToolTip1" runat="server" TargetControlID="targetCotrolID" IsClientID="true" VisibleOnPageLoad="true" Width="730px" Height="410px" Position="BottomRight"
        RelativeTo="Element" HideEvent="ManualClose">
        <telerik:RadHtmlChart ID="RadHtmlChart1" runat="server" Width="650px" Height="450px">
            <ChartTitle Text="Countries Exporting Crude Oil the United States (in Thousands of Barrels)">
            </ChartTitle>
            <PlotArea>
                <Series>
                    <telerik:PieSeries DataFieldY="Barrels" ColorField="Color" ExplodeField="IsExploded" NameField="Country">
                        <LabelsAppearance DataFormatString="{0:N0} bbl">
                        </LabelsAppearance>
                        <TooltipsAppearance Color="White" />
                    </telerik:PieSeries>
                </Series>
            </PlotArea>
        </telerik:RadHtmlChart>

    C#:
    protected void Page_Load(object sender, EventArgs e)
    {
        RadHtmlChart1.DataSource = GetData();
        RadHtmlChart1.DataBind();
    }
    protected DataTable GetData()
    {
        DataTable tbl = new DataTable();
        tbl.Columns.Add(new DataColumn("Barrels"));
        tbl.Columns.Add(new DataColumn("Country"));
        tbl.Columns.Add(new DataColumn("Color"));
        tbl.Columns.Add(new DataColumn("IsExploded"));
        tbl.Rows.Add(new object[] { 80309, "Canada", "Black", true });
        tbl.Rows.Add(new object[] { 46428, "Saudi Arabia", "Gray", false });
        tbl.Rows.Add(new object[] { 40573, "Mexico", "DarkGray", false });
        tbl.Rows.Add(new object[] { 40154, "Venezuela", "DarkRed", false });
        return tbl;
    }

    Thanks,
    Shinu.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Saqib
    Saqib avatar
    24 posts
    Member since:
    Jan 2014

    Posted 21 Jul 2014 in reply to Shinu Link to this post

    Thanks for the reply.
    Now if I want to generate this graph on the client side by partial postback (ajax style), how do we do that?
    Doesn't want the postback at all. On hover over some link, we go to server and get data and draw graph inside tooltip.

    Thanks,
  5. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 22 Jul 2014 in reply to Saqib Link to this post

    Hi Saqib,

    As far as my knowledge it is not possible to bind Chart on partial postback. One suggestion is make a postback and bind the chart or bind the chart on Page_Init event and show the RadToolTip based on your requirement.

    Thanks,
    Shinu. 
  6. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1494 posts

    Posted 23 Jul 2014 Link to this post

    Hi Saqib,

    The RadHtmlChart has a client-side data binding. Please refer to this help article and this online demo for an example.

    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.

     
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017