jqplot - getting error while using multiple series with different renderers - jqplot

Question

I have recently started using jqplot library for rendering graphs in our web app. I have downloaded version 1.0.8r1250. I am working with version 1.7 of jquery. I am trying to draw one bar graph and one line graph in the same canvas. Based on the documentation and the examples in the jqplot distribution, here is how I have configured it.
function drawGraph(data) {
$("#char1").empty();
$.jqplot.config.enablePlugins = true;
var lockinsByMarkup = [];
var lockinMarkupData = 'N/A':0, '<=10':16, '>10-20':15, '>20-30':1, '>30-40':0, '>40-50':3, '>50-60':10, '>60-70':0, '>70-80':12, '>80-90':0, '>90-100':0, '>100':0;
for (var prop_name in lockinMarkupData) {
lockinsByMarkup.push([prop_name, lockinMarkupData[prop_name]])
}
var recommendations = [1,2,3,4,5,6];
var plot1 = $.jqplot('chart1', [lockinsByMarkup, recommendations], {
// Only animate if we're not using excanvas (not in IE 7 or IE 8)..
animate: !$.jqplot.use_excanvas,
title: 'Current Customer Item Prices (CIP)',
axesDefaults: {
labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
tickOptions: {
showGridline: false
}
},
seriesDefaults:{
pointLabels: { show:true, hideZeros:true}
},
axes: {
xaxis: {
label:'Markup %',
renderer: $.jqplot.CategoryAxisRenderer,
tickRenderer: $.jqplot.CanvasAxisTickRenderer,
tickOptions: {
fontFamily: 'Georgia',
fontSize: '10pt',
angle: -30
}
},
yaxis: {
label: '# of CIP Records',
showTicks: false
}
},
series: [
{
renderer: $.jqplot.BarRenderer
},
{
renderer: $.jqplot.LineRenderer, // this is the default, but specifying just in case
showMarker: false,
showLine: false,
pointLabels: {labels: ['CFP', 'Min', 'Peer', 'Start', 'Default', 'Upper Limit']}
}
],
grid:{
drawBorder: true,
shadow: false
}
});
}
I have the following div on the page -
<div id="chart1" style="height:400px;width:500px; "></div> and I am executing the above function on the click of a button.
What is happening is, I am getting this error - Uncaught illegal access in jquery.jqplot.min.js.
If I just have one series, it is working fine. I have been struggling with error since yesterday afternoon. Can somebody please tell me what I am doing wrong?
I have included following js and css files on my page
jquery-1.7.min.js
jquery.jqplot.min.js
jqplot.barRenderer.min.js
jqplot.categoryAxisRenderer.min.js
jqplot.pointLabels.min.js
jqplot.canvasTextRenderer.min.js
jqplot.canvasAxisTickRenderer.min.js
jqplot.canvasAxisLabelRenderer.min.js
jquery.jqplot.min.css
Thanks for your help.

Answer 1

here is the solution: jsFiddle link
$(document).ready(function(){
function drawGraph(data) {
$("#chart1").empty();
$.jqplot.config.enablePlugins = true;
var lockinsByMarkup = [];
var recommendations = [];
var lockinMarkupData = {'N/A':0, '<=10':16, '>10-20':15, '>20-30':1, '>30-40':0, '>40-50':3, '>50-60':10, '>60-70':0, '>70-80':12, '>80-90':0, '>90-100':0, '>100':0};
for (var prop_name in lockinMarkupData) {
lockinsByMarkup.push([prop_name, lockinMarkupData[prop_name]]);
recommendations.push([prop_name, Math.round(Math.random()*10)]);
}
var plot1 = $.jqplot('chart1', [lockinsByMarkup, recommendations], {
// Only animate if we're not using excanvas (not in IE 7 or IE 8)..
animate: !$.jqplot.use_excanvas,
title: 'Current Customer Item Prices (CIP)',
axesDefaults: {
labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
tickOptions: {
showGridline: false
}
},
seriesDefaults:{
pointLabels: { show:true, hideZeros:true}
},
axes: {
xaxis: {
label:'Markup %',
renderer: $.jqplot.CategoryAxisRenderer,
tickRenderer: $.jqplot.CanvasAxisTickRenderer,
tickOptions: {
fontFamily: 'Georgia',
fontSize: '10pt',
angle: -30
}
},
yaxis: {
label: '# of CIP Records',
showTicks: false
}
},
series: [
{
renderer: $.jqplot.BarRenderer
},
{
renderer: $.jqplot.LineRenderer, // this is the default, but specifying just in case
showMarker: true,
showLine: true,
// pointLabels: {labels: ['CFP', 'Min', 'Peer', 'Start', 'Default', 'Upper Limit']}
}
],
grid:{
drawBorder: true,
shadow: false
}
});
}
drawGraph();
});