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

Sunny picture Sunny · Jun 15, 2012 · Viewed 10.7k times · Source

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

Problem :

please check this :

enter image description here

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

Jason Higgins picture Jason Higgins · Nov 9, 2012

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!