jqplot date axis from timestamp

I'm trying to get a x-axis with dates on it. The x data is a timestamp. Somehow I can't get it right.

The line has values like:

line = [[1334856823000, 2], [1334856853000, 1], [1334856883000, 0], [1334856913000,4],[1334856914000, 13], [1334856943000, 16], [1334856973000, 23], [1334857003000, 24], [1334857033000, 36], [1334857063000, 14], [1334857093000, 1]]

            $.jqplot('container', [line],
              { title: "Snelheidsgrafiek",
                axes: {
                  xaxis: {
                    rederer: $.jqplot.DateAxisRenderer,
                    rendererOptions: {tickRenderer: $.jqplot.canvasAxisTickRenderer},
                    tickOptions: {formatString: '%H:%M'}
                  },
                  yaxis: {
                    min: 0
                  }
                }
            });

Now it displays just %H:%M as the label. I tried many variations, but can't get it going.

Answers


Here it goes. Your problem is that the tickRenderer: $.jqplot.CanvasAxisTickRenderer should be on the same level as renderer, and not inside rendererOptions.

Please see the jsfiddle.

EDIT

Also you are missing an import of CanvasTextRenderer which the CanvasAxisTickRenderer uses and you forget to start with a capital letter C, like so: $.jqplot.CanvasAxisTickRenderer.


give this a try. this is copied in a hurry out of a working code. I stripped out a lot to give you a better overview. Maybe it is missing a bracket here and there but it should give you an idea of what to set up and how the affected variables. This works 100% for sure.

Make sure to include the needed Javascript libraries aswell.

If you need more details, let me know...

<script type="text/javascript">(function($) {
            var indizes;
            var plot1; 
            $(document).ready(function() {
                $(function() {
                   $(document).ready(function() {
indizes = [["2011-12-31",0.00],["2012-01-31",6.25],["2012-02-28",12.56],["2012-03-31",17.62],["2012-04-30",18.72],["2012-05-31",12.44],["2012-06-30",15.14],["2012-07-31",20.27],["2012-08-31",20.82],["2012-09-30",24.47],["2012-10-31",25.68],["2012-11-30",26.41],["2012-12-31",28.43],["2013-01-31",32.76],["2013-02-28",36.82],["2013-03-31",42.29],["2013-04-30",43.14],["2013-05-31",45.87],["2013-06-30",40.68],["2013-07-31",50.58],["2013-08-31",46.00],["2013-09-29",56.20],["2013-10-02",55.40]];                            ;

            draw_first();

            function draw_first() {
                plot1 = $.jqplot("chartdiv", [indizes], {
                    seriesColors: ["rgba(0, 189, 255, 1)"],
                    title: '',
                    grid: {
                        background: 'rgba(57,57,57,0.0)',
                        drawBorder: false,
                        shadow: false,
                        gridLineColor: '#333',
                        gridLineWidth: 1
                    },
                    legend: {
                        show: true,
                        placement: 'inside',
                        location: 'nw'
                    },
                    seriesDefaults: {
                        rendererOptions: {
                            smooth: false,
                            animation: {
                                show: true
                            }
                        },
                        showMarker: true,
                        pointLabels: {show: pointlabels},
                        markerOptions: {
                            style: 'filledSquare'
                        }
                    },
                    series: [
                        {
                            label: 'Indizes'
                        }
                    ],
                    axesDefaults: {
                        rendererOptions: {
                            baselineWidth: 2,
                            baselineColor: '#444444',
                            drawBaseline: false
                        }
                    },
                    axes: {
                        xaxis: {
                            renderer: $.jqplot.DateAxisRenderer,
                            tickRenderer: $.jqplot.CanvasAxisTickRenderer,
                            tickOptions: {
                                formatString: "%b",
                                angle: 0,
                                textColor: '#888'
                            },
                            min: "2012-10-01",
                            max: "2013-10-31",
                            tickInterval: "1 month",
                            drawMajorGridlines: true
                        },
                        yaxis: {
                            renderer: $.jqplot.LinearAxisRenderer,
                            pad: 0,
                            rendererOptions: {
                                minorTicks: 1
                            },
                            drawMajorGridlines: false,
                            tickOptions: {
                                formatString: function() {
                                    return '%#.1f %';
                                }(),
                                showMark: false,
                                textColor: '#888'
                            }
                        }
                    }
                });
            } 

        })(jQuery);</script>

Need Your Help

Find location last object on PDF page using iTextSharp

itextsharp

How can I find the location and the height of the last object on a PDF page? There is no footer. I'm wanting to stamp a template below the last item. Not in the footer but directly below the las...

c# - assigning methods to dynamically created controls

c# events plugins delegates add-in

I'm designing an application that supports plugin development. Its more of a learning exercise.