jquery - How to show a Google chart in popover in HTML5 -

i have started working html5 , jquery. i'm going show google column-chart inside popover on navbar. have following code, doesn't show chart inside popver. can me fix 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> 

i'm going make guess (based on html option) using bootstrap popover, should hold true if using else.

the basic problem (i think) 1 of timing. need populate popover after chart has has been created.

i can make work doing following.

in 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 taking content, giving id , hiding it.

then i'd put popover creation code somewhere fires after chart has been rendered inside hidden div. maybe inside drawchart function @ 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 can use html content of our hidden div fill popover?

you'll have play height , width, i've tried here , seems work ok

edit

should add

$("#popcontainer").remove() 

afterwards tidy , rid of duplicated ids