Format X Axis to date with 24 hour clock?

[kelias]

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.

[AndreG]

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

[kelias]

When I do this: chtMain.AxisX.Labels.CustomFormat = "HH:mm:ss"; I it just prints the letters and doesn't actually format the data. ie: for 23:21 I get "HH:mm:ss" instead.

[JuanC]

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

[kelias]

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.

[JuanC]

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

[kelias]

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.

[JuanC]

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