Why is my jqPlot not rendering a canvas?

Question

I am trying to use jqPlot for a bar graph and I can't get it to show anything.

I have included the jqPlot code and all the plugins. I am not receiving any errors whatsoever

I have copied the example code directly:

html:

<div id="jqplot" class="plot">

</div>

Javascript:

"use strict";
(function ($){

        $.jqplot('jqplot',  [[[1, 2],[3,5.12],[5,13.1],[7,33.6],[9,85.9],[11,219.9]]]);

})(jQuery);

It is adding the class 'jqplot-target' to the 'jqplot' div so the javascript must be working, yet it is not adding a canvas/chart to the div, it displays just an empty div with the added class to it.

Any ideas why this is not rendering?

I am using html5boilerplate as well, but I can't find any known issues with the two of them.

Thanks,

Thomas

Answer 1

I found the problem. I had the main container div that the jqplot is inside set to display:none on page load and once you click the 'enter' button is shows with .fadeIn()

I suppose it can't add the canvas when the parent is display: none; - I've got it to work by calling the $.jqplot inside the function that fades in the main container after the user clicks enter...

Answer 2

Can you show what your CSS is doing to the class "plot"? The jqPlot Usage page says that you need to be sure to add width and height to the plot target.

Answer 3

Use the replot function on the generated chart, when you click on your button.

// create your chart
var plot1 = $.jqplot(...);

// hook the button press
$("button#enter").on("click", function(){
    // fade your tab in, wait for it to complete,
    $(".tab").fadeIn(1000, function(){
        // then replot, if not already drawn
        if(!plot1._drawCount){
            plot1.replot();
        }
    });
});

http://www.jqplot.com/deploy/dist/examples/hiddenPlotsInTabs.html

Answer 4

I ran into this issue earlier, for some reason the following jqplot code wouldn't work:

$(document).ready(function () {
    $.jqplot('chart1', [[[1, 2], [3, 5.12], [5, 13.1], [7, 33.6], [9, 85.9], [11, 219.9]]]);
}

However, when I switched the $(document).ready(function{...} to jQuery(function ($){..} the jqplot code worked properly.

jQuery(function ($) {
    $.jqplot('chart1', [[[1, 2], [3, 5.12], [5, 13.1], [7, 33.6], [9, 85.9], [11, 219.9]]]);
}