JSFiddle - React, Tailwind, and code Playground

by AnthonyLeGovic

HTML

<link rel="stylesheet" href="http://www.prioritymarketers.com/jqplot/src/jquery.jqplot.css">
<script src="http://www.prioritymarketers.com/jqplot/src/jquery.jqplot.js"></script>
<script src="http://www.prioritymarketers.com/jqplot/src/plugins/jqplot.dateAxisRenderer.js"></script>
<div id="chart2" style="height:250px; width:596px;"></div>

JavaScript

$(document).ready(function(){
  /**
     Tu as besoin des fichiers 
      - jqplot/src/jquery.jqplot.css
      - jqplot/src/jquery.jqplot.js
      - jqplot/src/plugins/jqplot.dateAxisRenderer.js
    **/
  var line1 = [
      ['2014-01-22 7:00AM',0],
      ['2014-01-22 7:15AM',0],
      ['2014-01-22 7:15AM',1],
      ['2014-01-22 11:15AM',1],
      ['2014-01-22 11:15AM',0],
      ['2014-01-22 12:00PM',0],
      ['2014-01-22 12:00PM',1],
      ['2014-01-22 3:15PM',1],
      ['2014-01-22 3:15PM',0],
      ['2014-01-22 7:00PM',0],
      ['2014-01-22 7:00PM',1],
      ['2014-01-22 8:15PM',1],
      ['2014-01-22 8:15PM',0],
      ['2014-01-22 9:00PM',0],
      ['2014-01-22 9:00PM',1],
      ['2014-01-22 11:00PM',1],
      ['2014-01-22 11:00PM',0],
      ['2014-01-22 11:30PM',0]]; 

  var plot3 = $.jqplot('chart2', [line1], {
    axes:{
      xaxis:{
        renderer:$.jqplot.DateAxisRenderer,
        tickOptions: {formatString: '%d/%m/%Y %H:%M'},
          min: '2014-01-22 6:30AM',
          max: '2014-01-22 11:45PM',
          numberTicks: 5          
      }
    }
  });
});