Jump to content
Software FX Community

Format X Axis to date with 24 hour clock?


Recommended Posts

I know I can set the X Axis to a Date Time format like so:

AxisX.Labels.Format = AxisFormat.DateTime;

But is there a way to make it use a 24 hour clock on the time instead?

I tried using

AxisX.Labels.CustomFormat

But I'm not sure how to format the string I pass into it to get the desired result.

  • Like 3
Link to post
Share on other sites

It's in the API documentation, under ValueFormat.CustomFormat Property:

Time Parameters: Character h Display the hour as a number without leading zeros (0-11) using a 12-hour clock Character hh Display the hour as a number with leading zeros (00-11) using a 12-hour clock Character H Display the hour as a number (0-23) using a 24-hour clock. Character HH Display the hour as a number with leading zeros (00-23) using a 24-hour clock. Character m Display the minute as a number without leading zeros (0-59).Character mm Display the minute as a number with leading zeros (00-59). Character s Display the second as a number without leading zeros (0-59). Character ss Display the second as a number with leading zeros (00-59).Character t One character time-marker string, such as A or P Character tt Multicharacter time-marker string such as AM or PMFormat Display m/d/yy 12/7/58 d-MMMM-yy 7-December-58d-MMMM 7 December MMMM-yy December 58 h:mm 20:50 h:mm:ss 20:50:35 m/d/yy h:mm 12/7/58 20:50

Link to post
Share on other sites

Is your field a datetime field? I tried the following permutations and they all worked

<cfx:Axis.Labels> <cfx:AxisLabelAttributes CustomFormat="yyyy MM" BindingPath="Date" /></cfx:Axis.Labels>

<cfx:Axis.Labels>   <cfx:AxisLabelAttributes Format="Date" CustomFormat="yyyy MM" BindingPath="Date" /></cfx:Axis.Labels>

JuanC

Link to post
Share on other sites

Your example doesn't even include time. I'm doing all this in code instead of XAML. Here is an example


chtMain.AxisX.Labels.Format = AxisFormat.DateTime;

chtMain.AxisX.Labels.CustomFormat = "HH:mm";

When I do this the time is shown but it's still in a 12 hour clock, and then it also looses the ability to change depending on the size of the chart. So if I have 1000 data-points, it then puts a label for each data point instead of only those that fit.

Link to post
Share on other sites

I tried HH mm and it works fine, the time is formatted using a 24 hour clock (we are using the .NET formatting APIs to actually format the datetime) and the labels are only drawn when they fit.

Can you post a small sample app (you can use harcoded or random data) that duplicates the problem you are experiencing?

JuanC

Link to post
Share on other sites
  • 3 weeks later...

The XAML:


<Window x:Class="ChartfxTest.MainWindow"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:cfx="http://schemas.softwarefx.com/chartfx/wpf/80"

xmlns:cfxmotifs="http://schemas.softwarefx.com/chartfx/wpf/80/motifs" Title="MainWindow" Height="350" Width="525">

<Grid>

<cfx:Chart x:Name="chtMain" Gallery="Line" UseEffects="True" UseVisuals="True" BorderThickness="0" Style="{x:Static cfxmotifs:Basic.Style}" Border="{x:Static cfx:Borders.None}" >

<cfx:Chart.PlotArea>

<cfx:PlotAreaAttributes/>

</cfx:Chart.PlotArea>

<cfx:Chart.LegendBox>

<cfx:LegendBox DockPanel.Dock="Bottom"/>

</cfx:Chart.LegendBox>

</cfx:Chart>

</Grid>

</Window>

And the code behind


using System;

using System.Collections.Generic;

using System.Windows;

using ChartFX.WPF;

namespace ChartfxTest

{

public partial class MainWindow : Window

{

public MainWindow()

{

InitializeComponent();

Loaded += MainWindow_Loaded;

}

private void MainWindow_Loaded(object sender, RoutedEventArgs e)

{

chtMain.Series.Clear();

chtMain.AxesY.Clear();

Axis a = new Axis {AutoScale = true, ForceZero = false, Labels = {Decimals = 2}, Title = new Title("MW")};

chtMain.AxesY.Add(a);

chtMain.AxisX.Labels.Format = AxisFormat.DateTime;

chtMain.AxisX.Labels.CustomFormat = "HH:mm";

chtMain.AxisX.Title = new Title("Time");

SeriesAttributes series = new SeriesAttributes("Value");

series.AxisY = a;

series.Content = "My Value";

series.BindingPathX = "Date";

series.Gallery = Gallery.Line;

chtMain.Series.Add(series);

List<TimeSeries> data = GetData();

series.ItemsSource = data;

}

private List<TimeSeries> GetData()

{

List<TimeSeries> data = new List<TimeSeries>();

Random rnd = new Random();

for (int i = 0; i < 50; i++)

{

data.Add(new TimeSeries {Date = DateTime.Today.AddHours(i), Value = rnd.Next(0, 100)});

}

return data;

}

}

public class TimeSeries

{

public DateTime Date { get; set; }

public int Value { get; set; }

}

}

When I run this it still shows dates in 12 hour format. And when the chart is resized the labels get all squished together.

Link to post
Share on other sites
  • 2 weeks later...

Please set the Axis format to AxisFormat.Time instead of DateTime.

Also note that if you only have a single series or if all series can read the data from the same collection, you will get better performance by using Chart.ItemsSource instead of Series.ItemsSource.

Series.ItemsSource should only be used in cases where multiple series need to read data from different collections.

Regards,

JuanC

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...