asked on

Jquery flot charts not showing any data points

I'm trying to make a chart with jquery.flot using Google Analytics data through their API. I've followed the examples I've found to convert time series data but I'm not getting any data points on the chart.

Here is how I'm setting up the chart:

       function doChart(myOutput) {

var options = {
              grid: {
              hoverable: true,
              clickable: false,
              borderWidth: 1
              },
lines: { show: true },
              points: { show: true },
              xaxis:
{
mode: "time",
timeformat: "%m/%d",
tickLength: 1,
min: new Date(lastNDays(-30)).getTime(),
max: new Date().getTime()
},
              yaxis: {
              max: maxVal,
min: 0,
autoscaleMargin: 0.1
              },
bars: {
show: true,
barWidth: 0.5,
align: "center"
}

              };
$.plot("#chart", myOutput, options);
}

And here is myOutput once I've got my result set back from google and converted the date into UTC:

myArray = [[1360911600000, 156], [1360998000000, 147], [1361084400000, 151], [1361170800000, 168], [1361257200000, 31], [1361343600000, 28], [1361430000000, 122], [1361516400000, 157], [1361602800000, 143], [1361689200000, 117], [1361775600000, 178], [1361862000000, 28], [1361948400000, 28], [1362034800000, 126], [1362121200000, 122], [1362207600000, 145], [1362294000000, 134], [1362121200000, 135], [1362207600000, 26], [1362294000000, 24], [1362380400000, 167], [1362466800000, 139], [1362553200000, 666], [1362639600000, 199], [1362726000000, 156], [1362812400000, 39], [1362898800000, 32], [1362985200000, 154], [1363071600000, 105], [1363158000000, 142], [1363244400000, 0]];

What exactly am I doing wrong? I'm seeing the dates across the bottom but no points on the graph...

Any help would be appreciated!!!

leakim971

Look like your axises options are not good, check this page :
http://jsfiddle.net/n5fy7/

myArray = [[1360911600000, 156], [1360998000000, 147], [1361084400000, 151], [1361170800000, 168], [1361257200000, 31], [1361343600000, 28], [1361430000000, 122], [1361516400000, 157], [1361602800000, 143], [1361689200000, 117], [1361775600000, 178], [1361862000000, 28], [1361948400000, 28], [1362034800000, 126], [1362121200000, 122], [1362207600000, 145], [1362294000000, 134], [1362121200000, 135], [1362207600000, 26], [1362294000000, 24], [1362380400000, 167], [1362466800000, 139], [1362553200000, 666], [1362639600000, 199], [1362726000000, 156], [1362812400000, 39], [1362898800000, 32], [1362985200000, 154], [1363071600000, 105], [1363158000000, 142], [1363244400000, 0]];
var options = {
                      grid: {
                          hoverable: true,
                          clickable: false,
                          borderWidth: 1
                      },
                  lines: { show: true },
                      points: { show: true },
                      
                  bars: {
                    show: true,
                    barWidth: 0.5,
                    align: "center"
                  }   

                  };

$(document).ready(function() {
    $.plot(
     $("#flot-example-1"),
     [
       {
         label: "Series 1",
         data: myArray ,
         lines: {show: true},
         points: {show: true}
       }
     ],
     options
    );
})

Open in new window

rpzach

ASKER

Hmm, well that worked to get the data back but now the time series stuff is gone.... any ideas? I tried to put the xasis info in the array w/ the data stuff but that doesnt seem to work either...

ASKER CERTIFIED SOLUTION

leakim971

membership

Create a free account to see this answer

Signing up is free and takes 30 seconds. No credit card required.

See answer

rpzach

ASKER

Hmm, interesting that worked... it appears the order matters here that xaxis has to be first in the options array perhaps? Thanks for the help!