How to create datime chart - datetime

Question

I have a datatable from SQL Server with datetime field ScannedDateTime
I am trying to make a chart in VB NET with 2 line type series:
X - should be date from field ScannedDateTime
Y - should be time from fiels ScannedDateTime
I have not idea how to do it? To convert time to decimal numbers and show it as y axis or what?
I would like to keep y in time format "hh:mm" and to limit min value as work time example: from 07:00 to 15:00
Devexpress?
I tried this but why is time repeated???
Thanks for idea

Answer 1

It seems that you need to show the Time value from every data source record using the TimeSpan scale. While the DevExpress ChartControl does not support the TimeSpan scale type, you can use the following approach to generate the required chart layout.
First, define an extra numeric field that will be used as the ValueDataMember and contain the number of ticks corresponding to the TimeSpan value.
To show TimeSpan labels instead of numeric values, populate a collection of Custom Axis Label elements.
Finally, customize the Crosshair Cursor label text by handling the CustomDrawCrosshair event.
Please refer to the sample source code illustrating this approach:
public partial class Form1 : Form
{
public Form1()
{
InitializeComponent();
List<MyData> inputData = new List<MyData>();
inputData.Add(new MyData() { ID = 1, ScannedDateTime = new DateTime(2019, 4, 1, 11, 22, 33) });
inputData.Add(new MyData() { ID = 2, ScannedDateTime = new DateTime(2019, 4, 2, 15, 00, 12) });
inputData.Add(new MyData() { ID = 3, ScannedDateTime = new DateTime(2019, 4, 3, 09, 11, 03) });
Series lineSeries = new Series("Scanned Date", ViewType.Line);
lineSeries.ArgumentDataMember = "ScannedDateTime";
lineSeries.ValueScaleType = ScaleType.Numerical;
lineSeries.ValueDataMembers.AddRange(new string[] { "TimeTicks" });
lineSeries.DataSource = inputData;
chartControl1.Series.Add(lineSeries);
XYDiagram diagram = (XYDiagram)chartControl1.Diagram;
diagram.AxisX.DateTimeScaleOptions.MeasureUnit = DateTimeMeasureUnit.Day;
for (int i = 0; i < 24; i++)
{
TimeSpan ts = new TimeSpan(i, 0, 0); //display tickmarks for every hour
diagram.AxisY.CustomLabels.Add(new CustomAxisLabel() { AxisValue = ts.Ticks, Name = ts.ToString() });
}
chartControl1.CustomDrawCrosshair += ChartControl1_CustomDrawCrosshair; // optional - if you need to show TimeSpan values in the Crosshair Cursor
}
private void ChartControl1_CustomDrawCrosshair(object sender, CustomDrawCrosshairEventArgs e)
{
foreach(CrosshairElementGroup g in e.CrosshairElementGroups)
{
foreach(CrosshairElement el in g.CrosshairElements)
{
TimeSpan ts = TimeSpan.FromTicks((long)el.SeriesPoint.Values[0]);
el.LabelElement.Text = string.Format("{0} - {1}", el.SeriesPoint.Argument, ts);
}
}
}
}
public class MyData
{
public int ID { get; set; }
public DateTime ScannedDateTime { get; set; }
public double TimeTicks
{
get
{
return ScannedDateTime.TimeOfDay.Ticks;
}
}
}