Scrool Bar on X-Axis

15 posts, 0 answers
  1. chandra
    chandra avatar
    21 posts
    Member since:
    Apr 2008

    Posted 11 Jun 2008 Link to this post

    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.
  2. Nikolay
    Admin
    Nikolay avatar
    1803 posts

    Posted 17 Jun 2008 Link to this post

    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
  3. UI for WinForms is Visual Studio 2017 Ready
  4. chandra
    chandra avatar
    21 posts
    Member since:
    Apr 2008

    Posted 18 Jun 2008 Link to this post

    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.


  5. Ves
    Admin
    Ves avatar
    2879 posts

    Posted 20 Jun 2008 Link to this post

    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
  6. Dwight
    Admin
    Dwight avatar
    475 posts

    Posted 25 Jun 2008 Link to this post

    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:
    1 private int rangeStep = 10; 
    2 private int rangeLength = 20; 
    3  
    4 public Form1() 
    5
    6     InitializeComponent(); 
    7  
    8     this.radChart1.PlotArea.XAxis.AutoScale = false
    9     this.radChart1.PlotArea.XAxis.IsZeroBased = false
    10     this.radChart1.PlotArea.XAxis.AddRange(0, rangeLength, rangeStep); 
    11  
    12     this.hScrollBar1.Minimum = 0; 
    13     this.hScrollBar1.Maximum = 99 - rangeLenght / 2; 
    14     this.hScrollBar1.SmallChange = 1; 
    15     this.hScrollBar1.LargeChange = rangeLength; 
    16     this.hScrollBar1.ValueChanged += new EventHandler(radHScrollBar1_ValueChanged); 
    17
    18  
    19 protected override void OnLoad(EventArgs e) 
    20
    21     base.OnLoad(e); 
    22  
    23     Random r = new Random(42); 
    24  
    25     for (int i = 0; i < 10; i++) 
    26         this.radChart1.Series[0].AddItem( 
    27             new ChartSeriesItem(i * 10, Math.Round(r.NextDouble() * 100)) 
    28             ); 
    29
    30  
    31 private void radHScrollBar1_ValueChanged(object sender, EventArgs e) 
    32
    33     this.radChart1.PlotArea.XAxis.AddRange(this.hScrollBar1.Value, this.hScrollBar1.Value + rangeLength, rangeStep); 
    34     this.radChart1.Invalidate(); 
    35     this.radChart1.Refresh(); 
    36

    All the best,
    Evtim
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
  7. chandra
    chandra avatar
    21 posts
    Member since:
    Apr 2008

    Posted 27 Jun 2008 Link to this post

    hi Evtim,

    Thanks for your Reply.

    It is really wonderful idea.

    Once again Thanks.

    Thanks and Regards,
    Chandra.
  8. chandra
    chandra avatar
    21 posts
    Member since:
    Apr 2008

    Posted 02 Jul 2008 Link to this post

    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.
  9. Dwight
    Admin
    Dwight avatar
    475 posts

    Posted 03 Jul 2008 Link to this post

    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
  10. chandra
    chandra avatar
    21 posts
    Member since:
    Apr 2008

    Posted 04 Jul 2008 Link to this post

    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.

  11. Dwight
    Admin
    Dwight avatar
    475 posts

    Posted 07 Jul 2008 Link to this post

    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
  12. chandra
    chandra avatar
    21 posts
    Member since:
    Apr 2008

    Posted 11 Jul 2008 Link to this post

    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.
  13. Dwight
    Admin
    Dwight avatar
    475 posts

    Posted 14 Jul 2008 Link to this post

    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
  14. Sangeetha
    Sangeetha avatar
    28 posts
    Member since:
    Oct 2010

    Posted 19 Oct 2010 Link to this post

    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;
  15. Yavor
    Admin
    Yavor avatar
    401 posts

    Posted 21 Oct 2010 Link to this post

    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
    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 Public Issue Tracking system and vote to affect the priority of the items
Back to Top
UI for WinForms is Visual Studio 2017 Ready