jqplot using dateAxisRenderer line doesn't render, any ideas why?

Question

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:

"jqplot.canvasTextRenderer.min.js"
"jqplot.canvasAxisLabelRenderer.min.js"
"jqplot.dateAxisRenderer.min.js"
"jqplot/jqplot.canvasAxisTickRenderer.min.js"
"jqplot/jquery.jqplot.min.js"

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.

score 1 · Answer 1 · answered Oct 02 '12 at 04:03

One possibility is that the jqPlot plugin files are loading before the jqPlot main plugin file is loading, causing the "undefined" error. I experienced your issue because I am using RequireJS to load dependencies asynchronously, and the jqPlot main plugin file is huge in comparison to the plugin files, so the plugin files loaded first.

score 1 · Answer 2 · answered May 28 '14 at 12:07

1

I experienced your issue too. Can it be possible, that there are two "type" properties in script tag? Like this:

<script type="javascript" type="text/javascript" src="/jqplot/jquery.jqplot.js"></script>

answered May 28 '14 at 12:07

SzGyD

88
7

score 1 · Answer 3 · answered Sep 17 '11 at 10:52

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

output of jqplot code

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.

score 0 · Answer 4 · answered Feb 03 '16 at 16:00

After doing a quick copy-paste mistake, I noticed that I get this error if the source links are outside the <head></head> tags.

<html>  
  <head>
    <title>Awesome graph</title>
  </head>
  <script type="text/javascript" src="jqplot/plugins/jqplot.logAxisRenderer.min.js"></script>
  <script type="text/javascript" src="jqplot/plugins/jqplot.canvasAxisLabelRenderer.min.js"></script>
  <script type="text/javascript" src="jqplot/plugins/jqplot.canvasAxisTickRenderer.min.js"></script>
  <script type="text/javascript" src="jqplot/plugins/jqplot.dateAxisRenderer.min.js"></script>
<body>...

Replacing those in the head tags resolved it immediatly.

<html>  
  <head>
    <title>Awesome graph</title>
  <script type="text/javascript" src="jqplot/plugins/jqplot.logAxisRenderer.min.js"></script>
  <script type="text/javascript" src="jqplot/plugins/jqplot.canvasAxisLabelRenderer.min.js"></script>
  <script type="text/javascript" src="jqplot/plugins/jqplot.canvasAxisTickRenderer.min.js"></script>
  <script type="text/javascript" src="jqplot/plugins/jqplot.dateAxisRenderer.min.js"></script>
  </head>
<body>...

jqplot using dateAxisRenderer line doesn't render, any ideas why?

4 Answers4