I am trying to show my labels at an angle. But I can't seem to get it working, I found someone telling me to use jqplot.canvasAxisTickRenderer.js but when I add a reference to it(https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.9/plugins/jqplot.canvasAxisTickRenderer.js) I get the following error: Uncaught TypeError: Cannot read property 'init' of undefined
Anyone have an idea of what I am doing wrong?
This is my code:
<script src="http://code.jquery.com/jquery-1.12.4.min.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.barRenderer.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.9/plugins/jqplot.categoryAxisRenderer.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.9/plugins/jqplot.pointLabels.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.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.enhancedLegendRenderer.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.9/plugins/jqplot.canvasAxisLabelRenderer.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.9/plugins/jqplot.canvasAxisTickRenderer.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.9/jquery.jqplot.min.css">
<style>
body {
background-color: #474744;
}
.jqplot-point-label {
color: white;
}
.jqplot-yaxis-tick {
right: 5px !important;
padding-right: 0px !important;
}
.jqplot-table-legend-swatch-outline {
border: 0 !important;
}
</style>
<div id="chart2" style="height:300px; width:600px;"></div>
<script>
$(document).ready(function () {
var somedata = [
[119, 42, 190, 168, 111, 90, 150, 545, 290, 107, 348, 34],
[6, 2, 36, 15, 26, 1, 31, 33, 10, 16, 3, 2],
[84, 27, 88, 89, 36, 45, 38, 193, 103, 14, 42, 1],
[29, 13, 66, 64, 49, 44, 81, 319, 177, 77, 303, 31]
];
$.jqplot('chart2', somedata, {
seriesDefaults: {
shadow: false,
renderer: $.jqplot.BarRenderer,
rendererOptions: {
barPadding: 2
},
pointLabels: {
show: false,
location: 'n',
ypadding: 0
}
},
axesDefaults: {
tickRenderer: $.jqplot.CanvasAxisTickRenderer ,
tickOptions: {
angle: -30,
fontSize: '10pt'
}
},
grid: {
backgroundColor: '#474744',
gridLineColor: 'white',
borderColor: 'white',
borderWidth: '1px',
shadow: false
},
series: [{
"label": "TOTAL"
},
{
"label": "MISSING",
pointLabels: {
show: true,
}
},
{
"label": "LATE"
},
{
"label": "ON TIME"
}
],
legend: {
show: true,
renderer: $.jqplot.EnhancedLegendRenderer,
location: 'e',
placement: "outside",
background: '#474744',
textColor: 'white',
border: 'none',
rendererOptions: {
numberRows: 4
}
},
axes: {
xaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
ticks: ["ACCESSORIES", "TAILORING", "JERSEY", "JEANS & PANTS", "UNITED", "SWEAT", "PLAY", "JDY", "OUTERWEAR", "WOVEN", "KNIT", "SHOES"],
label: 'Week',
pad: 1.1,
tickOptions: {
showGridline: false,
textColor: 'white'
},
labelOptions: {
fontFamily: 'Arial',
fontSize: '14pt',
textColor: 'white'
}
},
yaxis: {
label: 'Tickets',
renderer: $.jqplot.CanvasAxisTickRenderer,
tickOptions: {
textColor: 'white',
labelPosition: 'middle',
angle:-30
},
tickRenderer: $.jqplot.CanvasAxisTickRenderer,
labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
labelOptions: {
fontFamily: 'Arial',
fontSize: '14pt',
textColor: 'white'
}
}
}
});
});
</script>
Nevermind, I have no idea what fixed it. But this is the updated code that works:
<script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.8/jquery.jqplot.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.8/plugins/jqplot.logAxisRenderer.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.9/plugins/jqplot.canvasTextRenderer.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.9/plugins/jqplot.canvasAxisLabelRenderer.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.9/plugins/jqplot.canvasAxisTickRenderer.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.8/plugins/jqplot.dateAxisRenderer.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.8/plugins/jqplot.categoryAxisRenderer.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.8/plugins/jqplot.barRenderer.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.8/plugins/jqplot.enhancedLegendRenderer.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.8/plugins/jqplot.pointLabels.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.8/jquery.jqplot.min.css">
<style>
body {
background-color: #474744;
}
.jqplot-point-label {
color: white;
}
.jqplot-yaxis-tick {
right: 5px !important;
padding-right: 0px !important;
}
.jqplot-table-legend-swatch-outline {
border: 0 !important;
}
</style>
<div id="chart2" style="height:300px; width:600px;"></div>
<script>
$(document).ready(function(){
var line3 = [
[119, 42, 190, 168, 111, 90, 150, 545, 290, 107, 348, 34],
[6, 2, 36, 15, 26, 1, 31, 33, 10, 16, 3, 2],
[84, 27, 88, 89, 36, 45, 38, 193, 103, 14, 42, 1],
[29, 13, 66, 64, 49, 44, 81, 319, 177, 77, 303, 31]
];
var plot3 = $.jqplot('chart2', line3, {
seriesDefaults: {
shadow: false,
renderer: $.jqplot.BarRenderer,
rendererOptions: {
barPadding: 2
},
pointLabels: {
show: false,
location: 'n',
ypadding: 0,
color: 'white'
}
},
axesDefaults: {
tickRenderer: $.jqplot.CanvasAxisTickRenderer ,
tickOptions: {
fontSize: '10pt'
}
},
grid: {
backgroundColor: '#474744',
gridLineColor: 'white',
borderColor: 'white',
borderWidth: '1px',
shadow: false
},
series: [{
"label": "TOTAL"
},
{
"label": "MISSING",
pointLabels: {
show: true,
}
},
{
"label": "LATE"
},
{
"label": "ON TIME"
}
],
legend: {
show: true,
renderer: $.jqplot.EnhancedLegendRenderer,
location: 'e',
placement: "outside",
background: '#474744',
textColor: 'white',
border: 'none',
rendererOptions: {
numberRows: 4
}
},
axes: {
xaxis: {
ticks: ["ACCESSORIES", "TAILORING", "JERSEY", "JEANS & PANTS", "UNITED", "SWEAT", "PLAY", "JDY", "OUTERWEAR", "WOVEN", "KNIT", "SHOES"],
renderer: $.jqplot.CategoryAxisRenderer,
label: 'Warranty Concern',
pad: 1.1,
labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
tickRenderer: $.jqplot.CanvasAxisTickRenderer,
tickOptions: {
showGridline: false,
textColor: 'white',
angle: -30
},
labelOptions: {
fontFamily: 'Arial',
fontSize: '14pt',
textColor: 'white'
}
},
yaxis: {
tickOptions: {
textColor: 'white',
labelPosition: 'middle'
},
tickRenderer: $.jqplot.CanvasAxisTickRenderer
}
}
});
});
</script>