JSFiddle - React, Tailwind, and code Playground
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.meterGaugeRenderer.js"></script>
<script src="http://www.prioritymarketers.com/jqplot/src/plugins/jqplot.barRenderer.js "></script>
<script src="http://www.prioritymarketers.com/jqplot/src/plugins/jqplot.pieRenderer.js"></script>
<script src="http://www.prioritymarketers.com/jqplot/src/plugins/jqplot.categoryAxisRenderer.js"></script>
<script src="http://www.prioritymarketers.com/jqplot/src/plugins/jqplot.pointLabels.js"></script>
<script src="http://www.prioritymarketers.com/jqplot/src/plugins/jqplot.cursor.js"></script>
<script src="http://www.prioritymarketers.com/jqplot/src/plugins/jqplot.enhancedLegendRenderer.js"></script>
<script src="http://www.prioritymarketers.com/jqplot/src/plugins/jqplot.trendline.js"></script>
<script src="http://www.prioritymarketers.com/jqplot/src/plugins/jqplot.dateAxisRenderer.js"></script>
<script src="http://www.prioritymarketers.com/jqplot/src/plugins/jqplot.canvasTextRenderer.js"></script>
<script src="http://www.prioritymarketers.com/jqplot/src/plugins/jqplot.canvasAxisLabelRenderer.js "></script>
<script src="http://www.prioritymarketers.com/jqplot/src/plugins/jqplot.canvasAxisTickRenderer.js "></script>
<div id="how_long" class="plot0" style="width:500px;height:250px;"></div>
JavaScript
$('#how_long').empty();
var newHolidaysData;
var graphData = [['07/9/2014',500],['07/8/2014',900],
['07/7/2014',1200],['07/6/2014',500],
['07/5/2014',500],['07/4/2014',500],
['07/11/2014',3000]];
newHolidaysData = graphData;
console.log(newHolidaysData);
how_long_plot = $.jqplot('how_long', [newHolidaysData], {
seriesColors: [ "#F2A809"],
series: [
{
lineWidth: 5,
markerOptions: { style: 'circle' }
}
],
grid: {
background: 'transparent',
borderColor: '#ffffff',
borderWidth: 2.0
},
axes: {
xaxis: {
min: '07/1/2014',
tickInterval: '1 day',
renderer: $.jqplot.DateAxisRenderer,
labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
shadowAlpha: '0.1',
tickOptions: {
angle: 15,
showGridline: false,
color: '#ffffff',
formatString: '%b %#d'
}
},
yaxis: {
min: 0,
max:3500,
label: '',
labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
tickOptions: {
showGridline: false,
prefix: '$'
}
}
}
});