minTickSize example for flot

http://stackoverflow.com/questions/12908222/put-only-integers-in-x-and-y-axis-of-bar-and-line-graphs-flot

by oterox

HTML

<script src="http://people.iola.dk/olau/flot/jquery.flot.js"></script>
<script src="html2canvas.js"></script>
<script src="jspdf-min.js"></script>
<script src="flashcanvas.js"></script>
<script src="http://yourjavascript.com/04131271074/html2canvas.js"></script>
<script src="http://yourjavascript.com/47112101241/jspdf-min.js"></script>

<button id="id_generate_pdf">Click</button>
<div class="col-md-6">
  <div id="flot-placeholder" class="wrapper-chart"></div>
</div>
<div class="col-md-6">
  <div id="flot-placeholder1" class="wrapper-chart"></div>
</div>
<div class="label">Wind direction</div>

CSS

.wrapper-chart {
  width: 550px;
  height: 450px;
}

canvas.base {
  background-color: white;
}

.label {
  text-align: center;
}

JavaScript

$(function() {
  var data_direction_hour = [];
  var data_speed_hour = [];
  var dataset_hour;
  var totalPointsHour = 34;
  var updateIntervalHour = 600000;
  var now_hour = (new Date()).getTime() - 3600000 * 6;

  function GetDataHour() {
    if (data_direction_hour.length == totalPointsHour) {
      data_direction_hour.shift();
      data_speed_hour.shift();
    }
    while (data_direction_hour.length < totalPointsHour) {
      var datetime = new Date();
      //console.log("Test " + new Date(now_hour).toString());
      var y = Math.random() * 10;
      now_hour += updateIntervalHour;
      var temp = [now_hour, y];
      data_direction_hour.push(temp);

      var y_speed = Math.random() * 5;
      var temp_speed = [now_hour, y_speed];
      data_speed_hour.push(temp_speed);
    }
    var first_hour = data_speed_hour[0][0];
    options_hour.xaxis.ticks = [
      first_hour,
      first_hour + 3600000 * 1,
      first_hour + 3600000 * 2,
      first_hour + 3600000 * 3,
      first_hour + 3600000 * 4,
      first_hour + 3600000 * 5,
      first_hour + 3600000 * 6
    ];
  }

  var options_hour = {
    series: {
      lines: {
        show: true,
        lineWidth: 1.2
      }
    },
    xaxis: {
      mode: "time",
      timezone: "browser",
      ticks: 6,
      ticks: [
        now_hour,
        now_hour + 3600000 * 1,
        now_hour + 3600000 * 2,
        now_hour + 3600000 * 3,
        now_hour + 3600000 * 4,
        now_hour + 3600000 * 5,
        now_hour + 3600000 * 6
      ],
      timeformat: "%H:%M"
    },
    yaxis: {
      ticks: [
        [0, 'NNW'],
        [1, 'NW'],
        [2, 'WNW'],
        [3, 'W'],
        [4, 'WSW'],
        [5, 'SW'],
        [6, 'SSW'],
        [7, 'S'],
        [8, 'SSE'],
        [9, 'SE'],
        [10, 'ESE'],
        [11, 'E'],
        [12, 'ENE'],
        [13, 'NE'],
        [14, 'NNE'],
        [15, 'N']
      ]
    },
    grid: {
      backgroundColor: 'white'
    }
  };

  function update_hour() {
   ...