DateTimeCategorical Axis an automatic mode for MajorTickInterval ?

6 posts, 0 answers
  1. Marco
    Marco avatar
    87 posts
    Member since:
    Apr 2011

    Posted 24 Oct Link to this post

    Hello,

    I have a chart which display will should display timeserie data which could vary from a few point to hunderds. And of course the chart could be resized. In some this end up in an unreadable chart with too much tick label (or not enough).

    It will be great if the chartview control could be able to update automatically the MajorTickInterval to prevent this. Just like the chart in Excel !

    I attach two screenshot (one of the ChartView, one of Excel) to illustrate.

  2. Hristo Merdjanov
    Admin
    Hristo Merdjanov avatar
    712 posts

    Posted 25 Oct Link to this post

    Hi Marco,

    Thank you for writing.

    Indeed, the label interval is not automatically adjusted depending on the available space. You can, however, achieve a similar result as the one required by calculating the interval depending on the viewport`s width. Please check my code snippet below: 
    public partial class Form1 : Form
    {
        private int step = 100;
     
        public Form1()
        {
            InitializeComponent();
     
            LineSeries lineSeries = new LineSeries();
            Random r = new Random();
            for (int i = 0; i < 100; i++)
            {
                lineSeries.DataPoints.Add(new CategoricalDataPoint(i * r.Next(100), DateTime.Now.AddDays(i)));
            }
     
            DateTimeContinuousAxis continuousAxis = new DateTimeContinuousAxis();
            continuousAxis.PlotMode = AxisPlotMode.OnTicksPadded;
            continuousAxis.LabelFitMode = AxisLabelFitMode.Rotate;
            continuousAxis.LabelInterval = 8;
            continuousAxis.LabelRotationAngle = 90;
            lineSeries.HorizontalAxis = continuousAxis;
     
            this.radChartView1.Series.Add(lineSeries);
            this.radChartView1.SizeChanged += radChartView1_SizeChanged;
        }
     
        private void radChartView1_SizeChanged(object sender, EventArgs e)
        {
            DateTimeContinuousAxis axis = radChartView1.Axes[0] as DateTimeContinuousAxis;
            int diff = (int)radChartView1.View.Viewport.Width - this.step;
     
            if (diff > 100 && axis.LabelInterval > 1)
            {
                axis.LabelInterval -= 1;
                this.step = (int)radChartView1.View.Viewport.Width;
            }
            else if (diff < -100)
            {
                axis.LabelInterval += 1;
                this.step = (int)radChartView1.View.Viewport.Width;
            }
        }
    }

    I am also sending you a short video showing the result on my end.

    I hope this helps. Should you have further questions please do not hesitate to write back.

    Regards,
    Hristo Merdjanov
    Telerik by Progress
    Check out the Windows Forms project converter, which aids the conversion process from standard Windows Forms applications written in C# or VB to Telerik UI for WinForms. For more information check out this blog post and share your thoughts.
  3. UI for WinForms is Visual Studio 2017 Ready
  4. Marco
    Marco avatar
    87 posts
    Member since:
    Apr 2011

    Posted 07 Nov in reply to Hristo Merdjanov Link to this post

    Hi Hristo,

    Thank you for answering.

    Sorry for my late answer, I was a little busy on other priorities.

    Now I understand that I have to go on with the viewport.width (which I should translate in the number of label I could display) and the range of my axis value (total interval) to calculate the value of the labelInterval.

    I'm not a great fan of the sample provided, because it won't handle well the maximize/minimize of a windows but it is perfect to understand the concept :-)

  5. Hristo Merdjanov
    Admin
    Hristo Merdjanov avatar
    712 posts

    Posted 07 Nov Link to this post

    Hello Marco,

    Thank you for writing back.

    Indeed that is the idea. The interval needs to be calculated according to the width and the available data points along your axis. The example I sent you handles a situation in which the chart is resized with a step of 100 pixels. In order to handle the maximized form state, you would need to assign a smaller label interval. You can calculate it this way: 
    private void radChartView1_SizeChanged(object sender, EventArgs e)
    {
        DateTimeContinuousAxis axis = radChartView1.Axes[0] as DateTimeContinuousAxis;
        int diff = (int)radChartView1.View.Viewport.Width - this.step;
     
        if (diff > 100 && axis.LabelInterval > 1)
        {
            int interval = axis.LabelInterval - diff/100;
            axis.LabelInterval = interval > 1 ? interval : 1;
            this.step = (int)radChartView1.View.Viewport.Width;
        }
    }

    I hope this helps. Please let me know if you need further assistance.

    Regards,
    Hristo Merdjanov
    Telerik by Progress
    Check out the Windows Forms project converter, which aids the conversion process from standard Windows Forms applications written in C# or VB to Telerik UI for WinForms. For more information check out this blog post and share your thoughts.
  6. Marco
    Marco avatar
    87 posts
    Member since:
    Apr 2011

    Posted 07 Nov in reply to Hristo Merdjanov Link to this post

    Thanks for the update,

    I was written the following before I read your message.

    It's actually looking fine too, so I share the result here and go to next point of my TODO list.

    Thanks a lot for your support !

    Private chartviewlabelspacing As Integer = 40
     
            Private Sub Base100ChartView_SizeChanged(sender As System.Object, e As System.EventArgs) Handles Base100ChartView.SizeChanged
                Dim labelcount As Integer = Me.Base100ChartView.View.Viewport.Width / Me.chartviewlabelspacing
     
                Dim EDate As Date = Me.Base100ChartView.Series(0).DataPoints.Cast(Of Telerik.Charting.CategoricalDataPoint).Select(Function(c) c.Category).Cast(Of Date).DefaultIfEmpty().Min
                Dim LDate As Date = Me.Base100ChartView.Series(0).DataPoints.Cast(Of Telerik.Charting.CategoricalDataPoint).Select(Function(c) c.Category).Cast(Of Date).DefaultIfEmpty().Max
                Dim monthCount As Integer = (LDate.Year - EDate.Year) * 12 + LDate.Month - EDate.Month
     
                Dim axisX As DateTimeCategoricalAxis = CType(Me.Base100ChartView.Axes(0), DateTimeCategoricalAxis)
                Dim labelInterval As Integer = monthCount / labelcount
     
                axisX.MajorTickInterval = If(labelInterval < 1, 1, labelInterval)
            End Sub
  7. Hristo Merdjanov
    Admin
    Hristo Merdjanov avatar
    712 posts

    Posted 08 Nov Link to this post

    Hello Marco,

    I am glad that you have achieved the desired result with respect to your actual project and scenario. Thank you also for sharing your solution with the community. 

    Please let me know if you need further assistance.

    Regards,
    Hristo Merdjanov
    Telerik by Progress
    Check out the Windows Forms project converter, which aids the conversion process from standard Windows Forms applications written in C# or VB to Telerik UI for WinForms. For more information check out this blog post and share your thoughts.
Back to Top
UI for WinForms is Visual Studio 2017 Ready