javascript - Manage multiple highchart charts in a single webpage with PHP -
in page, have options take if want show 1 chart or chart, in same time. when take chart view, it's ok. when take "chart a" it's ok. when take "chart b" does'n show chart.
i remark when take "chart a" or charts, display both alert. when take "chart b", display first alert.
am doing wrong? help much appreciated.
<html> <head> <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script> <script type="text/javascript" src="http://code.highcharts.com/highcharts.js"></script> <script type="text/javascript"> $(document).ready(function() { highcharts.setoptions({ chart: { defaultseriestype: 'spline', }, xaxis: { type: 'datetime', }, }); var options1 = { chart: { renderto: '' }, series: [] }; var options2 = { chart: { renderto: '' }, series: [] }; alert("chart1"); options1.series.push({name: "temperatura",data: _vars['data1'],linewidth: 1,color: '#3e5bc1'}); options1.chart.renderto = 'chart_1'; var chart1 = new highcharts.chart(options1); alert("chart2"); options2.series.push({name: "hr",data: _vars['data2'],linewidth: 1,color: '#3e5bc1'}); options2.chart.renderto = 'chart_2'; var chart2 = new highcharts.chart(options2); }); </script> </head> <body> <script> var _vars = new array(); _vars['data1'] = [[date.utc(2012,7,14,12,0),26.1],[date.utc(2012,7,14,13,0),27.2],[date.utc(2012,7,14,14,0),28],[date.utc(2012,7,14,15,0),28.4],[date.utc(2012,7,14,16,0),27.1],[date.utc(2012,7,14,17,0),27.2],[date.utc(2012,7,14,18,0),26.1],[date.utc(2012,7,14,19,0),24.8],[date.utc(2012,7,14,20,0),22.5],[date.utc(2012,7,14,21,0),21.3],[date.utc(2012,7,14,22,0),20.1],[date.utc(2012,7,14,23,0),19],[date.utc(2012,7,15,0,0),18.3]]; vars_ambiente['data2'] = [[date.utc(2012,7,14,12,0),43],[date.utc(2012,7,14,13,0),44.1],[date.utc(2012,7,14,14,0),46.8],[date.utc(2012,7,14,15,0),49.3],[date.utc(2012,7,14,16,0),60.1],[date.utc(2012,7,14,17,0),57],[date.utc(2012,7,14,18,0),60.7],[date.utc(2012,7,14,19,0),69.5],[date.utc(2012,7,14,20,0),77.8],[date.utc(2012,7,14,21,0),80.5],[date.utc(2012,7,14,22,0),81.4],[date.utc(2012,7,14,23,0),83.1],[date.utc(2012,7,15,0,0),85.3]]; </script> <h2>choose chart test</h2> <?php // when take a, it's ok // when take b, it's not ok // when take c, it's ok //$param ="a"; $param ="b"; //$param ="c"; if($param == 'a'){ echo "<p>chart a</p> <div id='chart_1'></div>"; }elseif($param == 'b'){ echo "<p>chart b</p> <div id='chart_2'></div>"; }else{ echo "all charts\n"; echo "<p>chart a</p><div id='chart_1' ></div></br></br>"; echo "<p>chart b</p><div id='chart_2'></div></br></br>"; } ?> </body> </html>
when have chosen alternative b) line:
var chart1 = new highcharts.chart(options1); cause error in javascript , execution of script stopped. highcharts not find chart_1 div , exits error. when take alternative a) script go through line stops on line:
var chart2 = new highcharts.chart(options2); and not notice this. check in developer tools (chrome or firefox), there error in javascript console. did , in situation b) there , error: highcharts error #13: rendering div not found
to right should check whether each of divs exists in html. seek using jquery this:
alert("chart1"); options1.series.push({name: "temperatura",data: _vars['data1'],linewidth: 1,color: '#3e5bc1'}); options1.chart.renderto = 'chart_1'; // checking if div#chart_1 exists if ($("#chart_1").length > 0) { var chart1 = new highcharts.chart(options1); } alert("chart2"); options2.series.push({name: "hr",data: _vars['data2'],linewidth: 1,color: '#3e5bc1'}); options2.chart.renderto = 'chart_2'; // checking if div#chart_2 exists if ($("#chart_2").length > 0) { var chart2 = new highcharts.chart(options2); } php javascript jquery highcharts
No comments:
Post a Comment