Convert seconds to hhh:mm:ss in a chart

Question

I have a MsSql database which calculates the timespan between two dates in seconds. That works fine. I use this column afterwards in C# and write them in an array.

This array is the input for a chart later on. So far this works well, but I cannot find a way to display the seconds in a format like hhh:mm:ss as the timespan can be greater than 24h.

I tried ChartArea.AxisY.LabelStyle.Format = "hhmmss"; but it does not work at all.

Does anybody has an idea how I could do that?

EDIT: I add the data this way:

chart2.Series.Clear();
chart2.ChartAreas.Clear();

Series BoxPlotSeries = new Series();

ChartArea ChartArea2 = new ChartArea();
ChartArea ChartArea3 = new ChartArea();

chart2.ChartAreas.Add(ChartArea2);
chart2.ChartAreas.Add(ChartArea3);
ChartArea2.Name = "Data Chart Area";
ChartArea3.Name = "BoxPlotArea";

BoxPlotSeries.Name = "BoxPlotSeries";
BoxPlotSeries.ChartType = SeriesChartType.BoxPlot;
BoxPlotSeries.ChartArea = "BoxPlotArea";

chart2.Series.Add(BoxPlotSeries);

Series Input1 = new Series();
Input1.Name = "Input1";
Input1.ChartType = SeriesChartType.Point;
Input1.ChartArea = "Data Chart Area";
chart2.Series.Add(Input1);
chart2.Series["Input1"].Points.DataBindY(InputArray);
chart2.ChartAreas["BoxPlotArea"].AxisX.CustomLabels.Add(2, 0.0, "BoxPlot1");


chart2.Series["BoxPlotSeries"]["BoxPlotSeries"] = "Input1";
chart2.Series["BoxPlotSeries"]["BoxPlotShowMedian"] = "true";
chart2.Series["BoxPlotSeries"]["BoxPlotShowUnusualValues"] = "false";
chart2.Series["BoxPlotSeries"]["PointWidth"] = "0.5";
chart2.Series["BoxPlotSeries"].IsValueShownAsLabel = false;
ChartArea2.Visible = false;
ChartArea3.BackColor = Color.FromArgb(224,224,224);
//I tried to format it this way but it didn't work
//ChartArea3.AxisY.LabelStyle.Format = "{0:HHHmmss}";
chart2.ChartAreas["BoxPlotArea"].AxisX.LabelStyle.Angle = -90;

EDIT2: And here's how I populate the input array

int[] InputArray = new int[1000000];

int c = 0;
con.Open();
dr = cmd.ExecuteReader();
if (dr.HasRows)         
{
     while (dr.Read())
     {
          int n;
          if (int.TryParse(dr[0].ToString(),out n) == true)
          {
               InputArray[c] = Convert.ToInt32(dr[0].ToString());
               c++;
          }
     }
}
if (c == 0) { c = 1; }
Array.Resize(ref InputArray, c - 1);

EDIT 3: The Boxplot should look like this in the end:

In Excel the format to display hours greater than 24 is called "[h]:mm:ss;@"

EDIT4:

Thanks to @TAW I nearly managed to solve my problem. I made some adjustments to his solution and came up with this:

In the chart code block:

The Value "max" is set before.

    ChartArea3.AxisY.MajorTickMark.Interval = addCustomLabels(ChartArea3, BoxPlotSeries, 60 * 60, max);





 int addCustomLabels(ChartArea ca, Series series, int interval, int max)
    {
        int tickNo = 0;
        ca.AxisY.CustomLabels.Clear();
        if(max / interval > 10)
        {
            interval = (max / 10) - (max / 10) % (60*30);
            tickNo = (max / 10) - (max / 10) % (60*30);
        }
        if (max / interval <= 2 )
        {
            interval = (max / 4) - (max / 4) % (60 * 15);
            tickNo = (max / 4) - (max / 4) % (60 * 15);
        }
        for (int i = 0; i < max; i += interval)
        {
        CustomLabel cl = new CustomLabel();
        cl.FromPosition = i - interval / 2;
        cl.ToPosition = i + interval / 2;
        cl.Text = hhh_mm_ss(i);
        ca.AxisY.CustomLabels.Add(cl);
        }
        return tickNo;
    }

My problem is now, that sometimes no axis lable (apart from 0:00) is shown even when the code runs through it without any problems.

Has anybody and idea what could be wrong?

Answer 1

Your task involves two parts:

• displaying seconds in the hhh:mm:ss format
• putting them as labels on the y-axis

There is no suitable date-time formatting string for this in c#, so we can't make use of the built-in automatic labels and their formatting.

There also no way to use expressions that call a function on the automatic labels, unfortunately.

So we can't use those.

Instead we will have to add CustomLabels. This is not very hard but does take a few steps..

But let's start with a function that converts an int to the hhh:mm:ss string we want; this should do the job:

string hhh_mm_ss(int seconds)
{
    int sec = seconds % 60;
    int min = ((seconds - sec)/60) % 60;
    int hhh = (seconds - sec - 60 * min) / 3600;
    return hhh > 0 ? string.Format("{2}:{1:00}:{0:00}", sec, min, hhh) 
                   : min + ":" + sec.ToString("00");
}

Maybe it can be optimized, but for our purpose it'll do.

Next we need to create the CustomLabels. They will replace the normal axis labels and we need to add them in a separate loop over the data after each binding.

One special thing about them is their positioning. Which is smack between two values we need to give them: the FromPosition and ToPosition, both in the unit of the axis-values.

Another difference to normal, automatic Labels is that it is up to us to create as many or few of them as we need..

This function tries to create a number that will go up to the maximum y-value and space the CustomLabels at a given interval:

void addCustomLabels(ChartArea ca, Series series, int interval)
{
    // we get the maximum form the 1st y-value
    int max = (int)series.Points.Select(x => x.YValues[0]).Max();
    // we delete any CLs we have
    ca.AxisY.CustomLabels.Clear();
    // now we add new custom labels
    for (int i = 0; i < max; i += interval)
    {
        CustomLabel cl = new CustomLabel();
        cl.FromPosition = i - interval / 2;
        cl.ToPosition = i + interval / 2;
        cl.Text = hhh_mm_ss(i);
        ca.AxisY.CustomLabels.Add(cl);
    }
}

The first parameters to call this are obvious; the last one however is tricky:

You need to decide to interval you want your labels to have. It will depend on various details of your chart:

• the range of values
• the size of the chart area
• the size of the font of the axis

I didn't set any special Font in the function; CustomLabels use the same Font as normal axis labels, i.e. AxisY.LabelStyle.Font.

For my screenshot I prepared the chart like this:

ca.AxisX.Minimum = 0;
ca.AxisY.MajorTickMark.Interval = 60 * 60;  // one tick per hour
addCustomLabels(ca, s, 60 * 30);            // one label every 30 minutes

I have also added DataPoint Labels for testing to show the values..:

series.Points[p].Label = hhh_mm_ss((int)y) + "\n" + y;

Here is the result:

Answer 2

---

UPDATE: This answer may be quite useful for other readers, but it pretty much misses the OP's issues. I'll leave it as it stands, but it will not help in creating specially formatted y-axis labels..

---

Most Chart problems stem from invalid or useless x-values. The following discussion tries to help avoiding or getting around them..

A number is a number and you can't simply display it as a DateTime, or for that matter a TimeSpan.

So you need to add the X-Values as either DateTime or as double that contain values that can be converted to DateTime. The fomer is what I prefer..

So instead of adding the seconds directly add them as offsets from a given DateTime:

Change something like this

series.Points.AddXY(sec, yValues);

To this:

var dt = new DateTime(0).AddSeconds(sec);
series.Points.AddXY(dt, yValues);   

Now you can use the date and time formatting strings as needed..:

chartArea.AxisX.LabelStyle.Format = "{mm:ss}";

You could also add them as doubles that actually are calculated from DateTimes via the ToOADate:

 series.Points.AddXY(dt.ToOADate(), yValues);

But now you will have to set the ChartValueType.DateTime and probably also AxisX.IntervalType and AxisX.Interval to make sure the chart gets the formatting right..:

s.XValueType = ChartValueType.DateTime;
ca.AxisX.Interval = 5;
ca.AxisX.IntervalType = DateTimeIntervalType.Seconds;
ca.AxisX.LabelStyle.Format = "{mm:ss}";

Pick values that suit your data!

Note that the problem with your original code is that the X-Values internally always are doubles, but the seconds are not integer values in them but fractional parts; so you need some kind of calculation. That's what ToOADate does. Here is a short test that shows what one second actually does amount to as a OADate double :

Best add the X-Values as DateTimes so all further processing can rely on the type..

Update I just saw that you have finally added the real code to your question and that is uses Points.DataBindY. This will not create meaningful X-Values, I'm afraid. Try to switch to Points.DataBindXY! Of course the X-Values you bind to also need to follow the rules I have explained above..!

You can do a loop over your array and convert the numbers like I shown above; here is a simple example:

    int[] seconds = new int[5] { 1, 3, 88, 123, 3333 };
    double[] oaSeconds = seconds.Select(x => new DateTime(0).AddSeconds(x).ToOADate())
                                .ToArray();

Answer 3

If you are trying to show more than 2 digits of hour I think this should work for you

//yourTimeSpan is the TimeSpan that you already have
var hoursDouble = Math.Floor(yourTimeSpan.TotalHours);
string hours;
string minutes;
string seconds;

//check hours
if(hoursDouble < 10)
{
    hours = string.Format("0{0}", hoursDouble);
}
else
{
    hours = hoursDouble.ToString();
}
//check minutes
if (yourTimeSpan.Minutes < 10)
{
    minutes = string.Format("0{0}", yourTimeSpan.Minutes);
}
else
{
    minutes = yourTimeSpan.Minutes.ToString();
}
//check seconds
if (yourTimeSpan.Seconds < 10)
{
    seconds = string.Format("0{0}", yourTimeSpan.Seconds);
}
else
{
    seconds = yourTimeSpan.Seconds.ToString();
}

string formattedSpan = String.Format("{0}:{1}:{2}", hours, minutes, seconds);

Update: I think this should solve the problem you were seeing with single digit numbers