Search code examples
jqueryjqplotdocument-ready

why jqplot not working on document.ready

I'm trying to use jqplot to show my Data visually, It's working in my page without any problem, but, when i call it in document.ready() , it didn't work anymore. so the problem is related to $(document).ready(function () {} of cource.

Is there anyone , could enter code herehelp me about it ?

<div id="chartdiv" style="height: 400px; width: 500px;"></div>
<div id="chartdiv2" style="height: 400px; width: 500px;"></div>
<div id="chartdiv3" style="height: 400px; width: 500px;"></div>

<!-- Scripts JS  -->
<script src="~/Scripts/jquery-3.1.1.min.js"></script>
<script src="~/Scripts/jqPlot/jquery.jqplot.min.js"></script>
<script src="~/Scripts/jqPlot/plugins/jqplot.pieRenderer.min.js"></script>

<!-- CSS  -->
<link href="~/Scripts/jqPlot/jquery.jqplot.min.css" rel="stylesheet" />

<script>
//It works well

    $.jqplot('chartdiv', [[[1, 2], [3, 5.12], [5, 13.1], [7, 33.6], [9, 85.9], [11, 219.9]]]);
    
 //It not work
    $(document).ready(function () {           

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

</script>

Solution

  • Charts are created, the problem is with your CSS. Setting position relative on your divs fixes the issue. See my Fiddle for justification.

    <div id="chartdiv3" style="height: 400px; width: 500px; position: relative;"></div>

    https://jsfiddle.net/4v0ueohc/

    Fiddle is based on JQPlot 1.0.9 and JQuery 3.2.1.