Scrool Bar on X-Axis

[chandra]

hi,

I have drawn a graph with Date on X-Axis. The width of the chart is 400px only.
whenever I am displaying the chart with 10 days data, it is displaying as required.
But when displaying the chart with 100 days data, the chart becomes more condensed so as to show all 100 days data within 400px.

My requirement  is to display a scroll bar on X-axis, when ever the data is more than the 10 days(Approximately).
Note: Y-axis should be constant. (i.e whenever i am scrolling, Y-axis should  appear, only the X-axis data needs to scroll).


Thanks and Regards,
chandra.

[Nikolay]

Hi chandra,

Currently, RadChart for WinForms does not support scrolling along its axes. However, there is a workaround I can suggest: place your large RadChart into the Microsoft panel, and set the panel's AutoScroll to true. Depending on the RadChart size, a scrollbar will automatically appear at the bottom of the control and you will be able to scroll.

If you have additional questions, feel free to contact me.

Regards,
Nikolay
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[chandra]

hi Nikolay,

    Thanks for your suggestion. 
    Normally chart bars were like   
       |       |      |       |
       |       |      |       |
       |       |      |       |

    Suppose If i add new data to the existing chart data dynamically on X-axis, the chart was like
       |  |  |  |  |  |  |  |  |
       |  |  |  |  |  |  |  |  |
       |  |  |  |  |  |  |  |  |

    But I want the chart in below pattern( with same spacing b/n bars/axis labels)
       |       |      |       |      |       |      |       |
       |       |      |       |      |       |      |       |
       |       |      |       |      |       |      |       |
   
    I am placing the chart in a panel. when ever i add data to the chart then the chart width need to be increased.(The distance between the data items/axis labels should be same even if i add large amount of data to the chart).

Is there any way or any property to do this one?
please share the sample code.

Telerik will have Scroll bar on axis in Asp.net control.
when will u implement the same feature in Windows controls.




Thanks and Regards,
Chandra.

[Ves]

Hi Chandra,

I am afraid, there is no such property in RadChart which would allow you to set automatic resizing. You can use the approach proposed by my colleague Nikolay, but you will need to manually update the chart size each time you add an item.

Implementing Zooming and Scrolling in RadChart is not currently in our plans.

Kind regards,
Ves
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[chandra]

hi,

Thanks for your suggestion.
I have drawn the chart according to the Nikolay suggestion.

I got an another idea.
I have set the
radChart1.VerticalScroll.Enabled =true;
radChart1.VerticalScroll.Visible=true;
radChart1.HorizantalScroll.Enabled =true;
radChart1.HorizantalScroll.Visible=true;

The Scroll bars are appearing but they are not working.
when i am draging the scroll, it is not changing its position.
can you share some sample code to work with the Scrollbars (Positioning the scroll bar, minimum, Maximum, value ........).

Thanks and Regards,
chandra.

[Dwight]

Hello chandra,

Unfortunately, the RadChart's scrollbars cannot used. What you can do is place your own horizontal scrollbar and control the range on scrollbar's value changed. Here is a sample code:

	private int rangeStep = 10;
	private int rangeLength = 20;
	public Form1()
	{
	InitializeComponent();
	this.radChart1.PlotArea.XAxis.AutoScale = false;
	this.radChart1.PlotArea.XAxis.IsZeroBased = false;
	this.radChart1.PlotArea.XAxis.AddRange(0, rangeLength, rangeStep);
	this.hScrollBar1.Minimum = 0;
	this.hScrollBar1.Maximum = 99 - rangeLenght / 2;
	this.hScrollBar1.SmallChange = 1;
	this.hScrollBar1.LargeChange = rangeLength;
	this.hScrollBar1.ValueChanged += new EventHandler(radHScrollBar1_ValueChanged);
	}
	protected override void OnLoad(EventArgs e)
	{
	base.OnLoad(e);
	Random r = new Random(42);
	for (int i = 0; i < 10; i++)
	this.radChart1.Series[0].AddItem(
	new ChartSeriesItem(i * 10, Math.Round(r.NextDouble() * 100))
	);
	}
	private void radHScrollBar1_ValueChanged(object sender, EventArgs e)
	{
	this.radChart1.PlotArea.XAxis.AddRange(this.hScrollBar1.Value, this.hScrollBar1.Value + rangeLength, rangeStep);
	this.radChart1.Invalidate();
	this.radChart1.Refresh();
	}

All the best,
Evtim
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[chandra]

hi Evtim,

Thanks for your Reply.

It is really wonderful idea.

Once again Thanks.

Thanks and Regards,
Chandra.

[chandra]

hi,

I have drawn a line chart with Date on X-axis, numeric value on Y-axis (same as numerical Axis from our telerik examples).

On X-axis I want to display the data from 01-01-08 09:00 PM (dd-MM-yy) to  02-01-08 09:00 AM (dd-MM-yy).

I have placed my own Horizantal Scroll bar.

First I want to display the data from 01-01-08  09:00 PM to 01-01-08 11:00 PM. If i changed the value of the Horizontal scroll bar(means if i scroll the bar), i need to display the data from 01-01-08 11:00 PM to 02-01-08 01:00 AM  and so on.

You have given the sample code in the previous reply.
I modified the sample code to display one year data like

I have placed the 1 year data(01-01-08 to 31-12-08) in the datatable(one row for one day).

radChart1.PlotArea.XAxis.Appearance.CustomFormat = "dd/MM/yy";
radChart1.PlotArea.XAxis.AddRange(Convert.ToDouble(FirstRow[0].ToString()),
                                  Convert.ToDouble(FirstRow[0].ToString())+20,1);

this.hScrollBar1.Minimum = Convert.ToInt32(Convert.ToDouble(FirstRow[0].ToString()));
this.hScrollBar1.Maximum = Convert.ToInt32(Convert.ToDouble(LastRow[0].ToString()));
this.hScrollBar1.SmallChange = 5;


private void radHScrollBar1_ValueChanged(object sender, EventArgs e)
{
    this.radChart1.PlotArea.XAxis.AddRange(this.hScrollBar1.Value,
                                           this.hScrollBar1.Value + rangeLength,1);
    this.radChart1.Invalidate();
    this.radChart1.Refresh();
}

but i want to display the data from 01-01-08  09:00 PM to 01-01-08 11:00 PM. After clicking on the scroll bar i want to display the data from 01-01-08  11:00 PM to 02-01-08 01:00 AM.  and so on.

I have tried a lot.
But i am not able to do the above requirement with that sample code.
please modify the above sample code to achieve my requirement.



If i draw a chart with Date on x-axis, it is appearing like(It is not starting from 9AM. Some gap is there between the x-axis starting position to actual data).

               X-axis                                                         X-axis
               Start         9AM           10AM     11 AM      End

But i want the chart like
               X-axis                             X-axis
               Start                                 End
              9AM           10AM         11 AM   
 
Please  share the sample code.


Thanks and Regards,
Chandra.

[Dwight]

Hi chandra,

You need to set:

radChart1.PlotArea.XAxis.LayoutMode = Telerik.Charting.Styles.ChartAxisLayoutMode.Normal;

That will move the first point to the X-axis origin.




Kind regards,
Evtim
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[chandra]

hi,

Thanks for the Reply.

In the previous post i have placed two questions.
You have given the answer for the second question.
Please give the suggestion for the first question also.


Thanks and Regards,
chandra.

[Dwight]

Hello Chandra,

I would suggest changing the CustomFormat to something like:

radChart1.PlotArea.XAxis.Appearance.CustomFormat = "dd/MM/yy hh:mm:ss";

For more information on the string formatting you can refer to http://blog.stevex.net/index.php/string-formatting-in-csharp/

As for the range length -- it should be 1/12 as in OLE Automation Date 1 stands for 1 day and you need a range of 2 hours.  If you still experience troubles achieving the desired result, please, open a support ticket and provide a runnable sample that we can analyze and debug.

All the best,
Evtim
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[chandra]

Hi Evtim,

    You have given alternative for the Horizantal Scroll Bar.
It is working fine for Continuous Dates. But I want the solution for the Discontinuous Dates. (i.e Dates on X-axis are 02,04,05,07,10,11,14,19,23,24,26, 29,...............)


Please share the sample code.


Thanks and Regards,
Chandra.

[Dwight]

Hello chandra,

Discontinuous dates are in general not supported by the chart as skipping points on an axis changes overall visual output. To use discontinuous data, I would suggest exchanging the values in the discontinuous range for values in a continuous range, then manually generate the required labels to display the data.

Regards,
Evtim
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[Sangeetha]

Hi

If I use seaparate scroll bars then my UI does not look good since the chart or the x axis labels are overlapped with the scrollbar, Can i Use the radchart scroll bar itself?
If i use the following I am not able to see the scrollbar on the chart.

radChart1.VerticalScroll.Enabled =true;
radChart1.VerticalScroll.Visible=true;
radChart1.HorizantalScroll.Enabled =true;
radChart1.HorizantalScroll.Visible=true;

[Yavor]

Hi Sangeetha,

In order for the scrolling to work you have to add appropriate ZoomScrollSettings like this:

ZoomScrollSettings zoomSettings = new ZoomScrollSettings();
zoomSettings.MinZoomRange = 0.1;
zoomSettings.RangeEnd = 0.3;
zoomSettings.RangeStart = 0.2;
zoomSettings.ScrollMode = ScrollMode.ScrollAndZoom;
this.radChart.DefaultView.ChartArea.ZoomScrollSettingsX = zoomSettings;

If you need only scrolling then you can just set the ScrollMode to ScrollOnly. You can find more information in our help system in this topic.

Best wishes,
Yavor Ivanov
the Telerik team