I would like to display a gantt chart using .NET Live Charts WPF that displays an x axis representing a 24 hours period from the start of the current day until the end. The axis should have a separator every two hours and the labels should show the hour (i.e. 00:00, 02:00, etc.)
My code correctly displays the gantt chart, but the x axis displays separators and labels that do not follow the above rules.
<Window x:Class="GanttExample.MainWindow"
xmlns=";
xmlns:x=";
xmlns:d=";
xmlns:mc=";
xmlns:local="clr-namespace:GanttExample"
xmlns:lvc="clr-namespace:LiveCharts.Wpf;assembly=LiveCharts.Wpf"
mc:Ignorable="d"
Title="MainWindow" Height="350" Width="525">
<Grid Name="CartGrid">
</Grid>
</Window>
namespace GanttExample
{
public partial class MainWindow : Window
{
private readonly ChartValues<GanttPoint> _values;
public MainWindow()
{
InitializeComponent();
Formatter = value => new DateTime((long) value).ToString("HH:mm");
CartesianChart cartesianChart = new CartesianChart();
var now = DateTime.Now;
DateTime startOfDay = new DateTime(now.Year, now.Month, now.Day, 0, 0, 0);
_values = new ChartValues<GanttPoint>
{
new GanttPoint(startOfDay.AddHours(.5).Ticks, startOfDay.AddHours(2).Ticks),
new GanttPoint(startOfDay.AddHours(1).Ticks, startOfDay.AddHours(3).Ticks),
new GanttPoint(startOfDay.AddHours(12).Ticks, startOfDay.AddHours(16.5).Ticks),
new GanttPoint(startOfDay.AddHours(3.25).Ticks, startOfDay.AddHours(5).Ticks),
new GanttPoint(startOfDay.AddHours(15).Ticks, startOfDay.AddHours(17).Ticks),
new GanttPoint(startOfDay.AddHours(5).Ticks, startOfDay.AddHours(8).Ticks),
new GanttPoint(startOfDay.AddHours(6).Ticks, startOfDay.AddHours(10).Ticks),
new GanttPoint(startOfDay.AddHours(7).Ticks, startOfDay.AddHours(14.25).Ticks),
new GanttPoint(startOfDay.AddHours(9).Ticks, startOfDay.AddHours(14).Ticks),
new GanttPoint(startOfDay.AddHours(9.5).Ticks, startOfDay.AddHours(12).Ticks),
new GanttPoint(startOfDay.AddHours(10).Ticks, startOfDay.AddHours(11).Ticks),
new GanttPoint(startOfDay.AddHours(18).Ticks, startOfDay.AddHours(23.5).Ticks)
};
cartesianChart.Series = new SeriesCollection
{
new RowSeries
{
Values = _values,
DataLabels = false,
RowPadding = 1,
MaxRowHeigth = 20
}
};
var labels = new List<string>();
for (var i = 0; i < 12; i++)
labels.Add("Task " + i);
cartesianChart.AxisY = new AxesCollection
{
new Axis
{
Labels = labels.ToArray(),
ShowLabels = false
}
};
var xLabels = new List<double> {startOfDay.Ticks,
startOfDay.AddHours(2).Ticks,
startOfDay.AddHours(4).Ticks,
startOfDay.AddHours(6).Ticks,
startOfDay.AddHours(8).Ticks,
startOfDay.AddHours(10).Ticks,
startOfDay.AddHours(12).Ticks,
startOfDay.AddHours(14).Ticks,
startOfDay.AddHours(16).Ticks,
startOfDay.AddHours(18).Ticks,
startOfDay.AddHours(20).Ticks,
startOfDay.AddHours(22).Ticks,
startOfDay.AddHours(24).Ticks,
};
cartesianChart.AxisX = new AxesCollection
{
new Axis
{
Position = AxisPosition.RightTop,
FontSize = 16,
LabelFormatter = Formatter,
MinValue = xLabels[0],
MaxValue = xLabels[xLabels.Count - 1],
Separator = new Separator
{
IsEnabled = true,
Step = 72000000000
}
}
};
CartGrid.Children.Add(cartesianChart);
DataContext = this;
}
public Func<double, string> Formatter { get; set; }
}
}
The below image shows how the labels are incorrect, as they are off by 4 minutes (this changes as the window is resized)