Smart Labels for DateTime Axis

[Arthur Dunn]

Hi,

In our application, we are assigning DateTime values to the XAxis.
When the date range spans across years, we want the labels to display only year value, like 2000, 2001, 2002, 2003 etc.,
When the date range spans across months, we want the labels like Apr, May, June, July etc.,
When the date range spans across days, we want the labels like 15 Mar, 16 Mar, 17 Mar etc.,
When the date range spans across hours, we should only get labels for time like 12:00:00, 1:00:00, 2:00:00 etc.,

By any chance, does TeeChart support this kind of labelling ?
Or is there a way this can be achieved ?
I have attached some screenshots for your reference here.

ScreenShot1

8446.Capture2.PNG (52.65 KiB) Viewed 5428 times

ScreenShot2

7357.Capture3.PNG (45.25 KiB) Viewed 5404 times

ScreenShot3

0412.Capture.PNG (63.9 KiB) Viewed 5429 times

Thanks in Advance.

[Sandra]

Hello Arthur Dunn,

I suggest you two options to achieve as you want:
First option:

Code: Select all

 public Form1()
        {
            InitializeComponent();
            comboBox1.Items.AddRange(new object[] {
            "Year","Month","Day","Time"});
            comboBox1.TabIndex = 1;
            comboBox1.SelectedIndex = 0;
            comboBox1.DropDownStyle = ComboBoxStyle.DropDownList;
            InitializeChart();

        }
        Steema.TeeChart.Styles.Line line1;
        DateTime dt;
        double[] rndTable;
      //  TimeSpan Tspan = TimeSpan.
        private void InitializeChart()
        {
            dt = DateTime.Now;
            rndTable = new double[20];
            tChart1.Aspect.View3D = false;
            line1 = new Line(tChart1.Chart);
            line1.Color = Color.Blue;
            line1.Pointer.Visible = true;
            line1.Pointer.Style = PointerStyles.PolishedSphere;
            line1.XValues.DateTime = true;
            Random rnd = new Random();
            for (int i = 0; i < 10; i++)
            {
                rndTable[i] = rnd.Next(100);  
            }
            for (int i = 0; i < 10; i++)
            {
                line1.Add(dt, rndTable[i]);
                dt = dt.AddYears(1);
            }
            tChart1.Axes.Bottom.Labels.DateTimeFormat = "yyyy";

            comboBox1.SelectedIndexChanged += new EventHandler(comboBox1_SelectedIndexChanged);

 
        }
        void comboBox1_SelectedIndexChanged(object sender, EventArgs e)
        {
            tChart1.Series[0].Clear();
            switch (comboBox1.SelectedIndex)
            {
                case 0:
                 
                    for (int i = 0; i < 10; i++)
                    {
                        line1.Add(dt, rndTable[i]);
                       dt= dt.AddYears(1);
                    }
                    tChart1.Axes.Bottom.Labels.DateTimeFormat = "yyyy";
                    break;

                case 1:
                   
                    for (int i = 0; i < 10; i++)
                    {
                        line1.Add(dt, rndTable[i]);
                        dt = dt.AddMonths(1);

                    }
                    tChart1.Axes.Bottom.Labels.DateTimeFormat = "MMM";
                    break;
                case 2:
                    
                    for (int i = 0; i < 10; i++)
                    {
                        line1.Add(dt, rndTable[i]);
                       dt= dt.AddDays(1);
                    }
                    tChart1.Axes.Bottom.Labels.DateTimeFormat = "ddd d";

                    break;

                case 3:
                 
                    for (int i = 0; i < 10; i++)
                    {
                        line1.Add(dt, rndTable[i]);
                        dt= dt.AddHours(1);
                    }
                    tChart1.Axes.Bottom.Labels.DateTimeFormat = "hh:mm:ss";

                    break;
              
            }
        
        }

Second option:

Code: Select all

        public Form1()
        {
            InitializeComponent();
            comboBox1.Items.AddRange(new object[] {
            "Year","Month","Day","Time"});
            comboBox1.TabIndex = 1;
            comboBox1.SelectedIndex = 0;
            comboBox1.DropDownStyle = ComboBoxStyle.DropDownList;
            InitializeChart();

        }
        Steema.TeeChart.Styles.Line line1;
        DateTime dt;
        double[] rndTable;
      //  TimeSpan Tspan = TimeSpan.
        private void InitializeChart()
        {
            dt = DateTime.Now;
            rndTable = new double[20];
            tChart1.Aspect.View3D = false;
            line1 = new Line(tChart1.Chart);
            line1.Color = Color.Blue;
            line1.Pointer.Visible = true;
            line1.Pointer.Style = PointerStyles.PolishedSphere;
            line1.XValues.DateTime = true;
            Random rnd = new Random();
            for (int i = 0; i < 10; i++)
            {
                rndTable[i] = rnd.Next(100);  
            }
            for (int i = 0; i < 10; i++)
            {
                line1.Add(dt, rndTable[i]);
                dt= dt.AddMonths(1);
                dt = dt.AddDays(1);
                dt = dt.AddHours(6);
                dt = dt.AddMinutes(30);
                if (i % 2 == 0 && i!=0)
                {
                    dt = dt.AddYears(1);
                }
             
            }
            tChart1.Axes.Bottom.Labels.DateTimeFormat = "yyyy";            
            tChart1.Axes.Bottom.Increment = Steema.TeeChart.Utils.GetDateTimeStep(Steema.TeeChart.DateTimeSteps.OneYear);
            comboBox1.SelectedIndexChanged += new EventHandler(comboBox1_SelectedIndexChanged);

 
        }

        void comboBox1_SelectedIndexChanged(object sender, EventArgs e)
        {
            //tChart1.Series[0].Clear();
            switch (comboBox1.SelectedIndex)
            {
                case 0:
                 
                    tChart1.Axes.Bottom.Labels.DateTimeFormat = "yyyy";
                    tChart1.Axes.Bottom.Labels.Angle = 0;
                    tChart1.Axes.Bottom.Increment = Steema.TeeChart.Utils.GetDateTimeStep(Steema.TeeChart.DateTimeSteps.OneYear);
                    break;

                case 1:
               
                    tChart1.Axes.Bottom.Labels.DateTimeFormat = "MMM";
                    tChart1.Axes.Bottom.Labels.Angle = 0;
                    tChart1.Axes.Bottom.Increment = Steema.TeeChart.Utils.GetDateTimeStep(Steema.TeeChart.DateTimeSteps.OneMonth);
                    break;
                case 2:
                    
                    tChart1.Axes.Bottom.Labels.DateTimeFormat = "ddd d";
                    tChart1.Axes.Bottom.Labels.Angle = 0;
                    tChart1.Axes.Bottom.Increment = Steema.TeeChart.Utils.GetDateTimeStep(Steema.TeeChart.DateTimeSteps.OneDay);

                    break;

                case 3:
              
                    tChart1.Axes.Bottom.Labels.DateTimeFormat = "HH:mm";
                    tChart1.Axes.Bottom.Increment = Steema.TeeChart.Utils.GetDateTimeStep(Steema.TeeChart.DateTimeSteps.TwelveHours);
                    break;
            }
        
        }

Can you tell us if previous codes work as you expect?

I hope will helps.

Thanks,

[Arthur Dunn]

Thanks for the code Sandra. This sounds good for me.

But to be more specific, what I noticed with the TeeChart is, if we assign string.Empty to DateTimeFormat, then it automatically adjusts the labels from date to time when zoomed in or when the chart time range changes. We are looking for something similar to that only. Is there a way in which we can specify, the date format or time format it should use when it automatically adjusts the label ? This would avoid our code to manually calculate the time range and reset the format whenever the chart is zoomed.

Thanks in advance.

[Sandra]

Hello Arthur Dunn,

Sorry for the delay. I am afraid your request is not possible using .Net and DateTimeFormat of Axes as custom, so you need change DateTimeFormat manually. I have made a simple code, where I use MouseClick, Zoomed and Unzoom Events to achieve automatic behavior of DateTimeFormat and I suggest you try this to solve your problem:

Code: Select all

        public Form1()
        {
            InitializeComponent();
            comboBox1.Items.AddRange(new object[] {
            "Year","Month","Day","Time"});
            comboBox1.TabIndex = 1;
            comboBox1.SelectedIndex = 0;
            comboBox1.DropDownStyle = ComboBoxStyle.DropDownList;
            InitializeChart();

        }
        Steema.TeeChart.Styles.Line line1;
        DateTime dt;
        double[] rndTable;
        bool zoomed;
        int ZoomCount = 0;
     
        //  TimeSpan Tspan = TimeSpan.
        private void InitializeChart()
        {
            dt = DateTime.Now;  
            rndTable = new double[10];
            tChart1.Aspect.View3D = false;
            line1 = new Line(tChart1.Chart);
            line1.Color = Color.Blue;
            line1.Pointer.Visible = true;
            line1.Pointer.Style = PointerStyles.PolishedSphere;
            line1.XValues.DateTime = true;
           
            Random rnd = new Random();
            for (int i = 0; i < 10; i++)
            {
                rndTable[i] = rnd.Next(100);
                line1.Add(dt, rndTable[i]);
                dt = dt.AddMonths(1);
                dt = dt.AddDays(1);
                dt = dt.AddHours(6);
                dt = dt.AddMinutes(30);
                if (i % 2 == 0 && i != 0)
                {
                    dt = dt.AddYears(1);
                }

            }
            tChart1.Axes.Bottom.Labels.Style = AxisLabelStyle.PointValue;
            tChart1.Axes.Bottom.Labels.DateTimeFormat = "yyyy";
         
            tChart1.MouseClick += new MouseEventHandler(tChart1_MouseClick);
            tChart1.UndoneZoom += new EventHandler(tChart1_UndoneZoom);
            tChart1.Zoomed += new EventHandler(tChart1_Zoomed);
            comboBox1.SelectedIndexChanged += new EventHandler(comboBox1_SelectedIndexChanged);
        }

        void tChart1_UndoneZoom(object sender, EventArgs e)
        {
            zoomed = false;
            tChart1.Axes.Bottom.Labels.DateTimeFormat = "yyyy";
            ZoomCount = 0;
        }

    
        void tChart1_MouseClick(object sender, MouseEventArgs e)
        {
            if (zoomed)
            {
                if (ZoomCount == 2)
                {
                    tChart1.Axes.Bottom.Labels.DateTimeFormat = "MMM";
                    tChart1.Axes.Bottom.Labels.Angle = 0;
                    tChart1.Axes.Bottom.Increment = Steema.TeeChart.Utils.GetDateTimeStep(Steema.TeeChart.DateTimeSteps.OneMonth);
                }
                else if (ZoomCount == 4)
                {
                    tChart1.Axes.Bottom.Labels.DateTimeFormat = "ddd d";
                    tChart1.Axes.Bottom.Labels.Angle = 0;
                    tChart1.Axes.Bottom.Increment = Steema.TeeChart.Utils.GetDateTimeStep(Steema.TeeChart.DateTimeSteps.OneDay);
                }
                else if (ZoomCount == 6)
                {
                    tChart1.Axes.Bottom.Labels.DateTimeFormat = "HH:mm";
                }
            }
            this.Text = ZoomCount.ToString();
        }

        void tChart1_Zoomed(object sender, EventArgs e)
        {
            zoomed = true;
            ZoomCount++;
        }

Can you tell us if previous code works as you expect?

Thanks,