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

Tooltip with information of other series

3 Answers 154 Views
Chart (HTML5)
This is a migrated thread and some comments may be shown as answers.
Filupa
Top achievements
Rank 1
Filupa asked on 14 Nov 2012, 03:54 PM
Hi everyone

I have a chart with to line series (Image), with the OnClientSeriesHovered and a JS function I achieve the information of both series show and update on the table aside, but My boss want to put that table in the Tooltip:

With this code (C#), I achive this Image2:
series3.TooltipsAppearance.ClientTemplate = "Table on Tooltip
<table border=\"1\"><tr><td>Year S1</td><td>Value S1</td></tr>
<tr><td>Year S2</td><td>Value S2</td></tr></table>"
;

I try to change something like this:
<td id="R1">Year S1</td>

and whith Javascript try to change the value with:
document.getElementById('R1').innerHTML = "(value)";

But the "document.getElementById('R1')" return "NULL"

In the help Page ClientTemplate for Series Labels and Tooltips, explain how to define a Tooltip format, with a DataSource/DataBind option, so I think I may try to use this making two DataTable:
DT1:  (Value_Series1, Day, Value_Series1, Value_Series_2)
DT2:  (Value_Series2, Day, Value_Series1, Value_Series_2)

and in the code put somthing like this:
Day: #=dataItem.Day#
<table border=\"1\">
<tr><td>Year 1</td><td>#=dataItem.Value_Series1#</td></tr>
<tr><td>Year 2</td><td>#=dataItem.Value_Series2#</td></tr>
</table>


But I don't find the way to binding two DataTables, and if this will work.

Any advice?, please!

3 Answers, 1 is accepted

Sort by
0
Accepted
Marin Bratanov
Telerik team
answered on 15 Nov 2012, 03:00 PM
Hello,

You cannot bind the chart to multiple datatables, so the additional columns should exist in the main one that you set as a datasource for the chart. For you convenience I am attaching a simple example of this here.


Regards,
Marin Bratanov
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.
0
Filupa
Top achievements
Rank 1
answered on 15 Nov 2012, 03:16 PM
Marin, Thanks, and with that I have this question:
You use this in the ASPX:
<telerik:RadHtmlChart runat="server" ID="RadHtmlChart1">
    <PlotArea>
        <Series>
            <telerik:BarSeries DataFieldY="data">
            </telerik:BarSeries>
        </Series>
    </PlotArea>
</telerik:RadHtmlChart>

What I have to do if I need to defined all programmaticaly, for a dynamic page, and In the ASPX only write this:
<telerik:RadHtmlChart runat="server" ID="RadHtmlChart1">
</telerik:RadHtmlChart>
0
Filupa
Top achievements
Rank 1
answered on 15 Nov 2012, 03:27 PM
I SOLVE IT!!!!

ColumnSeries series = new ColumnSeries();
series.DataFieldY = "data1";  //this is how I conect the Binding with the series (programmaticaly define)
RadHtmlChart1.PlotArea.Series.Add(series);
RadHtmlChart1.PlotArea.Series[0].TooltipsAppearance.ClientTemplate = "..."
Tags
Chart (HTML5)
Asked by
Filupa
Top achievements
Rank 1
Answers by
Marin Bratanov
Telerik team
Filupa
Top achievements
Rank 1
Share this question
or