DateTimeCategorical Axis an automatic mode for MajorTickInterval ?

[Marco]

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.

[Hristo]

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

[Marco]

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 :-)

[Hristo]

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

[Marco]

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

[Hristo]

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