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 127 Views

Chart (HTML5)

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

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

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

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.

07.<html xmlns="http://www.w3.org/1999/xhtml">

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.}

Accepted

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.

07.<html xmlns="http://www.w3.org/1999/xhtml">

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>

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

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.