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

Code behind TooltipAppearance.DataFormatString

3 Answers 753 Views

Chart (HTML5)

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

Wired_Nerve asked on 22 May 2015, 02:48 PM

tooltip.gif

I am needing to set the code behind TooltipAppearance DataFormatString.

I have not had much success with the documentation, I am hoping someone else has had a similar issue.

<telerik:RadHtmlChart runat="server" ID="RadHtmlChart1" Height="400px" Width="480px" CssClass="fb-sized" OnPreRender="RadHtmlChart1_PreRender">

<PlotArea>

<Series>

<telerik:PieSeries DataFieldY="TypeCount" ExplodeField="IsExploded" NameField="Area">

<LabelsAppearance DataFormatString="{0}">

</LabelsAppearance>

<TooltipsAppearance Color="White">

<ClientTemplate>

#=dataItem.Area#<br />#=dataItem.TypeCount#

</ClientTemplate>

</TooltipsAppearance>

</telerik:PieSeries>

</Series>

</PlotArea>

</telerik:RadHtmlChart>

public void buildChart()

{

PieSeries pieSeries1 = new PieSeries();

pieSeries1.Name = "Chart";

pieSeries1.LabelsAppearance.Visible = false;

pieSeries1.TooltipsAppearance.Color = System.Drawing.Color.White;

pieSeries1.TooltipsAppearance.DataFormatString = "???????????";

// What I need in the template is the series name and then the value  somethin like this:  #=dataItem.Name#<br />#=dataItem.Valu#

pieSeries1.SeriesItems.Add(10, Color.Yellow, "Student");

pieSeries1.SeriesItems[0].Visible = false;

pieSeries1.SeriesItems.Add(20, Color.Red, "Staff");

pieSeries1.SeriesItems.Add(50, Color.Green, "Room");

pieSeries1.SeriesItems.Add(20, Color.Purple, "Transfer");

RadHtmlChart1.PlotArea.Series.Add(pieSeries1);

}

protected void Page_Load(object sender, EventArgs e)

{

buildChart();

}

3 Answers, 1 is accepted

answered on 22 May 2015, 06:23 PM

Here is a revised code listing, still can't seem to get the tooltip to do what I want though.

protected void Page_Load(object sender, EventArgs e)

{

var data = VoidLoadData();

var result = RadHtmlChart1.PlotArea.Series;

var item = result[0] as PieSeries;

int index = 0;

User user = (User)Session["currentUser"];

var tagDistributionsService = new TagDistributionsService(user,

new UserPreferenceService(new UserPreferenceRepository()));

var legendPreferences = tagDistributionsService.GetUserLegendSettings();

foreach (chartDistribution distribution in data)

{

Color currentColor = index == 0

? Color.Red

: index == 1 ? Color.Yellow : index == 2 ? Color.Purple : Color.Orange;

PieSeriesItem seriesItem = new PieSeriesItem(distribution.TypeCount, currentColor, distribution.Area);

item.SeriesItems.Add(seriesItem);

foreach (var legend in legendPreferences)

{

if (legend.Legend == distribution.Area)

{

item.SeriesItems[index].Visible = false;

item.DataFieldTooltip = "CountType";

item.TooltipsAppearance.ClientTemplate = "#=dataItem.Area#<br />#=dataItem.TypeCount#";

}

index += 1;

}

answered on 22 May 2015, 08:36 PM

I think I might have gotten it finally.
I was looking at giving up on how to do the tooltip and began looking at opening a radwidow from the client side using the onSeriesClicked javascript event. I noticed the event used two arguements... args.value and args.category
//alert("You clicked on a series item with value '" + args.value + "' from category '" + args.category + "'.");

So I updated the template to use this instead:

<TooltipsAppearance>

<ClientTemplate> #=category#<br /> #=value# </ClientTemplate>

</TooltipsAppearance>

That worked. all of the documentation said I should be using dataItem.Area and dataItem.CountType since my datasource defined them as that... grumble grumble...

answered on 26 May 2015, 06:56 AM

Hello Warren,

I have already replied to the support ticket that was opened by you, so I paste my answer for the rest of the community here:

Please find my comments and suggestions below:

    - The template should be defined in the TooltipsAppearance.ClientTemplate property and not in the DataFormatString one. You can choose to use either one.
    - If you want to display custom values in the tooltips and labels you should do the following:
        1) Data bind the chart.
        2) Define a template.
        3) Use the dataItem object to access data source fields inside the template.
    - If, however, the chart is not a data bound but created programmatically you can create a data table data source programmatically and bind it to the chart.
    - You can use the same property and tag names from the markup for the programmatic creation of the chart as well.

More information regarding using client templates is available in the below resources:

- http://demos.telerik.com/aspnet-ajax/htmlchart/examples/functionality/clienttemplates/defaultcs.aspx
More information regarding the DataFormatString property is available here :

Let me know if you need any assistance on this regard.

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