RadHtmlChart stock layout loses data

[Nick]

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.

[Vessy]

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

[Nick]

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

 

[Stamo Gochev]

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