How to show a Google chart in popover in HTML5

问题

I have just started working with HTML5 and JQuery. I'm going to show a Google column-chart inside a popover on navbar. I have the following code, but it doesn't show the chart inside the popver. Can someone help me fix this problem? Thanks.

<a id="electricity" class="action" rel="popover">Elpriser</a>
<script>
$("#electricity")
    .popover(
        { placement : 'top', html : true,
           content : '<div class="popover-content-el"><div class="lable-electricity"><h3>Nordpool</h3></div><div id="chart_div" style="width: 300px; height: 200px;"></div></div>'
        });
 </script>
 <script type="text/javascript">
google.load("visualization", "1", {
  packages : [ "corechart" ]
});
google.setOnLoadCallback(drawChart);
function drawChart() {
  var data = google.visualization.arrayToDataTable([
      [ 'SE1', 'Idag', 'Imorgon' ], [ 'SE1', 1170, 460 ],
      [ 'SE2', 1170, 460 ], [ 'SE3', 660, 1120 ],
      [ 'SE4', 1030, 540 ] ]);

  var options = {

    vAxis : {
      textPosition : 'none',
      gridlines : {
        color : "#ffffff"
      }
    },

  };

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

}
</script>

回答1:

I'm going to make a guess (based on the html option) that you are using Bootstrap for your popover, but this should hold true if you are using something else.

The basic problem is (I think) one of timing. You need to populate your popover after your chart has has been created.

I can make this work by doing the following.

In your markup

<a id="electricity" class="action" rel="popover">Elpriser</a>
<div id = "popcontainer" class="popover-content-el" style="display:none">
    <div class="lable-electricity">
        <h3>Nordpool</h3>
    </div>
    <div id="chart_div" style="width: 300px; height: 200px;">
    </div>
</div>

That's just taking your content, giving it an id and hiding it.

Then I'd put the popover creation code somewhere where it fires after the chart has been rendered inside the hidden div. Maybe even inside the drawChart function at the end

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

  $("#electricity")
    .popover(
        { placement : 'bottom', html : true,
           content : $("#popcontainer").html()
        });

You see there how we can use the html content of our hidden div to fill the popover?

You'll have to play with height and width, but I've tried it here and it seems to work OK

EDIT

Should probably add a

$("#popcontainer").remove()

Afterwards to tidy up and get rid of duplicated IDs

回答2:

I also fixed it yesterday in this way: I created function "click" in my first script and declared variable "chart" inside there.

<script type="text/javascript">
$("#electricity")
    .popover(
        {
          placement : 'top',
          html : true,
          content : '<div class="popover-content-el popover.top"><div class="lable-electricity"><h3>Nordpool</h3><div id="chart_div" style="width:700px; height:150px;"></div></div></div><\/script>'
        });

    $("#electricity").click(function(e) {
      var chart = new google.visualization.ColumnChart(document.getElementById("chart_div"));
      chart.draw(data, options);
    } );

来源：https://stackoverflow.com/questions/16397246/how-to-show-a-google-chart-in-popover-in-html5

标签

jquery

html

google-visualization

popover