Dynamic Data Display : Change X-Axis date time format for graph

Question

I am working on wpf application where I am using Dynamic Data Display to show Graph. It works fine.

Problem :

please check this :

How can I use 12 hour time format instead of 24 hours? please suggest.

UPDATE :

This is my XAML for graph :

 <d3:ChartPlotter Name="plotter" Margin="3,121,5,0" Grid.RowSpan="2" Height="373" VerticalAlignment="Top" VerticalContentAlignment="Stretch" LegendVisible="False">
    <d3:ChartPlotter.HorizontalAxis>
        <d3:HorizontalDateTimeAxis Name="dateAxis" />                                    
    </d3:ChartPlotter.HorizontalAxis>                                                               
    <d3:VerticalAxisTitle FontFamily="Georgia" Content="Sensor Readings" />
    <d3:HorizontalAxisTitle FontFamily="Georgia" Content="Date" />
</d3:ChartPlotter>

CS :

var dates = (from dr in datDs.Tables[0].AsEnumerable()
                 select new
                 {
                     date = dr.Field<DateTime>("DateRecorded")
                 }.date).ToList();

var datesDataSource = new EnumerableDataSource<DateTime>(dates);
datesDataSource.SetXMapping(x => dateAxis.ConvertToDouble(x));

Answer 1

To change the way that the DateTime Axis applies a format, you will have to go into the source code for D3. In the file... DynamicDataDisplay/Charts/Axes/DateTime/DateTimeLabelProviderBase.cs

You will have to change the GetDateFormat method. Here is the example that will produce the result you desire:

protected virtual string GetDateFormat(DifferenceIn diff)
    {
        string format = null;

        switch (diff)
        {
            case DifferenceIn.Year:
                format = "yyyy";
                break;
            case DifferenceIn.Month:
                format = "MMM";
                break;
            case DifferenceIn.Day:
                format = "%d";
                break;
            case DifferenceIn.Hour:
                format = "hh:mm";
                break;
            case DifferenceIn.Minute:
                format = "%m";
                break;
            case DifferenceIn.Second:
                format = "ss";
                break;
            case DifferenceIn.Millisecond:
                format = "fff";
                break;
            default:
                break;
        }

        return format;
    }

The key is changing the case for the hour from upper case H (24 hour time) to lower case h (12 hour time). Hope this helps, and good luck with the rest of your charting project!

Answer 2

Here you can find a good example for usage:

http://msdn.microsoft.com/en-us/magazine/ff714591.aspx

And I think this could help you:

On the x-axis, I used the ConvertToDouble method to explicitly convert DateTime data into type double. On the y-axis, I simply wrote y => y (read as “y goes to y”) to implicitly convert the input int y to the output double y. I could have been explicit with my type mapping by writing SetYMapping(y => Convert.ToDouble(y). My choices of x and y for the lambda expressions’ parameters were arbitrary—I could have used any parameter names.

And the code:

var datesDataSource = new EnumerableDataSource<DateTime>(dates);
datesDataSource.SetXMapping(x => dateAxis.ConvertToDouble(x));

The Dynamic Data Display uses DateTime with your applications culture. So (as mentioned by weston) you have to set it to a cultere with 12 hour time format. This article explains how to do it:

How can i globally set the Culture in a WPF Application?

The code:

Thread.CurrentThread.CurrentCulture = new CultureInfo("en-US");

Answer 3

try this: (c#, DevExpress)

((XYDiagram)chartControl.Diagram).AxisX.DateTimeOptions.Format = DateTimeFormat.Custom;
((XYDiagram)chartControl.Diagram).AxisX.DateTimeOptions.FormatString = "yyyy-MM-dd";