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

chart within tooltip

4 Answers 46 Views
Chart (Obsolete)
This is a migrated thread and some comments may be shown as answers.
Saqib
Top achievements
Rank 1
Saqib asked on 03 Jul 2014, 10:33 PM
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,

4 Answers, 1 is accepted

Sort by
0
Shinu
Top achievements
Rank 2
answered on 04 Jul 2014, 07:06 AM
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.
0
Saqib
Top achievements
Rank 1
answered on 21 Jul 2014, 04:19 PM
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,
0
Shinu
Top achievements
Rank 2
answered on 22 Jul 2014, 06:46 AM
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. 
0
Danail Vasilev
Telerik team
answered on 23 Jul 2014, 11:12 AM
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.

 
Tags
Chart (Obsolete)
Asked by
Saqib
Top achievements
Rank 1
Answers by
Shinu
Top achievements
Rank 2
Saqib
Top achievements
Rank 1
Danail Vasilev
Telerik team
Share this question
or