How to Set X Axis with DateTime

Oystein Bjorke 6 years ago 0
This discussion was imported from CodePlex

patilraviraj2007 wrote at 2012-03-16 10:07:


I do have developed Silverlight Navigation Application, Where I am looking for D3 Charts, found that there is no support for HorizontalDateTime Axis like WPF ChartPlotter Control. Can you suggest how I can achieve the same?

Does Silverlight Chart control has any provision to handle Date Time Values on X-Axis, Also should be mange/plot the intervals automatically based on Chart Zoom in/out. / Or individual axis Mouse wheel scroll.

Please revert. Thanks in advance.




objo wrote at 2012-03-17 14:17:

Create a PlotModel and add a DateTimeAxis to the axes collection.

This axis will be used as the horizontal axis by default. If you don't specify a vertical axis, a LinearAxis will be added automatically.

Note that the DateTime values must be converted to double to be used with Oxyplot. Use the DateTimeAxis.ToDouble or DateTimeAxis.CreateDataPoint methods (the last one will create points you can add directly to e.g. a LineSeries).

See the DateTimeAxis examples in the ExampleLibrary.

The automatic interval algorithm in the DateTimeAxis is limited, this is issue #7988.  

patilraviraj2007 wrote at 2012-03-17 14:21:


Are you talking about Silverlight D3 Controls ot the OxyPlot Control Lib?



objo wrote at 2012-03-17 14:30:

For Silverlight, you should use OxyPlot.PlotModel and OxyPlot.DateTimeAxis in OxyPlotSL.dll.

The Silverlight control is OxyPlot.Silverlight.Plot in OxyPlot.Silverlight.dll.

patilraviraj2007 wrote at 2012-04-11 18:44:

Hello Objo,

Thanks, I got the axis as DateTime Axis on Plot, but real problem is i cant pass values to X Axis as DateTime ( As it accepts Double), What is the best way to show the data that you have in collection like KeyValue Pair of  DateTime and Values.?

Is there any specific logic required to convert to DateTime to double ?

Please help!!


objo wrote at 2012-04-11 19:25:

Try the DateTimeAxis.ToDouble method to do the conversion.

I started to describe it here:

patilraviraj2007 wrote at 2012-04-12 08:57:

Thanks a lot :) So Cool..

patilraviraj2007 wrote at 2012-04-14 13:06:


Thanks Objo,

Got the data on the Plot thanks, now i do have another problem like i  have two Plots, where if I Zoom In/Out X-Axis of Plot1 then Plot 2 X-Axis should also perform Zoom In/Out respectively (based on operation performed) and vice versa.

Both Plots have X-Asis as DateTime Axis,  Both axis has same Start and end Date while ingratiating the DateTime Axis. and both chart have Linear Y-Axis.

During debug came to know that, if I scroll on X-Axis of Plot1, internally i found that - Mouse position gets captured and further converted in the proper date time values (Double) and function ZoomAt(Factor, X) gets called. where X is nothing but the datetime values (Double). 

As the Mouse position get calculated or taken in consideration to calculate the DataPoint values for Zooming the Plot, the position of the Plot2 doesn't get calculated as mouse is not even over the Plot2.

Is it Possible to do in OxyPlot? Please suggest.

Thanks & Regards


oxijen wrote at 2013-05-30 17:13:


I'm stuck too in datetime point (Silverlight Project)...
Can you send sample xaml and code?

i'm succeed to getting line chart on screen but my datetime values (x axes) appears in double.



<oxyS:Plot x:Name="Plot1" Grid.Row="1" Model="{Binding PlotModel}" Width="1024" Height="768"/>


var tmp = new PlotModel("Project");

OxyPlot.Series.LineSeries ls = new OxyPlot.Series.LineSeries("Values");


PlotModel = tmp;

foreach (var item in List)
ls.Points.Add(new OxyPlot.DataPoint(TimeSpanAxis.ToDouble(ts), Convert.ToDouble(olcum[1])));

objo wrote at 2013-06-08 11:17:

You need to add a horizontal DateTimeAxis, otherwise you will get a LinearAxis by default.