Search code examples
jqueryflot

Flot x-axsis is not plotting correctly ,only one data point is plotted


$(function () {
      var data = [[
    			[1456819200000,199.8],
                [1456905600000,219.24],
                [1456992000000,589.68],
                [1457078400000,362.88],
                [1457337600000,145.56],
                [1457424000000,589.68],
                [1457510400000,60.48],
                [1457596800000,547.2],
                [1457938800000,239.4],
      
      var ticks = data[0].map(function (point) { return point[0]; });
     $.plot($("#placeholder"), [data],{	
       xaxis: {
         mode: "time",
         ticks: ticks,
         minTickSize: [1,"day"],
         min: 1456819200000
         max: 1459321200000
         timeformat: "%d"
       },
       series: {
         lines: {
           show: true,
         },
         points: {
           show: true
         },
       },
       legend: {
         show: false
       },
       yaxis: {
         ticks: 5,
         tickDecimals: 0,
       }
     });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://people.iola.dk/olau/flot/jquery.flot.js"></script>
<div id="placeholder" style="width:600px;height:300px;"></div>

I am following - http://jsfiddle.net/JMBucknall/eQ2eb/ fiddle

I am getting only one data point on chart


Solution

  • Since you mention me, I decided to help out and find the bugs. Let me count the ways:

    1. Put the script tag for jQuery before that of flot.js

    2. Add a script tag for flot.time.js after them both.

    3. You declare a data source that's exactly of the right format (an array of data series, each of which is an array of chart points, each of which is an array containing an x and a y value) for $.plot(), yet you just throw in something called [contract]. It should be $.plot("#placeholder", data, configuration); I've no idea where contract came from.

    4. As has been mentioned your code has some objects called edate and sdate from which you're calling some functions. They are not defined anywhere in this code. I replaced them with your commented values.

    5. In order to actually see this chart (which you've declared as white on a default white background, I changed the colors property of the configuration object from white to black.

    And that would be it apart from the fact that these days I'd write something like this to set the ticks array:

    var ticks = data[0].map(function (point) { return point[0]; });