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

RadHtmlChart stock layout loses data

3 Answers 61 Views
Chart (HTML5)
This is a migrated thread and some comments may be shown as answers.
Nick
Top achievements
Rank 1
Nick asked on 11 Oct 2016, 10:52 AM

Hi,

I have a RadHtmlChart with dynamic data binding and DateTime values on the x-axis.

I'd like to put a Navigator under the chart, and I know that that is possible only if property Layout  = "Stock".

But when I set this value on the Layout property, the chart appears very approximate, and almost impossible to read (example images attached).

Why is this happening?  Is there a way to show the chart with every value or, at least, reduce the amount of this approximation?

Thank you.

3 Answers, 1 is accepted

Sort by
0
Vessy
Telerik team
answered on 12 Oct 2016, 02:52 PM
Hi Nick,

I am afraid that the provided information is not enough to determine what is causing the undesired behavior. Can you send us a simple chart showing the exact configuration you are using along with sample data that the problem can be reproduced with?

Looking forward to your reply,
Vessy
Telerik by Progress
Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
0
Nick
Top achievements
Rank 1
answered on 22 Nov 2016, 10:59 AM

Thank you for your answer. Unfortunately I'm unable to attach a sample project, so I'm going to paste the configuration. I hope that can help to understand the source of my problem

<telerik:RadHtmlChart runat="server" ID="RadChart1">
  <Pan Enabled="true" />
  <Zoom Enabled="true">
    <MouseWheel Enabled="true" Lock="Y" />
    <Selection Enabled="true" ModifierKey="Shift" Lock="Y" />
  </Zoom>
  <Navigator Visible="true">
    <SelectionHint Visible="true" DataFormatString="From {0} to {1}"/>
    <XAxis Type="Date">
    </XAxis>
  </Navigator>
  <PlotArea>
    <XAxis MajorTickType="None" MinorTickType="None">
      <AxisCrossingPoints>
        <telerik:AxisCrossingPoint Value="0" />
        <telerik:AxisCrossingPoint Value="999" />
      </AxisCrossingPoints>
      <MajorGridLines Visible="false" />
      <MinorGridLines Visible="false" />
    </XAxis>
    <YAxis Name="LeftAxis" AxisCrossingValue="0">
      <LabelsAppearance Step="2"></LabelsAppearance>
    </YAxis>
    <AdditionalYAxes>
      <telerik:AxisY Name="RightAxis" AxisCrossingValue="999">
        <LabelsAppearance Step="2"></LabelsAppearance>
      </telerik:AxisY>
    </AdditionalYAxes>
  </PlotArea>
</telerik:RadHtmlChart>

 

In my code behind I have a boolean variable which tells me to show or hide my Navigator:

protected void ReloadChart()
{
  RadChart1.PlotArea.Series.Clear();
  RadChart1.Navigator.Series.Clear();
   
  //Setting up navigator
  if(showNavigator)
  {
    RadChart1.Layout = Telerik.Web.UI.HtmlChart.ChartLayout.Stock; //Without this layout, navigator is not supported.
    RadChart1.Navigator.RangeSelector.From = minDate;
    RadChart1.Navigator.RangeSelector.To = maxDate;  //previously calculated values..
    RadChart1.Navigator.Visible = true;
  }
  else
  {
    RadChart1.Layout = Telerik.Web.UI.HtmlChart.ChartLayout.Default;
    RadChart1.Navigator.RangeSelector.From = null;
    RadChart1.Navigator.RangeSelector.To = null;
    RadChart1.Navigator.Visible = false;
  }
 
  //Adding series to chart and navigator
  LineSeries lineS = new LineSeries();
  lineS.DataFieldY = myDataTable[0].Caption;
  lineS.AxisName = "LeftAxis";
  lineS.LineAppearance.Width = Unit.Pixel(2);
  lineS.LabelsAppearance.Visible = false;
  lineS.MissingValues = Telerik.Web.UI.HtmlChart.MissingValuesBehavior.Interpolate;
  if(showNavigator)
    RadChart1.Navigator.Series.Add(lineS);
  RadChart1.PlotArea.Series.Add(lineS);
 
  //Chart settings:
  RadChart1.PlotArea.XAxis.DataLabelsField = "Date";
  RadChart1.PlotArea.XAxis.LabelsAppearance.DataFormatString = "dd/MM/yyyy";
  RadChart1.PlotArea.XAxis.LabelsAppearance.RotationAngle = -40;
  RadChart1.Legend.Appearance.Visible = true;
  RadChart1.Legend.Appearance.Position = Telerik.Web.UI.HtmlChart.ChartLegendPosition.Top;
 
  RadChart1.PlotArea.XAxis.LabelsAppearance.Step = 4;
  RadChart1.PlotArea.XAxis.AxisCrossingPoints.Clear();
  RadChart1.PlotArea.XAxis.AxisCrossingPoints.Add(0);
  RadChart1.PlotArea.XAxis.AxisCrossingPoints.Add((myDataTable.Rows.Count * 2) + 1);
  RadChart1.PlotArea.YAxis.TitleAppearance.Text = someString;
  RadChart1.PlotArea.AdditionalYAxes[0].TitleAppearance.Text = someOtherString;
  RadChart1.PlotArea.YAxis.AxisCrossingValue = -999999;
  RadChart1.PlotArea.AdditionalYAxes[0].AxisCrossingValue = -999999;
 
  //Data biding
  RadChart1.DataSource = m_LogList;
  RadChart1.DataBind();
}

 

 

Thank you,

N

 

0
Stamo Gochev
Telerik team
answered on 25 Nov 2016, 07:41 AM
Hello Nick,

As far as I can understand from the provided code snippet and screenshots, the described functionality is not supported out of the box for stock charts.

However, if using a category axis (instead of date axis and stock chart) is applicable in your case, the initial number of series items that are shown can be controlled by the MaxValue property of the X axis as mentioned in our documentation:

http://docs.telerik.com/devtools/aspnet-ajax/controls/htmlchart/functionality/zoom-pan-scroll#controlling-initial-view

Setting it to 10 for example will display only 10 items when the chart is displayed for the first time and any further zooming action can change this.

Regards,
Stamo Gochev
Telerik by Progress
Telerik UI for ASP.NET AJAX is ready for Visual Studio 2017 RC! Learn more.
Tags
Chart (HTML5)
Asked by
Nick
Top achievements
Rank 1
Answers by
Vessy
Telerik team
Nick
Top achievements
Rank 1
Stamo Gochev
Telerik team
Share this question
or