jqPlot not rendering

Question

I copy-and-pasted jqPlot code from the official website word for word and I got it to work inside an ajax call. Now, when I use data I received via my ajax call, I can't get it to render correctly anymore....

Literal string being passed back from AJAX:

[["2014/01/16 12:00:00 AM","215"],["2014/01/14 12:00:00 AM","225"],["2014/01/13 12:00:00 AM","219"],["2014/01/12 12:00:00 AM","218"],["2014/01/11 12:00:00 AM","220"]]

My ajax success call:

success: function (data) {
                    alert(data)

                    var plot2 = $.jqplot('weightChart', [data], {
                        title: 'Customized Date Axis',
                        gridPadding: { right: 35 },
                        axes: {
                            xaxis: {
                                renderer: $.jqplot.DateAxisRenderer,
                                tickOptions: { formatString: '%b %#d, %y' },
                                min: 'May 30, 2013',
                                tickInterval: '1 month'
                            }
                        },
                        series: [{ lineWidth: 4, markerOptions: { style: 'square' } }]
                    });
                }

Not sure what the problem is. Thanks all

EDIT:

I just created a a hardcoded array and used that in my jqplot call, and it worked. However, the data coming through the ajax call did not work.

Any suggestions?

Answer 1

i've tried your code, and it works. The strange thing is that you are using data which covers a period of a week in a range on the x-axis of about 6 months! Your data starts from Jan 2014 but you set the min value to May 2013. Furthermore, the values are all around 220 values and in the jqplot chart not always the autoscale works well (often when you are using a date format).

So i made some changes:

xaxis: {
    renderer: $.jqplot.DateAxisRenderer,
    tickOptions: { formatString: '%b %#d, %y' },
    //min: 'May 30, 2013',
    min: 'Dec 30, 2013',
    tickInterval: '1 week'
},
yaxis: {
    min: 0,
    max: 300        
}

and i hope this could help you with handling your data. The following figure is the result.