Problems with tickInterval in jqPlot

Question

I'm new to jqplot but am using it on a very important project. I am trying to have the x-axis have one 'tick' for each day -- as of now, there are multiple ones. Here is a screenshot:

Here is the code (in which I also added a min and max as this post referred):

 $(document).ready(function(){

                            var ajaxDataRenderer = function(url, plot, options) {
                                var ret = null;
                                $.ajax({
                                    async: false,
                                    url: url,
                                    type: "GET",
                                    dataType:"json",
                                    data: {metricName: ""},
                                    success: function(data) {
                                        ret = data;
                                    },
                                    error:function (xhr, ajaxOptions, thrownError){
                                        alert(xhr.responseText);
                                    }    
                                });
                                return ret;
                            };

                            //var jsonurl = "reports/reportData.json";
                            var jsonurl = "tenant/metrics/get.json";

                            var today = new Date();

                            var plot2 = $.jqplot('chart2', jsonurl,{
                                title: "",
                                dataRenderer: ajaxDataRenderer,
                                dataRendererOptions: {unusedOptionalUrl: jsonurl},
                                axes: {
                                    xaxis: {
                                        'numberTicks' : 7,
                                        min: '2012-10-05',
                                        max: today,
                                        renderer:$.jqplot.DateAxisRenderer,
                                        rendererOptions:{tickRenderer:$.jqplot.CanvasAxisTickRenderer},
                                        tickInterval: '1 day',
                                        tickOptions:{formatString:'%Y-%#m-%#d'

                                        }
                                        //rendererOptions: {sdaTickInterval: [1, 'month']}

                                    },
                                    yaxis: {
                                        label: "MB",
                                        tickOptions:{formatString:'%d '},
                                        // Comment the next line out to allow negative values (and therefore rounded ones)
                                        min: 0
                                    }
                                }   
                            });
                        });

Even if I manually set the clicks like this:

 $(document).ready(function(){

                            var ajaxDataRenderer = function(url, plot, options) {
                                var ret = null;
                                $.ajax({
                                    async: false,
                                    url: url,
                                    type: "GET",
                                    dataType:"json",
                                    data: {metricName: ""},
                                    success: function(data) {
                                        ret = data;
                                    },
                                    error:function (xhr, ajaxOptions, thrownError){
                                        alert(xhr.responseText);
                                    }    
                                });
                                return ret;
                            };

                            //var jsonurl = "reports/reportData.json";
                            var jsonurl = "tenant/metrics/get.json";

                            var today = new Date();

                            var plot2 = $.jqplot('chart2', jsonurl,{
                                title: "",
                                dataRenderer: ajaxDataRenderer,
                                dataRendererOptions: {unusedOptionalUrl: jsonurl},
                                axes: {
                                    xaxis: {
                                        'numberTicks' : 7,
                                        min: '2012-10-05',
                                        max: today,
                                        renderer:$.jqplot.DateAxisRenderer,
                                        rendererOptions:{tickRenderer:$.jqplot.CanvasAxisTickRenderer},
                                        ticks: ['2012-10-05','2012-10-06','2012-10-07','2012-10-08', today],
                                        tickOptions:{formatString:'%Y-%#m-%#d'

                                        }
                                        //rendererOptions: {sdaTickInterval: [1, 'month']}

                                    },
                                    yaxis: {
                                        label: "MB",
                                        tickOptions:{formatString:'%d '},
                                        // Comment the next line out to allow negative values (and therefore rounded ones)
                                        min: 0
                                    }
                                }   
                            });
                        });

The marks do not match up to their correct dates. Here is a screenshot:

Is there a sane way to do this? I want each x-axis tick to be only one date, and the data entry mark to be on that tick's axis.

This is driving me crazy! Please help!

Also, here is my json

[[["2012-10-05 10:57:16AM", 0],["2012-10-05 11:02:14AM", 2449],["2012-10-08 08:17:47AM", 9639],["2012-10-08 08:17:53AM", 224768],["2012-10-09 07:43:19AM", 9640],["2012-10-09 07:44:01AM", 224769]]]

Answer 1

Your format string isn't correct as it doesn't include the timestamp; try changing it to the following:

tickOptions:{formatString:'%y-%#m-%#d%n%#I:%#M:%#S%p}

Alternatively, if you don't need the timestamp, leave your format string as is and remove the timestamp from the JSON.

EDIT

If the above format string doesn't work, try manipulating the values to match using the values as below:

// Year
%Y  2008
%y  08

// Month
%m  09
%#m  9
%B  September
%b  Sep

// Day
%d  05
%#d  5
%e  5
%A  Sunday
%a  Sun
%w  0, 0 = Sunday, 6 = Saturday
%o  th, The ordinal suffix string following the day of the month

// Hour
%H  23
%#H  3
%I   11
%#I  3
%p  PM, AM or PM

// Minute
%M  09
%#M  9

// Second
%S  02
%#S  2
%s  1206567625723, Unix timestamp, seconds past 1970-01-01 00:00:00

// Millisecond
%N  008
%#N  8

I hope this helps!