Menu
This code works perfectly fine:
in my view:
<div id="chart1"></div>
And then my js:
$(document).ready(function(){
var plot1 = $.jqplot ('chart1', [[3,7,9,1,4,6,8,2,5]]);
});
When I changed my js(copied it from jqPlot site) so I could have dates included on my x axis only the grid shows without x axis or line (y axis is accurate and present):
The new js code that doesnt work:
$(document).ready(function(){
var line1=[['2011-06-30 8:00AM',4], ['2011-7-30 8:00AM',6]];
var plot2 = $.jqplot('chart1', [line1], {
title:'Customized Date Axis',
gridPadding:{right:35},
axes:{
xaxis:{
renderer:$.jqplot.DateAxisRenderer,
tickOptions:{formatString:'%b %#d, %y'},
min:'May 30, 2011',
tickInterval:'1 month'
}
},
series:[{lineWidth:4, markerOptions:{style:'square'}}]
});
});
Note I only changed the dates to 2011, renamed ID of a div to "chart1" (if compared to this jQPlot site) and added jqplot.dateAxisRenderer.min.js.
So now I have the following plugins included:
I am getting following JS errors:
Uncaught TypeError: Cannot set property 'CanvasTextRenderer' of undefined in jqplot.canvasTextRenderer.min.js:30.
Cannot set property 'CanvasTextRenderer' of undefined in jqplot.canvasAxisLabelRenderer.min.js:30.
Cannot set property 'CanvasTextRenderer' of undefined in jqplot.dateAxisRenderer.min.js:30.
Cannot set property 'CanvasTextRenderer' of undefined in jqplot.canvasAxisTickRenderer.min.js:30.
What am I doing wrong here? Any help would be greatly appreciated. I googled around for 2h without success.
996
I created a plain html page containing your code above and it appears to work.
<html>
<head>
<link type="text/css" href="http://localhost/test1/atk4-addons/sterling/jqplot/templates/js/jqplot/jquery.jqplot.css" rel="stylesheet" />
<script type="text/javascript" src="http://localhost/test1/atk4/templates/js/jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="http://localhost/test1/atk4-addons/sterling/jqplot/templates/js/jqplot/jquery.jqplot.js"></script>
<script type="text/javascript" src="http://localhost/test1/atk4-addons/sterling/jqplot/templates/js/jqplot/plugins/jqplot.dateAxisRenderer.js"></script>
<script>
$(document).ready(function(){
var line1=[['2011-06-30 8:00AM',4], ['2011-7-30 8:00AM',6]];
var plot2 = $.jqplot('chart1', [line1], {
title:'Customized Date Axis',
gridPadding:{right:35},
axes:{
xaxis:{
renderer:$.jqplot.DateAxisRenderer,
tickOptions:{formatString:'%b %#d, %y'},
min:'May 30, 2011',
tickInterval:'1 month'
}
},
series:[{lineWidth:4, markerOptions:{style:'square'}}]
});
});
</script>
</head>
<body>
<div id="chart1"></div>
</body>
</html>
which produces the following output for me in firefox 3.6.22 on windows 7
I'm using jquery v1.5.1 so maybe update to the latest version and try again just in case.
I only needed to include the jquery.js, the jqplot.js and the dateAxisRenderer for this to work so also try removing the other renderers as i dont think you are using any options that need it in the code sample you provided.
Although this code works fine in isolation, i read an issue elsewhere about a problem with some browsers not loading loading everything in the correct order and needing the css to be loaded before the javascript.
You tagged this with ruby on rails so if you are calling this from some framework code and it loads other stuff as well, maybe there is an issue with the order so changing that around might help.
146
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
