title: How to make a google generated chart as part of jquery dialogue box?
body: <p>My actual requirement is that I need to open a pop up on click of a Stock Name , so i thought to make chart as part of jquery dialogue </p>
  
  <p>The issue i am facing is that Chart is not being a part of jquery dialogue </p>
  
  <pre><code>google.load("visualization", "1", {
      packages: ["corechart"]
  });
  google.setOnLoadCallback(drawChart);
  $('#open').click(function() {
      $('#dialog').dialog('open');
      $("#dialog").show();
  });
  var mydata = [
      ['13-Oct', 1097.95, 1113.45, 1109.95, 1132],
      ['14-Oct', 1095.6, 1101.15, 1113.45, 1117],
      ['15-Oct', 1092.1, 1129.2, 1116, 1132],
      ['16-Oct', 1130, 1170.3, 1130, 1182.4],
      ['19-Oct', 1144.5, 1162.15, 1174, 1182.2]
  ];
  function drawChart() {
      var data = google.visualization.arrayToDataTable(mydata, true);
      var days = 5;
      var view = new google.visualization.DataView(data);
      var chart = new google.visualization.CandlestickChart(document.getElementById('chart_div'));
      chart.draw(view, {
          height: 400,
          width: 600,
          chartArea: {
              left: '7%',
              width: '70%'
          },
          series: {
              0: {
                  type: 'candlesticks'
              },
              1: {
                  type: 'line'
              }
          }
      });
  }
  
  $(document).ready(function() {
    $("#dialog").hide();
  });
  
  $("#dialog").dialog({
      modal: true,
      height: "auto",
      width: "auto"
  }); 
  $("#dialog").dialog("option", "title", "Test Charts");
  </code></pre>
  
  <p><a href="http://jsfiddle.net/ovog4njt/22/" rel="nofollow">http://jsfiddle.net/ovog4njt/22/</a></p>