javascript - Loading Highcharts in an iframe -


i'm trying load chart (using highcharts) in iframe, load highcharts console returns $(...).highcharts not function

$('<iframe id="panel_frame_container" frameborder="0"/>').load(function(){             $('#panel_frame_container').contents().find('body').append("<div id='panel_chart_container'></div>").end()                                                   .find('body').append('<script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"><\/script>').end()                                                   .find('body').append('<script src="https://code.highcharts.com/highcharts.js"><\/script>').end()                                                   .find('body').append('<script src="https://code.highcharts.com/highcharts-more.js"><\/script>').end()                                                   .find('body').append('<script src="https://code.highcharts.com/modules/exporting.js"><\/script>').end()                                                   .find('body').append("<script type='text/javascript'>$(document).ready(function(){console.log('loaded');$('#panel_chart_container').highcharts("+data2+");});<\/script>");         }).appendto($(".panel-body"));

https://jsfiddle.net/s82v657e/

my goal let user set own datas (data2) choose iframe lock him out of main window since can use functions in highcharts, i'll add sandbox tag in iframe when first part work.

i think should not inject yours scripts javascript that. instead create dynamic page iframe.php content easier.

iframes have restricted rights , way load yours scripts doesn't guarantee done 1 after another

quick example iframe.php content, pass data_id inside iframe url:

<?php  if (isset($_get['data_id'])) $data = getgraphics( $_get['data_id']); ?> <html> <head> </head> <body> <div id="panel_chart_container"></div> <script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> <script src="https://code.highcharts.com/highcharts.js"></script> <script src="https://code.highcharts.com/highcharts-more.js"></script> <script src="https://code.highcharts.com/modules/exporting.js"></script> <script type='text/javascript'> $(document).ready(function(){ $('#panel_chart_container').highcharts(<?=$data;?>); }); </script> </body> </html>

Comments

Post a Comment

Popular posts from this blog

sublimetext3 - what keyboard shortcut is to comment/uncomment for this script tag in sublime -

Image
i have script tag in code, keyboard shortcut comment/uncomment script tag in sublime. after selecting script open , close tag. <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"> </script> i pressing ctrl + shift + / , getting this /*<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"> </script>*/ also pressed ctrl + / , got this // <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"> // </script> instead of <!-- <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"> </script> --> script open , close tag in 2 lines not in 1 line , not have spaces too. for mac,high light lines want comment. hold 'command , / ' commented. for windows: high line or select lines ,then hold ctrl + / if not work: ...
Read more

post - imageshack API cURL -

i credentials correct. when send image through form this:(action="http://api.imageshack.com/v2/images/"). working fine when tried send $ch = curl_init($url); failed. code: enter code here <form action="" method="post" enctype="multipart/form-data"> select image upload: <input type="file" name="file" id="file" multiple> <input type="text" name="auth_token" id="auth_token" value="xxxxxxxxxxxxxxxx"> <input type="text" name="api_key" id="api_key" value="xxxxxxxxxxxxxxx"> <input type="submit" value="upload image" > </form> $url = ' http://api.imageshack.com/v2/images/ '; $temp = $_files["file"]['tmp_name']; echo $temp."<br>" ; $ch = curl_init($url); curl_setopt($ch, curlopt_post, true); curl...
Read more

dataset - MPAndroidchart returning no chart Data available -

i having problems mpandroidchart. adding temperature , humidity data chart, displays "no chart data available". here can see bug is? super grateful! //create data //set size of data int size = list.size(); if (size > 24){ size = 24;} //create lists form temp , hum arraylist<entry> temps = new arraylist<entry>(); arraylist<entry> hums = new arraylist<entry>(); //fill list temp values (int = 0; < size; i++){ entry value = new entry(math.round(list.get(list.size()-size + i).temp), (size-i)); temps.add(value); } //fill list hum values (int = 0; < size; i++){ entry value = new entry(math.round(list.get(list.size()-size + i).hum), (size-i)); hums.add(value); } ...
Read more