Home/ Questions/Q 9138857
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-17T09:18:41+00:00

I am trying to Display a google chart on a Modal Popup. It works

  • 0

I am trying to Display a google chart on a Modal Popup. It works just fine on a normal page, But it does not appear on the Modal.

This is the code I am using. I am not sure what is going wrong.

this is the HTML and JS code that lives on a url, /polls/

<!--Div that will hold the pie chart-->
<h3 style="text-align:center;">Test</h3>
<hr>
<div id="chart_div" style="height: 500px;">
</div>
<!--Load the AJAX API-->
  <script type="text/javascript" src="https://www.google.com/jsapi"></script>
  <script type="text/javascript">

    google.load("visualization", "1", {packages:["corechart"]});
    google.setOnLoadCallback(drawChart);
    function drawChart() {
      var data = google.visualization.arrayToDataTable([
        ['Options', 'Votes'],
        ['1',     11],

        ['2',      2],

        ['3',  2],

        ['4', 2],

        ['5',    7],

        ['6',    21],
      ]);

      // Set chart options
      var options = {
                      'backgroundColor': 'transparent',
                      'is3D': 'True',
                      'legend':'bottom',
                      'width':'100%',
                      'height':'100%',
                      chartArea:{left:0,top:0,width:"100%",height:"80%"}
                    };

      // Instantiate and draw our chart, passing in some options.
      var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
      chart.draw(data, options);
    }
  </script>

This is the html button that lives on page /home/

<a class="open-newmodal" href="/poll/">show poll</a>

So the idea is, that using a modal and jquery’s .load() function, I should be able to load the chart that lives on /poll/ page to my /home/ page in the modal that I made.

This is the modal I am using

Modal Css

.newmodal-container {
    display: none;
    overflow-y: scroll;
    position: fixed;
    top: 0; right: 0;
    height: 100%;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.3);
}
.newmodal {
    min-height: 100%;
    height: auto;
    width: 60%;
    margin: 0px auto;
    background-color: white;
    padding: 20px;
    border:1px solid #D3D3D3;
    box-shadow: 0px 0px 5px #D3D3D3;
}
.dp-none {
  display: none !important;
}
.dp-block {
  display: block !important;
}

Modal JS

// New Modal
var body = $('body'),
main = $('.main'),
open_modal = $('.open-newmodal'),
close_modal = $('.close-newmodal'),
modal_container = $('.newmodal-container');
open_modal.live('click', function(event){
  event.preventDefault();
  body.addClass('body-locked');
  modal_container.addClass('dp-block');
  var href = $(this).attr('href');
  modal = $('.data-load');
  modal.load(href);
  modal.attr("title",href);
});
close_modal.live('click', function(event){
  event.preventDefault();
  body.removeClass('body-locked');
  modal_container.removeClass('dp-block');
  modal.empty();
});
$(document).keyup(function(e) {
  if (e.keyCode == 27){
    event.preventDefault();
    body.removeClass('body-locked');
    modal_container.removeClass('dp-block');
    modal.empty();
  }
});
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Okay, seeing as how you want to load another page as a modal graph, I have the following solution.

    Initialize your google lib on the parent page as in http://jsbin.com/abucet/3, then make sure your child page doesn’t re-initialize or re-include the libs that are loaded in the parent page, see child @ http://jsbin.com/ajerol/5/edit

    So basically the child page @ http://jsbin.com/ajerol/5
    Parent Page accessing child @ http://jsbin.com/abucet/3

    Parent Page

    <!DOCTYPE html>
<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
      <script type="text/javascript" src="https://www.google.com/jsapi"></script>


<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>


  <div id='headerDiv' style='background-color:#FF0000'>
      Test Load
  </div>

  <div id='modalDiv' style='background-color:#FFAA00'>
      Close this and click the button to load 

      Graph will be in a modal JQuery Dialog.  Some of the google visualization initialization will be done in this page, not the page we're loading.
  </div>

  <button id='getIt'>Get the Graph</button>


</body>
</html>

    Javascript 

    $('#getIt').click( function() {
      $.get( "http://jsbin.com/ajerol/4",
        function(data) {
             var newGraph= "<div id='graphModal'>"+data+"</div>";
             //clean up html
             newGraph.replace('<body>','');
             newGraph.replace('</body>','');
             // we have the libs on this page, no need for that other cruft       
          newGraph.replace('<head.*head>','');
          // debug: 
          //alert(newGraph);
            // append to the current modal
            $('body').append(newGraph);            
            //  the graph page in modal 
            $('#graphModal').dialog({modal:true,width:300});
            $('#getIt').parent().append('<button onclick="$(\'#graphModal\'\).dialog(\);">showGraph</button>');
        }
      );
});

// initial note
$('#modalDiv').dialog({modal:true});

// load this on the parent page, not the one we're calling
google.load("visualization", "1", {packages:["corechart"]});

    Child Page

        <script type="text/javascript">
      google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Task', 'Hours per Day'],
          ['Work',     11],
          ['Eat',      2],
          ['Commute',  2],
          ['Watch TV', 2],
          ['Sleep',    7]
        ]);

        var options = {
          title: 'My Daily Activities'
        };

        var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
        chart.draw(data, options);
      }





    </script>

<div id="modal_chart" class="modal">
  <!--Div that will hold the pie chart-->
  <div id="chart_div" style="height: 300px; width: 300px;">
  </div>
</div>

    Child Javascript (on load)

    drawChart();
    • 0