jqPlot Examples Baseline
This particular fiddle is setup so that basic jqPlot examples can be created. It's, at this point, a generic template setup in a state that will allow a simple fork to get you up and running faster.
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=" http://www.prioritymarketers.com/jqplot/src/plugins/jqplot.cursor.js"></script>
<script language="javascript" type="text/javascript" src="https://bitbucket.org/cleonello/jqplot/raw/b5a7796a9ebf/src/plugins/jqplot.canvasTextRenderer.js"></script>
<script language="javascript" type="text/javascript" src="https://bitbucket.org/cleonello/jqplot/raw/b5a7796a9ebf/src/plugins/jqplot.canvasAxisLabelRenderer.js"></script>
<script language="javascript" type="text/javascript" src="https://bitbucket.org/cleonello/jqplot/raw/b5a7796a9ebf/src/plugins/jqplot.enhancedLegendRenderer.js"></script>
<div id="CustomerSurveyLineGraph" style="margin-top:20px; margin-left:20px; width:600px; height:300px;"></div>
JavaScript
var plotCustomerSurveyGraph = $.jqplot('CustomerSurveyLineGraph', [[0,1,3,2,3,0,1,3,1,2,3,1,2], [1,2,3,1,1,2,2,3,3,1,2,1,2], [1,2,3,4,4,3,2,2,1,4,3,2,2], [0,1,3,3,1,2,2,1,1,0,0,1,2],[2,2,3,3,4,4,0,2,0,1,1,3,3], [2,2,3,3,1,1,0,1,0,2,3,3,1], [1,3,1,4,3,3,1,2,3,4,1,2,1], [2,1,3,2,1,2,0,1,2,4,2,1,0]],
{
axes:
{
xaxis:
{
label: "Date (Week)",
ticks: ['1','2','3','4','5','6','7','8','9','10','11','12','13']
},
yaxis:
{
label: 'Rating',
labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
ticks: ['0','1','2','3']
}
},
title:'Customer Survey (Last 3 Months)',
width: 480, height: 480,
legend:{
renderer: $.jqplot.EnhancedLegendRenderer,
show:true,
location: 'ne',
showSwatches: true,
placement: 'outsideGrid'
},
seriesDefaults:
{
rendererOptions: {smooth: true}
},
series:[
{
lineWidth:1,
label:'Staff Appearance',
markerOptions: { size:7, style:'dimaond' },
},
{
lineWidth:1,
label:'Staff Product Knowledge',
markerOptions: { size: 7, style:"dimaond" }
},
{
lineWidth:1,
label:'Staff Friendliness',
markerOptions: { size:7, style:"filledSquare" }
},
{
lineWidth:1,
label:'Staff Wait Time Acceptable',
markerOptions: { size:7, style:"filledSquare" }
},
{
lineWidth:1,
...