Change ItemSeries Label and Tooltip

Thread is closed for posting
6 posts, 0 answers
  1. Lynne
    Lynne avatar
    25 posts
    Member since:
    Oct 2010

    Posted 23 Sep 2014 Link to this post

    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>
  2. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1492 posts

    Posted 26 Sep 2014 Link to this post

    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.

     
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Lynne
    Lynne avatar
    25 posts
    Member since:
    Oct 2010

    Posted 26 Sep 2014 in reply to Danail Vasilev Link to this post

        <!--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".
  5. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1492 posts

    Posted 29 Sep 2014 Link to this post

    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.

     
  6. Lynne
    Lynne avatar
    25 posts
    Member since:
    Oct 2010

    Posted 29 Sep 2014 Link to this post

    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.
  7. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1492 posts

    Posted 01 Oct 2014 Link to this post

    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.

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