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

Change ItemSeries Label and Tooltip

5 Answers 454 Views
Chart (Obsolete)
This is a migrated thread and some comments may be shown as answers.
Lynne
Top achievements
Rank 1
Lynne asked on 23 Sep 2014, 07:41 PM
I have several chart questions.
1) I want to change the label for each series item to "Name" or "TooltipValue".  Is this possible? 
2) What is the purpose of the TooltipValue?  The tooltip always displays XValue,YValue and never displays the value et for TooltipValue.
3) I need to display the Name values for each SeriesItem in alpha order as the Legend. Is this possible? 
<telerik:RadHtmlChart ID="RadHtmlChart1" runat="server">
    <PlotArea>
        <Series>
            <telerik:ScatterSeries Name="XXX Data">
                <TooltipsAppearance Visible="true" />
         
                <Items>               
                    <telerik:SeriesItem XValue="1674" YValue="4.3" TooltipValue="ABC" Name="ABC" />                   
                    <telerik:SeriesItem XValue="6468" YValue="3.4" TooltipValue="DEF" Name="DEF"/>
                    <telerik:SeriesItem XValue="3600" YValue="3.4"  />
                    <telerik:SeriesItem XValue="5252" YValue="2.9"  />
                    <telerik:SeriesItem XValue="2612" YValue="1.6"  />
                    <telerik:SeriesItem XValue="1054" YValue="1.3"  />
                </Items>
            </telerik:ScatterSeries>
        </Series>
        <XAxis MajorTickType="Outside" MinorTickType="Outside"  Reversed="false" Step="1000" AxisCrossingValue="0" MinValue="0" MaxValue="7000">
            <TitleAppearance Position="Center" RotationAngle="0" Text="Error Count" />
            <LabelsAppearance DataFormatString="{0}" RotationAngle="0" />
            <MajorGridLines Color="#EFEFEF" Width="1" />
            <MinorGridLines Color="#F7F7F7" Width="1" />
 
        </XAxis>
        <YAxis Color="Black" MajorTickSize="1" MajorTickType="Outside" Reversed="false"
            MinorTickType="None" MaxValue="8.0" MinValue="0.0" Step="0.5" AxisCrossingValue="0.0">
            <TitleAppearance Position="Center" RotationAngle="0" Text="Error Percent" />
            <LabelsAppearance DataFormatString="{0}" RotationAngle="0" />
            <MajorGridLines Color="#EFEFEF" Width="1" />
            <MinorGridLines Color="#F7F7F7" Width="1" />
        </YAxis>
    </PlotArea>
    <ChartTitle Text="XXX Data">
        <Appearance Align="Center" BackgroundColor="White" Position="Top" />
    </ChartTitle>
    <Legend>
        <Appearance Visible="true" />
    </Legend>
 
</telerik:RadHtmlChart>

5 Answers, 1 is accepted

Sort by
0
Danail Vasilev
Telerik team
answered on 26 Sep 2014, 02:07 PM
Hello Lynne,

First let me start with the fact that the items collection is obsolete and you must use SeriesItems one. More information on the matter is available in the Important Changes Regarding Series Declaration help article.

Now back to your questions:
 - Series labels - If you want to use show custom values in labels and tooltips you must use templates which require, however, a data-bound chart. See an example here.
 - TooltipValue property - This property is specific only for BubbleSeries.
 - Alphabet order - Name property in items is specific only for pie/donut/funnel charts. Please elaborate more on the actual and the expected behavior?

Generally if you switch to the new SeriesItems collection you will see only series specific properties and not all of them.

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.

 
0
Lynne
Top achievements
Rank 1
answered on 26 Sep 2014, 03:07 PM
    <!--This is scatter chart dynamic with our data-->
<telerik:RadHtmlChart ID="RadHtmlChart4" runat="server">
    <PlotArea>
        <Series>
            <telerik:ScatterSeries Name="Dynamic Data" DataFieldX="Count" DataFieldY="Percent" ColorField="Color">
                <TooltipsAppearance Visible="true" />
                <LabelsAppearance>
                   <ClientTemplate>#=dataItem.HSP</ClientTemplate>
                </LabelsAppearance>
            </telerik:ScatterSeries>
        </Series>
        <XAxis MajorTickType="Outside" MinorTickType="Outside"  Reversed="false" Step="1000" AxisCrossingValue="0" MinValue="0" MaxValue="7000">
            <TitleAppearance Position="Center" RotationAngle="0" Text="Error Count" />
          <!--  <LabelsAppearance DataFormatString="{0}" RotationAngle="0" /> -->
            <MajorGridLines Color="#EFEFEF" Width="1" />
            <MinorGridLines Color="#F7F7F7" Width="1" />
        </XAxis>
        <YAxis Color="Black" MajorTickSize="1" MajorTickType="Outside" Reversed="false"
            MinorTickType="None" MaxValue="8.0" MinValue="0.0" Step="0.5" AxisCrossingValue="0.0">
            <TitleAppearance Position="Center" RotationAngle="0" Text="Error Percent" />
            <!--<LabelsAppearance DataFormatString="{0}" RotationAngle="0" />-->
            <MajorGridLines Color="#EFEFEF" Width="1" />
            <MinorGridLines Color="#F7F7F7" Width="1" />
        </YAxis>
    </PlotArea>
    <ChartTitle Text="Dynamic Data and Color">
        <Appearance Align="Center" BackgroundColor="White" Position="Top" />
    </ChartTitle>
    <Legend>
        <Appearance Visible="true" />
    </Legend>
 
</telerik:RadHtmlChart>
Hi Danail,

I tried using <SeriesItem> but received a syntax error.  We are on Q1 2013 and I don't think <SeriesItem> becomes available until Q2 2013.

Back to the questions:

- Series labels, I tried applying the example provided to my scatter chart which sets the datasource and executes the DataBind() in the code behind, but received the following error:   

ClientTemplate property of Telerik.Web.UI.HtmlChart.PlotArea.LineAndScatterLabelsAppearance cannot be declared as an inner property 

Is this option only available starting with Q2 2013?

- Legend aphabet order, I would like to dynamically create a legend that takes the values used for the series label and displays them in the legend in alphabetical order.  For example, if my series labels are "DEF", "ABC", "XYZ", "GGN", I would like my legend to display "ABC", "DEF", "GGN", "XYZ".
0
Danail Vasilev
Telerik team
answered on 29 Sep 2014, 02:43 PM
Hello Lynne,

Series items collection has been added to the RadHtmlChart since Q2 2013. I can suggest that you always update your Telerik UI version to the latest official one (i.e., currently this is 2014.2.724 version) because with each release there are many features, improvements and fixes implemented. More information is available in the release notes of the controls.

Regarding the templates functionality it is available as of Q3 2012, so that you can use it with version Q2 2013. You must, however, set the template as a regular and not a composite property (e.g. LabelsAppearance.ClientTemplate="#dataItem.HSP#") because there was recently a change with it.

As for the legend it consists of the series names. Therefore I can suggest that you simply rearrange the order of the series added.

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.

 
0
Lynne
Top achievements
Rank 1
answered on 29 Sep 2014, 04:12 PM
Thanks for the information Danail.  I downloaded a trial copy of the latest Telerik version and was able to change each SeriesItem label as you suggested.

I am still unable to modify the legend.  Let me try to explain again.  I have a SINGLE series in a scatter graph.  I would like the label for EACH SeriesItem to be included in the legend.   Can I access the legend text in the code behind so I can set it to a string value which is the concatenation of all my SeriesItem labels?

Thanks for your help.
0
Danail Vasilev
Telerik team
answered on 01 Oct 2014, 02:41 PM
Hello Lynne,

Generally the legend consists of series items names for a pie/donut series, while for the rest series, including the scatter ones it consists of series names. Therefore I am afraid the desired functionality is not achievable with the current implementation of the chart.

What I can suggest is that you create custom legend. See an example here.


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
Lynne
Top achievements
Rank 1
Answers by
Danail Vasilev
Telerik team
Lynne
Top achievements
Rank 1
Share this question
or