jQPlot charts not working in jquery mobile pop up

Question

jQPlot charts not working in jquery mobile pop up

1.8k Views Asked by Silver At 20 October 2024 at 05:43

I have a line chart using jQPlot that needs to be displayed on click of a jquery mobile pop-up. Unfortunately it doesnt show up.. Below is my code.

    <!DOCTYPE html>

<html>
    <head>

        <title>Line Charts and Options</title>

        <link class="include" rel="stylesheet" type="text/css" href="jquery.mobile-1.3.0.css" />
        <link class="include" rel="stylesheet" type="text/css" href="jquery.jqplot.min.css" />
        <script class="include" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
        <script type="text/javascript" src="jquery.mobile-1.3.0.js"></script>
        <script type="text/javascript" src="jquery.jqplot.min.js"></script>
        <script type="text/javascript" src="jqplot.canvasTextRenderer.min.js"></script>
        <script type="text/javascript" src="jqplot.canvasAxisLabelRenderer.min.js"></script>

    </head>
    <body>
        <div data-role="page">

            <div data-role="content">
                <img src="downarrow_Green.svg" onclick="openpopup()"/>
                <div id="mychartshow" style="height:150px; width:150px;"></div>

                <div data-role="popup" id="ExchangeRate_graph" data-theme="c" align="left">

                    <div class="ui-grid-d">
                        <div class="ui-block-a" align="left">
                            <span>1y</span>
                        </div>
                        <div class="ui-block-b"  align="left">
                            <span>6m</span>
                        </div>
                        <div class="ui-block-c"  align="left">
                            <span>3m</span>
                        </div>
                        <div class="ui-block-d"  align="left">
                            <span>1m</span>
                        </div>
                        <div class="ui-block-e"  align="left">
                            <span>1w</span>
                        </div>

                    </div>

                    <!--Graph Section-->
                    <div id="mychartshow">

                    </div>

                </div>
            </div>

            <script type="text/javascript">
                $(document).ready(function() {
                    //var plot1 = $.jqplot('chart1', [[93, 17, 19, 11, 15, 13, 18, 12, 15]]);
                    //var plot1 = $.jqplot('chart1', [[3, 7, 9, 1, 5, 3, 8, 2, 5]], {title:'US Dollar', axes: {xaxis: {min: 5, max:13, tickInterval:2,numberTicks:5},yaxis: {min: 2, max: 8, numberTicks:4}}});
                    var plot1 = $.jqplot('mychartshow', [[2.89, 3.1, 3.5, 3.4, 2.92]], {
                        title : 'US Dollar',

                        axes : {
                            xaxis : {
                                ticks : [[1, 14], [2, 21], [3, 28], [4, 4], [5, 11]] //using 2d value array
                            },
                            yaxis : {
                                ticks : [2.8, 3.0, 3.2, 3.4, 3.6]

                            }

                        }
                    });

                });

                function openpopup() {
                    $('#ExchangeRate_graph').popup('open');
                }
            </script>

        </div><!--page-->

    </body>

</html>

The pop up shows up but with no chart.What am I doing wrong???

Original Q&A

There are 1 best solutions below

**Gajotres** · Accepted Answer

All jQuery plugins that work with page height and width (in your case jqPlot) MUST be initialized through pageshow event or at any other point where page is already displayed, in our case this is a popupbeforeopen event. This is because jQuery Mobile pages has correct height only at that point. So if page height is 0 plugin will initialize but with height set to 0.

Just copy this HTML into an empty html file and try it.

HTML :

<!DOCTYPE html>
<html>
    <head>

        <title>Line Charts and Options</title>

        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
        <link class="include" rel="stylesheet" type="text/css" href="http://www.jqplot.com/src/jquery.jqplot.min.css" />
        <script class="include" type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.js"></script>
        <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script> 
        <script type="text/javascript" src="http://www.jqplot.com/src/jquery.jqplot.min.js"></script>
        <script type="text/javascript" src="http://www.jqplot.com/src/plugins/jqplot.canvasTextRenderer.min.js"></script>
        <script type="text/javascript" src="http://www.jqplot.com/src/plugins/jqplot.canvasAxisLabelRenderer.min.js"></script>
        <script>
            $(document).on('pageshow', '#graph-page', function(){ 
                $(document).on( "popupafteropen", "#ExchangeRate_graph",function( event, ui ) {
                    var plot1 = $.jqplot('mychartshow', [[2.89, 3.1, 3.5, 3.4, 2.92]], {
                        title : 'US Dollar',

                        axes : {
                            xaxis : {
                                ticks : [[1, 14], [2, 21], [3, 28], [4, 4], [5, 11]] //using 2d value array
                            },
                            yaxis : {
                                ticks : [2.8, 3.0, 3.2, 3.4, 3.6]

                            }

                        }
                    });
                });
            });     
        </script>
    </head>
    <body>
        <div data-role="page" id="graph-page">

            <div data-role="content">
                <a href="#ExchangeRate_graph" data-rel="popup" data-role="button" data-inline="true" data-transition="pop">Basic Popup</a>
                <div data-role="popup" id="ExchangeRate_graph" data-theme="c" align="left">

                    <!--Graph Section-->
                    <div id="mychartshow">

                    </div>

                </div>
            </div>

            <script type="text/javascript">
                $(document).ready(function() {
                    //var plot1 = $.jqplot('chart1', [[93, 17, 19, 11, 15, 13, 18, 12, 15]]);
                    //var plot1 = $.jqplot('chart1', [[3, 7, 9, 1, 5, 3, 8, 2, 5]], {title:'US Dollar', axes: {xaxis: {min: 5, max:13, tickInterval:2,numberTicks:5},yaxis: {min: 2, max: 8, numberTicks:4}}});
                    var plot1 = $.jqplot('mychartshow', [[2.89, 3.1, 3.5, 3.4, 2.92]], {
                        title : 'US Dollar',

                        axes : {
                            xaxis : {
                                ticks : [[1, 14], [2, 21], [3, 28], [4, 4], [5, 11]] //using 2d value array
                            },
                            yaxis : {
                                ticks : [2.8, 3.0, 3.2, 3.4, 3.6]

                            }

                        }
                    });

                });

                function openpopup() {
                    $('#ExchangeRate_graph').popup('open');
                }
            </script>

        </div><!--page-->

    </body>

</html>

jQPlot charts not working in jquery mobile pop up

There are 1 best solutions below

Related Questions in JQUERY

Related Questions in JQUERY-MOBILE

Related Questions in JQPLOT

Related Questions in JQUERY-MOBILE-PAGESHOW

Trending Questions

Popular # Hahtags

Popular Questions