jqPlot Line Chart
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.barRenderer.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="https://bitbucket.org/cleonello/jqplot/raw/b5a7796a9ebf/src/plugins/jqplot.dateAxisRenderer.js"></script>
<script src="https://raw.github.com/harbulot/jqplot/canvas_overlay_rectangle/plugins/jqplot.canvasOverlay.js"></script>
<div id="container">
<div id="chart"></div>
</div>
CSS
#container {
height:80px;
width:400px;
padding-left: 10px;
padding-right: 10px;
background-color:#bbbbbb; color: #000000;
/*background-color:#666666; color: #FFFFFF;*/
}
#chart {
height:100%;
width:100%;
margin: 10px,10px,10px,10px;
}
/*modify the jqplot css to force style inheritance*/
.jqplot-target
{
color: inherit;
}
JavaScript
$(document).ready(function() {
var chLines = [[
[new Date('01/01/2004 00:00:00'), 0],
[new Date('01/01/2005 00:00:00'), 0],
[new Date('12/31/2006 00:00:00'), 0],
[new Date('01/01/2007 00:00:00'), 0],
[new Date('03/31/2008 00:00:00'), 0],
[new Date('01/01/2009 00:00:00'), 0],
[new Date('06/30/2010 00:00:00'), 0],
[new Date('01/01/2011 00:00:00'), 0],
[new Date('01/01/2012 00:00:00'), 0],
[new Date('01/01/2013 00:00:00'), 0]
]];
$.jqplot('chart', chLines, {
grid: {
background: "rgba(0,0,0,0.0)",
drawBorder: false,
shadow: false
},
axesDefaults: {
rendererOptions: {
drawBaseline: false
}
},
seriesColors: ['rgba(0, 0, 0, 0.00)'],
series: [{
showMarker: false}],
tickOptions: {
formatString: '%d'
},
canvasOverlay: {
show: true,
objects: [
{horizontalLine: {
name: '1',
y: .2,
lineWidth: 4,
color: "#9966FF",
shadow: false,
lineCap: 'square',
xmin: new Date('01/01/2004 00:00:00'),
xmax: new Date('01/01/2014 00:00:00')
}},
{horizontalLine: {
name: '2',
y: .6,
lineWidth: 4,
color: "#6699FF",
shadow: false,
lineCap: 'square',
xmin: new Date('04/20/2006 00:00:00'),
xmax: new Date('06/30/2010 00:00:00')
}}
]
},
axes: {
xaxis: {
renderer: $.jqplot.DateAxisRenderer,
rendererOptions: {
tickRenderer:...