JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://bitbucket.org/cleonello/jqplot/raw/b5a7796a9ebf/src/jquery.jqplot.js"></script>
<script src="https://bitbucket.org/cleonello/jqplot/raw/b5a7796a9ebf/src/plugins/jqplot.dateAxisRenderer.js"></script>
<script src="https://bitbucket.org/cleonello/jqplot/raw/b5a7796a9ebf/src/plugins/jqplot.categoryAxisRenderer.js"></script>
<script src="https://bitbucket.org/cleonello/jqplot/raw/b5a7796a9ebf/src/plugins/jqplot.canvasAxisTickRenderer.js"></script>
<script src="https://bitbucket.org/cleonello/jqplot/raw/b5a7796a9ebf/src/plugins/jqplot.canvasTextRenderer.js"></script>
<script src="https://bitbucket.org/cleonello/jqplot/raw/b5a7796a9ebf/src/plugins/jqplot.canvasAxisLabelRenderer.js"></script>
<script src="https://bitbucket.org/cleonello/jqplot/raw/b5a7796a9ebf/src/plugins/jqplot.pointLabels.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.9/jquery.jqplot.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.9/plugins/jqplot.dateAxisRenderer.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.9/plugins/jqplot.canvasTextRenderer.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.9/plugins/jqplot.canvasAxisTickRenderer.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.9/jquery.jqplot.min.css">
<div id="chart1"></div>
JavaScript
$(document).ready(function(){
var line1=[
['2013-07-01 4:00PM',4],
['2013-07-03 4:00PM',6.5],
['2013-07-08 4:00PM',5.7],
['2013-07-16 4:00PM',9],
['2013-07-18 4:00PM',8.2]
];
var dates = [
'2013-07-01',
'2013-07-02',
'2013-07-03',
'2013-07-04',
'2013-07-05',
'2013-07-06',
'2013-07-07',
'2013-07-08',
'2013-07-09',
'2013-07-10',
'2013-07-11',
'2013-07-12',
'2013-07-13',
'2013-07-14',
'2013-07-15',
'2013-07-16',
'2013-07-17',
'2013-07-18',
];
var nbWeeks = Math.floor(dates.length/7);
var xTicks = [];
xTicks.push(dates[0]);
for(var i = 1; i<=nbWeeks; i++)
xTicks.push(dates[i*7]);
xTicks.push(dates[dates.length-1]);
/*var xTicks = [
'2013-07-01', '2013-07-08',
'2013-07-15', '2013-07-18'
];*/
var plot1 = $.jqplot('chart1', [line1],
{
title:'Default Date Axis',
axes:{xaxis:{
renderer:$.jqplot.DateAxisRenderer,
rendererOptions:{ tickRenderer:$.jqplot.CanvasAxisTickRenderer
},
ticks: xTicks,
tickOptions: {
angle: -90,
formatString: '%d/%m/%Y %H:%M'
},
}
}
});
});