Telerik Forums / UI for ASP.NET AJAX
This is a migrated thread and some comments may be shown as answers.

Chart with Stock Layout does not update series labels on navigation

8 Answers 88 Views
Chart (HTML5)
This is a migrated thread and some comments may be shown as answers.
Jon
Top achievements
Rank 1
Jon asked on 29 Sep 2015, 03:47 PM
original.png
broken.png

On a chart with the layout set to stock I have noticed an odd behavior. When using the navigator, the chart will update as expected, but the original series labels will be stuck in place and not disappear.

Any idea what may cause this or what setting needs to be changed? We have noticed this in 2 separate projects on 2 different development machines.

I have included 2 screen shots to show.

8 Answers, 1 is accepted

Sort by
0
Danail Vasilev
Telerik team
answered on 30 Sep 2015, 01:31 PM
Hello Jon,

If you have set the y-axis name, ensure that you have set the series AxisName property as well. More information on the mater is available here - http://docs.telerik.com/devtools/aspnet-ajax/controls/htmlchart/troubleshooting/common-issues#yaxis-is-not-rescaled-in-a-stock-chart-when-changing-the-selection-range

Another thing you can try is to use the latest Telerik UI version - 2015.2.826.

If the above steps, however, do not help it would be better to try to reproduce the issue in a fully runnable sample and then provide it back to us, so that we can make a further investigation.

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
0
Jon
Top achievements
Rank 1
answered on 30 Sep 2015, 02:57 PM

y-axis name and AxisName are not set. Setting them still has same issue. I have added a very simple project that has this behavior for you to take a look at. Telerik version used is 2015.1.225.35. Couldn't attach zip file so code is below.

Default.aspx:

01.<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Temp._Default" %>
02. 
03.<%@ Register Assembly="Telerik.Web.UI, Version=2015.1.225.35, Culture=neutral, PublicKeyToken=121fae78165ba3d4" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
04. 
05.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
06. 
08.<head runat="server">
09.    <title></title>
10.</head>
11.<body>
12.    <form id="form1" runat="server">
13.        <telerik:RadScriptManager ID="RadScriptManager1" runat="server" EnablePageMethods="True" EnableScriptCombine="False">
14.        </telerik:RadScriptManager>
15.        <div>
16.               <telerik:RadHtmlChart ID="MonthColumnRadHtmlChart" runat="server" Transitions="true" Skin="Silk"
17.                ChartTitle-Text="Test"
18.                ChartTitle-Appearance-Align="Center"
19.                ChartTitle-Appearance-Position="Top"
20.                Layout="Stock">
21.                <PlotArea>
22.                    <Series>
23.                        <telerik:ColumnSeries Name="Total" DataFieldY="Count">
24.                            <LabelsAppearance>
25.                                <ClientTemplate>
26.                                #if(value != 0){# #=value# #}#
27.                                </ClientTemplate>
28.                            </LabelsAppearance>
29.                        </telerik:ColumnSeries>
30.                    </Series>
31.                    <XAxis BaseUnit="Months" DataLabelsField="Month" Type="Date">
32.                        <LabelsAppearance RotationAngle="45" Step="1">
33.                        </LabelsAppearance>
34.                        <MajorGridLines Visible="false" />
35.                        <MinorGridLines Visible="false" />
36.                    </XAxis>
37.                    <YAxis Type="Numeric">
38.                        <LabelsAppearance DataFormatString="{0:n1}"></LabelsAppearance>
39.                        <MajorGridLines Visible="false" />
40.                        <MinorGridLines Visible="false" />
41.                    </YAxis>
42.                </PlotArea>
43.                <Legend>
44.                    <Appearance Visible="true" Position="Right"></Appearance>
45.                </Legend>
46.                <Navigator Visible="true">
47.                    <SelectionHint Visible="false"></SelectionHint>
48.                    <XAxis>
49.                        <LabelsAppearance RotationAngle="45"></LabelsAppearance>
50.                    </XAxis>
51.                    <Series>
52.                        <telerik:LineSeries DataFieldY="Count"></telerik:LineSeries>
53.                    </Series>
54.                </Navigator>
55.            </telerik:RadHtmlChart>
56.        </div>
57. 
58.    </form>
59.</body>
60.</html>

Default.aspx.cs:

01.using System;
02.using System.Collections.Generic;
03.using System.Data;
04.using System.Linq;
05.using System.Web;
06.using System.Web.UI;
07.using System.Web.UI.WebControls;
08. 
09.namespace Temp
10.{
11.    public partial class _Default : System.Web.UI.Page
12.    {
13.        protected void Page_Load(object sender, EventArgs e)
14.        {
15.            DataTable MonthDT = new DataTable();
16.            MonthDT.Columns.Add("Count", typeof(Int32));
17.            MonthDT.Columns.Add("Month", typeof(DateTime));
18. 
19. 
20.            MonthDT.Rows.Add(0, new DateTime(DateTime.Now.Year, 1, 1));
21.            MonthDT.Rows.Add(0, new DateTime(DateTime.Now.Year, 2, 1));
22.            MonthDT.Rows.Add(2, new DateTime(DateTime.Now.Year, 3, 1));
23.            MonthDT.Rows.Add(0, new DateTime(DateTime.Now.Year, 4, 1));
24.            MonthDT.Rows.Add(0, new DateTime(DateTime.Now.Year, 5, 1));
25.            MonthDT.Rows.Add(0, new DateTime(DateTime.Now.Year, 6, 1));
26.            MonthDT.Rows.Add(0, new DateTime(DateTime.Now.Year, 7, 1));
27.            MonthDT.Rows.Add(0, new DateTime(DateTime.Now.Year, 8, 1));
28.            MonthDT.Rows.Add(3, new DateTime(DateTime.Now.Year, 9, 1));
29.            MonthDT.Rows.Add(0, new DateTime(DateTime.Now.Year, 10, 1));
30.            MonthDT.Rows.Add(0, new DateTime(DateTime.Now.Year, 11, 1));
31.            MonthDT.Rows.Add(0, new DateTime(DateTime.Now.Year, 12, 1));
32. 
33. 
34.            MonthColumnRadHtmlChart.DataSource = MonthDT;
35.        }
36.    }
37.}
0
Accepted
Danail Vasilev
Telerik team
answered on 02 Oct 2015, 09:59 AM
Hi Jon,

You can try to upgrade to the latest official version where this issue is fixed (either Q3 2015 release - 2015.3.930 or Q2 2015 SP2 release - 2015.2.826).

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
0
Jon
Top achievements
Rank 1
answered on 06 Oct 2015, 02:00 PM
Upgraded to 2015 Q3 release, looks like that corrected the issue. Thanks for the support.
0
Jon
Top achievements
Rank 1
answered on 06 Oct 2015, 03:53 PM

Well looks like I may have found another bug with this update. If a second line series is added, the labels of that series will now move off the page right or left when the nav is used and display inside the Legend area. Below is the updated code to show this.

01.<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Temp._Default" %>
02. 
03.<%@ Register Assembly="Telerik.Web.UI, Version=2015.3.930.35, Culture=neutral, PublicKeyToken=121fae78165ba3d4" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
04. 
05.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
06. 
08.<head runat="server">
09.    <title></title>
10.</head>
11.<body>
12.    <form id="form1" runat="server">
13.        <telerik:RadScriptManager ID="RadScriptManager1" runat="server" EnablePageMethods="True" EnableScriptCombine="False">
14.        </telerik:RadScriptManager>
15.        <div>
16.               <telerik:RadHtmlChart ID="MonthColumnRadHtmlChart" runat="server" Transitions="true" Skin="Silk"
17.                ChartTitle-Text="Test"
18.                ChartTitle-Appearance-Align="Center"
19.                ChartTitle-Appearance-Position="Top"
20.                Layout="Stock">
21.                <PlotArea>
22.                    <Series>
23.                        <telerik:ColumnSeries Name="Total" DataFieldY="Count">
24.                            <LabelsAppearance>
25.                                <ClientTemplate>
26.                                #if(value != 0){# #=value# #}#
27.                                </ClientTemplate>
28.                            </LabelsAppearance>
29.                        </telerik:ColumnSeries>
30.                          <telerik:LineSeries Name="Total 2" DataFieldY="Count">
31.                            <LabelsAppearance Position="Below">
32.                                <ClientTemplate>
33.                                #if(value != 0){# #=value# #}#
34.                                </ClientTemplate>
35.                            </LabelsAppearance>
36.                        </telerik:LineSeries>
37.                    </Series>
38.                    <XAxis BaseUnit="Months" DataLabelsField="Month" Type="Date">
39.                        <LabelsAppearance RotationAngle="45" Step="1">
40.                        </LabelsAppearance>
41.                        <MajorGridLines Visible="false" />
42.                        <MinorGridLines Visible="false" />
43.                    </XAxis>
44.                    <YAxis Type="Numeric">
45.                        <LabelsAppearance DataFormatString="{0:n1}"></LabelsAppearance>
46.                        <MajorGridLines Visible="false" />
47.                        <MinorGridLines Visible="false" />
48.                    </YAxis>
49.                </PlotArea>
50.                <Legend>
51.                    <Appearance Visible="true" Position="Right"></Appearance>
52.                </Legend>
53.                <Navigator Visible="true">
54.                    <SelectionHint Visible="false"></SelectionHint>
55.                    <XAxis>
56.                        <LabelsAppearance RotationAngle="45"></LabelsAppearance>
57.                    </XAxis>
58.                    <Series>
59.                        <telerik:LineSeries DataFieldY="Count"></telerik:LineSeries>
60.                    </Series>
61.                </Navigator>
62.            </telerik:RadHtmlChart>
63.        </div>
64. 
65.    </form>
66.</body>
67.</html>

0
Danail Vasilev
Telerik team
answered on 07 Oct 2015, 07:00 AM
Hello Jon,

This is how the chart is rendered on my side with the code below - http://screencast.com/t/NfKIyBfHYc

ASPX:
<telerik:RadHtmlChart ID="MonthColumnRadHtmlChart" runat="server" Transitions="true"
    ChartTitle-Text="Test"
    ChartTitle-Appearance-Align="Center"
    ChartTitle-Appearance-Position="Top"
    Layout="Stock">
    <PlotArea>
        <Series>
            <telerik:ColumnSeries Name="Total" DataFieldY="Count">
                <LabelsAppearance>
                    <ClientTemplate>
                   #if(value != 0){# #=value# #}#
                    </ClientTemplate>
                </LabelsAppearance>
            </telerik:ColumnSeries>
            <telerik:LineSeries Name="Total 2" DataFieldY="Count">
                <LabelsAppearance Position="Below">
                    <ClientTemplate>
                    #if(value != 0){# #=value# #}#
                    </ClientTemplate>
                </LabelsAppearance>
            </telerik:LineSeries>
            <telerik:LineSeries Name="Second Line Series" DataFieldY="Count2">
                <LabelsAppearance Position="Below">
                    <ClientTemplate>
                    #if(value != 0){# #=value# #}#
                    </ClientTemplate>
                </LabelsAppearance>
            </telerik:LineSeries>
        </Series>
        <XAxis BaseUnit="Months" DataLabelsField="Month" Type="Date">
            <LabelsAppearance RotationAngle="45" Step="1">
            </LabelsAppearance>
            <MajorGridLines Visible="false" />
            <MinorGridLines Visible="false" />
        </XAxis>
        <YAxis Type="Numeric">
            <LabelsAppearance DataFormatString="{0:n1}"></LabelsAppearance>
            <MajorGridLines Visible="false" />
            <MinorGridLines Visible="false" />
        </YAxis>
    </PlotArea>
    <Legend>
        <Appearance Visible="true" Position="Right"></Appearance>
    </Legend>
    <Navigator Visible="true">
        <SelectionHint Visible="false"></SelectionHint>
        <XAxis>
            <LabelsAppearance RotationAngle="45"></LabelsAppearance>
        </XAxis>
        <Series>
            <telerik:LineSeries DataFieldY="Count"></telerik:LineSeries>
        </Series>
    </Navigator>
</telerik:RadHtmlChart>

C#:
protected void Page_Load(object sender, EventArgs e)
{
    DataTable MonthDT = new DataTable();
    MonthDT.Columns.Add("Count", typeof(Int32));
    MonthDT.Columns.Add("Count2", typeof(Int32));
    MonthDT.Columns.Add("Month", typeof(DateTime));
 
 
    MonthDT.Rows.Add(0, 0, new DateTime(DateTime.Now.Year, 1, 1));
    MonthDT.Rows.Add(0, 0, new DateTime(DateTime.Now.Year, 2, 1));
    MonthDT.Rows.Add(2, 4, new DateTime(DateTime.Now.Year, 3, 1));
    MonthDT.Rows.Add(0, 0, new DateTime(DateTime.Now.Year, 4, 1));
    MonthDT.Rows.Add(0, 0, new DateTime(DateTime.Now.Year, 5, 1));
    MonthDT.Rows.Add(0, 0, new DateTime(DateTime.Now.Year, 6, 1));
    MonthDT.Rows.Add(0, 0, new DateTime(DateTime.Now.Year, 7, 1));
    MonthDT.Rows.Add(0, 0, new DateTime(DateTime.Now.Year, 8, 1));
    MonthDT.Rows.Add(3, 1, new DateTime(DateTime.Now.Year, 9, 1));
    MonthDT.Rows.Add(0, 0, new DateTime(DateTime.Now.Year, 10, 1));
    MonthDT.Rows.Add(0, 0, new DateTime(DateTime.Now.Year, 11, 1));
    MonthDT.Rows.Add(0, 0, new DateTime(DateTime.Now.Year, 12, 1));
 
 
    MonthColumnRadHtmlChart.DataSource = MonthDT;
}

Could you please provide more details about the mentioned issue? You can also try to modify the example above in order to reproduce the issue.

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
0
Jon
Top achievements
Rank 1
answered on 07 Oct 2015, 01:52 PM
2015-10-07_0849.png
If you move the nav bar right hand slider to the left, the bar graph and line graph will move to the right as it should. Once the labels move off the graph area though, the line graph label still shows above the Legend instead of disappearing. I have attached a screenshot to help the description.
0
Danail Vasilev
Telerik team
answered on 12 Oct 2015, 10:48 AM
Hi Jon,

Thank you for contacting us.

This is an issue with the control and it will be fixed within one of our next releases. I have also updated your Telerik points for reporting this issue to us.

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
Tags
Chart (HTML5)
Asked by
Jon
Top achievements
Rank 1
Answers by
Danail Vasilev
Telerik team
Jon
Top achievements
Rank 1
Share this question
or