Smart Labels for DateTime Axis

Arthur Dunn · Post by **Arthur Dunn** » Tue Apr 03, 2012 1:32 pm

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 5414 times

: ScreenShot2; 7357.Capture3.PNG (45.25 KiB) Viewed 5390 times

: ScreenShot3; 0412.Capture.PNG (63.9 KiB) Viewed 5415 times

Thanks in Advance.

Sandra · Post by **Sandra** » Wed Apr 04, 2012 10:46 am

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 · Post by **Arthur Dunn** » Thu Apr 05, 2012 5:48 am

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 · Post by **Sandra** » Tue Apr 10, 2012 10:40 am

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,

Smart Labels for DateTime Axis

Smart Labels for DateTime Axis

Re: Smart Labels for DateTime Axis

Re: Smart Labels for DateTime Axis

Re: Smart Labels for DateTime Axis