Search code examples
jqueryflot

Guidance with jquery flot line chart

I am attempting to display a simple line chart with points using jquery flot. I am not sure where I am going wrong but I cant get any points to show up. Here is what I am doing.

var visits = <?php echo json_encode($visits); ?>;
var views = <?php echo json_encode($pageViews); ?>;
var dates = <?php echo json_encode($dates); ?>;
$('#site_statistics').css({
    height: '180px',
    width: '100%'
});

$.plot($('#site_statistics'),[
        { label: 'Visits', data: visits },
        { label: 'Pageviews', data: views }
    ], {
    grid:{
        hoverable:true,
        backgroundColor:'transparent'
    },
    xaxis: {
        mode: 'time',
        timeformat:'%m/%d/%y',
        minTickSize: [1,'day'],
        min: (new Date(dates[0])).getTime(),
        max: (new Date(dates[30])).getTime()
    },
    yaxis: {
        mode:'number',
        tickSize:1,
        min: 0,
        tickColor:'#fff'
    },
    legend: {
        position:'ne',
        backgroundOpacity:0
    },
    series: {
        lines: {show:true},
        points: {show:true}
    }
});

This is the result I am getting.

enter image description here

I have verified that my arrays have data through console.log() so for some reason (probably something simple that I am missing) the plugin wont pull the data into the chart. Any guidance will be very helpful.

Thanks!

EDIT

Per request Here is the data being used for views

[{"09-20-2016":"2654"},{"09-21-2016":"2430"},{"09-22-2016":"2217"},{"09-23-2016":"2047"},{"09-24-2016":"2152"},{"09-25-2016":"2502"},{"09-26-2016":"2234"},{"09-27-2016":"2020"},{"09-28-2016":"1978"},{"09-29-2016":"2080"},{"09-30-2016":"1632"},{"10-01-2016":"1934"},{"10-02-2016":"2210"},{"10-03-2016":"2068"},{"10-04-2016":"1738"},{"10-05-2016":"1787"},{"10-06-2016":"1694"},{"10-07-2016":"1583"},{"10-08-2016":"1906"},{"10-09-2016":"1936"},{"10-10-2016":"2188"},{"10-11-2016":"1892"},{"10-12-2016":"2036"},{"10-13-2016":"1970"},{"10-14-2016":"2044"},{"10-15-2016":"2109"},{"10-16-2016":"2425"},{"10-17-2016":"2554"},{"10-18-2016":"2332"},{"10-19-2016":"2177"},{"10-20-2016":"723"}]

Data for visits

[{"09-20-2016":"1013"},{"09-21-2016":"871"},{"09-22-2016":"911"},{"09-23-2016":"845"},{"09-24-2016":"924"},{"09-25-2016":"1028"},{"09-26-2016":"877"},{"09-27-2016":"755"},{"09-28-2016":"793"},{"09-29-2016":"867"},{"09-30-2016":"747"},{"10-01-2016":"913"},{"10-02-2016":"1023"},{"10-03-2016":"971"},{"10-04-2016":"918"},{"10-05-2016":"793"},{"10-06-2016":"815"},{"10-07-2016":"813"},{"10-08-2016":"954"},{"10-09-2016":"1047"},{"10-10-2016":"1097"},{"10-11-2016":"938"},{"10-12-2016":"1022"},{"10-13-2016":"915"},{"10-14-2016":"1024"},{"10-15-2016":"1168"},{"10-16-2016":"1174"},{"10-17-2016":"1086"},{"10-18-2016":"1106"},{"10-19-2016":"1059"},{"10-20-2016":"364"}]

Data for dates

[["09-20-2016"],["09-21-2016"],["09-22-2016"],["09-23-2016"],["09-24-2016"],["09-25-2016"],["09-26-2016"],["09-27-2016"],["09-28-2016"],["09-29-2016"],["09-30-2016"],["10-01-2016"],["10-02-2016"],["10-03-2016"],["10-04-2016"],["10-05-2016"],["10-06-2016"],["10-07-2016"],["10-08-2016"],["10-09-2016"],["10-10-2016"],["10-11-2016"],["10-12-2016"],["10-13-2016"],["10-14-2016"],["10-15-2016"],["10-16-2016"],["10-17-2016"],["10-18-2016"],["10-19-2016"],["10-20-2016"]]
Solution

  • It turns out that your date format in view section is not inline with the accepted format.

    $(document).ready(function() {

  var viewsList = [{
    "09-20-2016": "2654"
  }, {
    "09-21-2016": "2430"
  }, {
    "09-22-2016": "2217"
  }, {
    "09-23-2016": "2047"
  }, {
    "09-24-2016": "2152"
  }, {
    "09-25-2016": "2502"
  }, {
    "09-26-2016": "2234"
  }, {
    "09-27-2016": "2020"
  }, {
    "09-28-2016": "1978"
  }, {
    "09-29-2016": "2080"
  }, {
    "09-30-2016": "1632"
  }, {
    "10-01-2016": "1934"
  }, {
    "10-02-2016": "2210"
  }, {
    "10-03-2016": "2068"
  }, {
    "10-04-2016": "1738"
  }, {
    "10-05-2016": "1787"
  }, {
    "10-06-2016": "1694"
  }, {
    "10-07-2016": "1583"
  }, {
    "10-08-2016": "1906"
  }, {
    "10-09-2016": "1936"
  }, {
    "10-10-2016": "2188"
  }, {
    "10-11-2016": "1892"
  }, {
    "10-12-2016": "2036"
  }, {
    "10-13-2016": "1970"
  }, {
    "10-14-2016": "2044"
  }, {
    "10-15-2016": "2109"
  }, {
    "10-16-2016": "2425"
  }, {
    "10-17-2016": "2554"
  }, {
    "10-18-2016": "2332"
  }, {
    "10-19-2016": "2177"
  }, {
    "10-20-2016": "723"
  }];

  var visits = [{
    "09-20-2016": "1013"
  }, {
    "09-21-2016": "871"
  }, {
    "09-22-2016": "911"
  }, {
    "09-23-2016": "845"
  }, {
    "09-24-2016": "924"
  }, {
    "09-25-2016": "1028"
  }, {
    "09-26-2016": "877"
  }, {
    "09-27-2016": "755"
  }, {
    "09-28-2016": "793"
  }, {
    "09-29-2016": "867"
  }, {
    "09-30-2016": "747"
  }, {
    "10-01-2016": "913"
  }, {
    "10-02-2016": "1023"
  }, {
    "10-03-2016": "971"
  }, {
    "10-04-2016": "918"
  }, {
    "10-05-2016": "793"
  }, {
    "10-06-2016": "815"
  }, {
    "10-07-2016": "813"
  }, {
    "10-08-2016": "954"
  }, {
    "10-09-2016": "1047"
  }, {
    "10-10-2016": "1097"
  }, {
    "10-11-2016": "938"
  }, {
    "10-12-2016": "1022"
  }, {
    "10-13-2016": "915"
  }, {
    "10-14-2016": "1024"
  }, {
    "10-15-2016": "1168"
  }, {
    "10-16-2016": "1174"
  }, {
    "10-17-2016": "1086"
  }, {
    "10-18-2016": "1106"
  }, {
    "10-19-2016": "1059"
  }, {
    "10-20-2016": "364"
  }];

  var dates = [
    ["09-20-2016"],
    ["09-21-2016"],
    ["09-22-2016"],
    ["09-23-2016"],
    ["09-24-2016"],
    ["09-25-2016"],
    ["09-26-2016"],
    ["09-27-2016"],
    ["09-28-2016"],
    ["09-29-2016"],
    ["09-30-2016"],
    ["10-01-2016"],
    ["10-02-2016"],
    ["10-03-2016"],
    ["10-04-2016"],
    ["10-05-2016"],
    ["10-06-2016"],
    ["10-07-2016"],
    ["10-08-2016"],
    ["10-09-2016"],
    ["10-10-2016"],
    ["10-11-2016"],
    ["10-12-2016"],
    ["10-13-2016"],
    ["10-14-2016"],
    ["10-15-2016"],
    ["10-16-2016"],
    ["10-17-2016"],
    ["10-18-2016"],
    ["10-19-2016"],
    ["10-20-2016"]
  ];
  //Format the data into Flot compatabile data.
  var viewData = [];
  viewsList.forEach(function(views) {
    for (var view in views) {
      if (views.hasOwnProperty(view)) {
        views[view] = parseInt(views[view], 10);
        viewData.push([Date.parse(view), views[view]]);
      }
    }
  });

  $('#site_statistics').css({
    height: '180px',
    width: '99%'
  });

  $.plot($('#site_statistics'), [{
    label: 'Pageviews',
    data: viewData
  }], {
    grid: {
      hoverable: true,
      backgroundColor: 'transparent'
    },
    xaxis: {
      mode: 'time',
      timeformat: '%m-%d-%y',
      minTickSize: [1, 'day'],
      min: (new Date(dates[0])).getTime(),
      max: (new Date(dates[30])).getTime()
    },
    yaxis: {
      mode: 'number',
      tickSize: 1000,
      min: 0,

      tickColor: '#fff'
    },
    legend: {
      position: 'ne',
      backgroundOpacity: 0
    },
    series: {
      lines: {
        show: true
      },
      points: {
        symbol: "circle",
        fillColor: "#058DC7"
      }
    }
  });
});
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<script src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.time.min.js"></script>

<div id="site_statistics"></div>