<?php /** * this view generates fields for search form * <br/><br/> * @author Gabriele Droege, Patricia Kelbert (BGBM, GGBN/DNA Bank Network) <contact@dnabank-network.org> * @version yii 2.0.3 * @package View * @var $this SearchController * @var $model SearchForm * @var $selectionLists - created in the controller * @var $form CActiveForm * @copyright Copyright © 2011 DNA Bank Network http://www.dnabank-network.org * <br/>The contents of this file are subject to the Mozilla Public License Version 1.1 * @filesource * @license http://www.mozilla.org/MPL/ MPL */ use yii\helpers\Html; use yii\web\View; use yii\helpers\Url; $this->registerJs ( " $('.tabs-search .tab-links a').on('click', function(e) { var currentAttrValue = $(this).attr('href'); // Show/Hide Tabs $(currentAttrValue).show(); $(currentAttrValue).siblings().hide(); // Change/remove current tab to active $(this).parent('li').addClass('active hop').siblings().removeClass('active'); e.preventDefault(); });"); ?> <div class="jumbotron"> <h2>Statistics for <?php if(isset($fullName) && !empty($fullName)){echo $fullName .' ('.$registry.')';}else echo $registry;?><br/><?php echo $basisofrecordstxt;?></h2> </div> <div class="container"> <?php $i=0;?> <div id="logos"> <?php foreach ($partners as $partner){ echo "<div class='logopartner' id='partner-".$i."'>" ."<div class='row'>" ."<div class='col-lg-3'> <img width='150px;' src='".$partner['logoURL']."'/> </div> <div class='col-lg-7'>" ."<table width='100%'><tr><td width='170'><b>Name:</b> </td><td>".$partner['institutionFullName']."</td></tr>" ."<tr><td><b>City:</b> </td><td> ".$partner['city']."</td></tr>"; echo $partner['CITES_code'] ? "<tr><td><b>CITES code:</b> </td><td>".$partner['CITES_code']."</td></tr>" : ""; echo "<tr><td><b>Member since:</b> </td><td>".$partner['dateOfJoining']."</td></tr>" ."<tr><td><b>Status:</b> </td><td>".$partner['memberStatus']." Member</td></tr>" ."<tr><td><b>Online since:</b> </td><td>".$partner['onlineSince']."</td></tr>" ."<tr><td><b>No. Units:</b> </td><td>".number_format($counts[$partner['institutionFullName']])."</td></tr>"; if(!empty($contacts[$partner['institutionFullName']])){ echo "<tr><td><b>Contact(s):</b> </td><td>"; foreach ($contacts[$partner['institutionFullName']] as $contact) echo "<li>".$contact[0].", <a href=mailto:".$contact[1].">email</a></li>"; echo "</ul></td></tr></table>"; } echo"</div>" ."</div>" ."<br/></div>"; $i+=1; } ?> </div> <br/> <div class="tabs-search"> <ul class="tab-links"> <li class="active"><a href="#Global">Global statistics</a></li> <?php if(!empty($speciesYear) && $speciesYear!="[]"):?> <li ><a href="#SpeciesTab">No. species</a></li> <li ><a href="#SamplesTab">No. samples</a></li> <?php endif;?> </ul> </div> <div class="tab-content"> <div id="Global" class="tab active"> <div class="row"> <div id="chart1a" class="col-lg-6" style="width: 500px; height: 400px;"></div> <div id="chart1b" class="col-lg-6" style="width: 500px; height: 400px;"></div> <div id="chart2" class="col-lg-6" style="width: 500px; height: 400px;"></div> </div> <div class="clearer"></div> <hr/> <div class="row"> <div class="col-lg-6" id="chartcontinent" style="width: 500px; height: 400px;" ></div> <div class="col-lg-6" id="chartocean" style="width: 500px; height: 400px;" ></div> </div> <span id="info3"></span> </div> <?php if(!empty($speciesYear) && $speciesYear!="[]"):?> <div id="SpeciesTab" > <div class="col-lg-6" id="chartspecies" style="margin-top: 20px; width: 800px; height: 300px;"></div> </div> <?php endif;?> <div id="SamplesTab" > <div class="col-lg-6" id="chartsamples" style="margin-top: 20px; width: 800px; height: 400px;"></div> <br/> <button class="button-reset">Reset Zoom</button> </div> </div><!-- end div tab content --> <script type="text/javascript"> $(document).ready(function(){ <?php if(! empty($countries) && $countries!="[]") echo " var data =" . $countries . "; var plot2 = $.jqplot ('chartcontinent', [data], { title: 'Countries - click to access to the records', grid: {borderColor: 'white', shadow: false, drawBorder: false}, seriesDefaults: { // Make this a pie chart. renderer: jQuery.jqplot.PieRenderer, rendererOptions: { // Put data labels on the pie slices. // By default, labels show the percentage of the slice. showDataLabels: true, highlightMouseOver: true }, }, legend: { show:true, location: 'e' } } );"; elseif (!empty($continents) && $continents !="[]") echo "var data =" . $continents . "; var plot2 = $.jqplot ('chartcontinent', [data], { title: 'Continents - click to refine', grid: {borderColor: 'white', shadow: false, drawBorder: false}, seriesDefaults: { // Make this a pie chart. renderer: jQuery.jqplot.PieRenderer, rendererOptions: { // Put data labels on the pie slices. // By default, labels show the percentage of the slice. showDataLabels: true, highlightMouseOver: true }, }, legend: { show:true, location: 'e' } } );" ?> <?php if(! empty($seas) && $seas!="[]") echo " var data =" . $seas . "; var plot2 = $.jqplot ('chartocean', [data], { title: 'Seas - click to access to the records', grid: {borderColor: 'white', shadow: false, drawBorder: false}, seriesDefaults: { // Make this a pie chart. renderer: jQuery.jqplot.PieRenderer, rendererOptions: { // Put data labels on the pie slices. // By default, labels show the percentage of the slice. showDataLabels: true, highlightMouseOver: true }, }, legend: { show:true, location: 'e' } } );"; elseif (!empty($oceans) && $oceans!="[]") echo "var data =" . $oceans . "; var plot2 = $.jqplot ('chartocean', [data], { title: 'Oceans - click to refine', grid: {borderColor: 'white', shadow: false, drawBorder: false}, seriesDefaults: { // Make this a pie chart. renderer: jQuery.jqplot.PieRenderer, rendererOptions: { // Put data labels on the pie slices. // By default, labels show the percentage of the slice. showDataLabels: true, highlightMouseOver: true }, }, legend: { show:true, location: 'e' } } );" ?> <?php if(!empty($kindofunitssamples) && $kindofunitssamples!="[]"):?> var data =<?php echo $kindofunitssamples;?>; var plot1 = $.jqplot ('chart1a', [data], { title: 'Kind of units - samples click to refine', grid: {borderColor: 'white', shadow: false, drawBorder: false}, seriesDefaults: { // Make this a pie chart. renderer: jQuery.jqplot.PieRenderer, rendererOptions: { // Put data labels on the pie slices. // By default, labels show the percentage of the slice. showDataLabels: true, // fill: false, // sliceMargin: 4, // lineWidth: 5, highlightMouseOver: true }, }, legend: { show:true, location: 'e' } } ); <?php endif;?> <?php if(!empty($kindofunitsvouchers) && $kindofunitsvouchers!="[]"):?> var data =<?php echo $kindofunitsvouchers;?>; var plot1 = $.jqplot ('chart1b', [data], { title: 'Kind of units - vouchers click to refine', grid: {borderColor: 'white', shadow: false, drawBorder: false}, seriesDefaults: { // Make this a pie chart. renderer: jQuery.jqplot.PieRenderer, rendererOptions: { // Put data labels on the pie slices. // By default, labels show the percentage of the slice. showDataLabels: true, // fill: false, // sliceMargin: 4, // lineWidth: 5, highlightMouseOver: true }, }, legend: { show:true, location: 'e' } } ); <?php endif;?> <?php if (!empty($species) && $species!="[]"){ echo " var data =".$species."; var plot2 = $.jqplot ('chart2', [data], { title: 'Species for the genus ".$genus."- click to access to the records', grid: {borderColor: 'white', shadow: false, drawBorder: false}, seriesDefaults: { // Make this a pie chart. renderer: jQuery.jqplot.PieRenderer, rendererOptions: { // Put data labels on the pie slices. // By default, labels show the percentage of the slice. showDataLabels: true, highlightMouseOver: true }, }, legend: { show:true, location: 'e' } } );"; } else if (!empty($genera) && $genera!="[]"){ echo " var data =".$genera."; var plot2 = $.jqplot ('chart2', [data], { title: 'Genera for the family ".$family."- click to refine', grid: {borderColor: 'white', shadow: false, drawBorder: false}, seriesDefaults: { // Make this a pie chart. renderer: jQuery.jqplot.PieRenderer, rendererOptions: { // Put data labels on the pie slices. // By default, labels show the percentage of the slice. showDataLabels: true, highlightMouseOver: true }, }, legend: { show:true, location: 'e' } } );"; } else if (!empty($families) && $families !="[]"){ echo " var data =".$families."; var plot2 = $.jqplot ('chart2', [data], { title: 'Families for the order ".$ordo."- click to refine', grid: {borderColor: 'white', shadow: false, drawBorder: false}, seriesDefaults: { // Make this a pie chart. renderer: jQuery.jqplot.PieRenderer, rendererOptions: { // Put data labels on the pie slices. // By default, labels show the percentage of the slice. showDataLabels: true, highlightMouseOver: true }, }, legend: { show:true, location: 'e' } } );"; } else if (!empty($orders) && $orders !="[]"){ echo "var data = ".$orders."; var plot2 = $.jqplot ('chart2', [data], { title: 'Order for the class ".$classis."- click to refine', grid: {borderColor: 'white', shadow: false, drawBorder: false}, seriesDefaults: { // Make this a pie chart. renderer: jQuery.jqplot.PieRenderer, rendererOptions: { // Put data labels on the pie slices. // By default, labels show the percentage of the slice. showDataLabels: true, highlightMouseOver: true }, }, legend: { show:true, location: 'e' } } );"; } else echo " var data =".$classes."; var plot2 = $.jqplot ('chart2', [data], { title: 'Classes - click to refine', grid: {borderColor: 'white', shadow: false, drawBorder: false}, seriesDefaults: { // Make this a pie chart. renderer: jQuery.jqplot.PieRenderer, rendererOptions: { // By default, labels show the percentage of the slice. showDataLabels: true, // fill: false, // sliceMargin: 4, // lineWidth: 6, highlightMouseOver: true }, }, legend: { show:true, location: 'e' } } ); "; ?> <?php if(!empty($speciesYear) && $speciesYear!="[]"):?> $.jqplot.config.enablePlugins = true; var data=<?php echo $speciesYear;?>; var plot1 = $.jqplot('chartspecies', [data], { title:'Number of species, grouped by year', seriesDefaults: { showMarker:true, pointLabels: { show:true } }, axes:{ xaxis:{ renderer:$.jqplot.DateAxisRenderer, tickOptions:{formatString:'%Y'}, tickInterval:'1 year', min:'January 1, <?php echo ($yearMin-1);?> 8:00AM', } }, series:[{ lineWidth:4, markerOptions:{ style:'square' } }], // cursor:{ // zoom:true, // looseZoom: true // } }); <?php endif;?> var samplesAll=<?php echo $samplesYearAll;?>; var samplesDNA=<?php echo $samplesYearDNA;?>; var samplesTissue=<?php echo $samplesYearTissue;?>; var samplesCulture=<?php echo $samplesYearCulture;?>; var samplesSpecimen=<?php echo $samplesYearSpecimen;?>; var samplesEnviro=<?php echo $samplesYearEnviro;?>; $.jqplot.config.enablePlugins = true; var sampleplot = $.jqplot('chartsamples', [samplesAll, samplesDNA, samplesTissue, samplesCulture, samplesSpecimen, samplesEnviro], { title:'Sample types, grouped by month', seriesDefaults: { showMarker:false, pointLabels: { show:false } }, axes:{ xaxis:{ renderer:$.jqplot.DateAxisRenderer, rendererOptions:{ tickRenderer:$.jqplot.CanvasAxisTickRenderer }, tickOptions:{formatString:'%Y-%m',angle: 25}, tickInterval:'6 month', min:'January 1, 2009 8:00AM', }, yaxis: { } }, series:[{label: ' All',lineWidth:4, markerOptions:{style:'square'}}, {label: ' DNA',lineWidth:4, markerOptions:{style:'square'}}, {label: ' Tissue',lineWidth:4, markerOptions:{style:'square'}}, {label: ' Culture',lineWidth:4, markerOptions:{style:'square'}}, {label: ' Specimen',lineWidth:4, markerOptions:{style:'square'}}, {label: ' Enviro',lineWidth:4, markerOptions:{style:'square'}} ], legend: { show:true ,location: 'e' , placement : "outside", }, cursor:{ show: true, zoom:true, showTooltip:false } }); $('.button-reset').click(function() { sampleplot.resetZoom() }); $("#chart1a").bind('jqplotDataHighlight', function(ev, seriesIndex, pointIndex, data) { var $this = $(this); $this.attr('title', data[0] + ": " + data[1]); $this.css('cursor','pointer'); }); $("#chart1a").bind('jqplotDataUnhighlight', function(ev, seriesIndex, pointIndex, data) { var $this = $(this); $this.attr('title',""); $this.css('cursor',''); }); $("#chart1b").bind('jqplotDataHighlight', function(ev, seriesIndex, pointIndex, data) { var $this = $(this); $this.attr('title', data[0] + ": " + data[1]); $this.css('cursor','pointer'); }); $("#chart1b").bind('jqplotDataUnhighlight', function(ev, seriesIndex, pointIndex, data) { var $this = $(this); $this.attr('title',""); $this.css('cursor',''); }); $("#chart2").bind('jqplotDataHighlight', function(ev, seriesIndex, pointIndex, data) { var $this = $(this); $this.attr('title', data[0] + ": " + data[1]); $this.css('cursor','pointer'); }); $("#chart2").bind('jqplotDataUnhighlight', function(ev, seriesIndex, pointIndex, data) { var $this = $(this); $this.attr('title',""); $this.css('cursor',''); }); $("#chart2 .jqplot-table-legend-label").bind("click", function() { var $this = $(this); var url =""; <?php if (!empty($species)){ echo "var institution=$(location).attr('search').split(\"&\")[0].split(\"registry=\")[1];"; echo "url = 'http://'+$(location).attr('hostname')+'/".Yii::$app->params['siteName']."/search/browse?'+'institution='+institution+'&fullScientificName='+encodeURI($(this).text().split('(')[0].trim()+'*');"; echo "$(location).attr('href',url);"; }else{ if (!empty($genera)) echo "url += '&genus='+$(this).text().split('(')[0].trim();"; else if (!empty($families)) echo "url += '&family='+$(this).text().split('(')[0].trim();"; else if (!empty($orders)) echo "url += '&ordo='+$(this).text().split('(')[0].trim();"; else if (!empty($classes)) echo "url += '&classis='+$(this).text().split('(')[0].trim();"; echo "$(location).attr('href',$(location).attr('href')+url);"; } ?> }); $('#chart2').bind('jqplotDataClick', function (ev, seriesIndex, pointIndex, data) { $('#info3').html('You clicked on '+ data.toString().split('(')[0]); var url =""; <?php if (!empty($species)){ echo "var institution=$(location).attr('search').split(\"&\")[0].split(\"registry=\")[1];"; echo "url += 'http://'+$(location).attr('hostname')+'/".Yii::$app->params['siteName']."/search/browse?'+'institution='+institution+'&fullScientificName='+encodeURI(data.toString().split('(')[0].trim()+'*');"; echo "$(location).attr('href',url);"; }else{ if (!empty($genera)) echo "url += '&genus='+data.toString().split('(')[0].trim();"; else if (!empty($families)) echo "url += '&family='+data.toString().split('(')[0].trim();"; else if (!empty($orders)) echo "url += '&ordo='+data.toString().split('(')[0].trim();"; else if (!empty($classes)) echo "url += '&classis='+data.toString().split('(')[0].trim();"; echo "$(location).attr('href',$(location).attr('href')+url);"; } ?> }); $("#chartcontinent").bind('jqplotDataHighlight', function(ev, seriesIndex, pointIndex, data) { var $this = $(this); $this.attr('title', data[0] + ": " + data[1]); $this.css('cursor','pointer'); }); $("#chartcontinent").bind('jqplotDataUnhighlight', function(ev, seriesIndex, pointIndex, data) { var $this = $(this); $this.attr('title',""); $this.css('cursor',''); }); $('#chartcontinent').bind('jqplotDataClick', function (ev, seriesIndex, pointIndex, data) { var $this = $(this); var url =""; var sepa="?"; <?php echo "var institution=$(location).attr('search').split(\"&\")[0].split(\"registry=\")[1];"; if (! empty ( $countries )) { echo "url = 'http://'+$(location).attr('hostname')+'/".Yii::$app->params['siteName']."/search/browse?'+'institution='+institution+'&country='+encodeURI(data.toString().split('(')[0].trim());"; echo "$(location).attr('href',url);"; } else { echo "url = 'http://'+$(location).attr('hostname')+'/".Yii::$app->params['siteName']."/stats/index';"; echo "url += sepa+'continent='+data.toString().split('(')[0].trim()+'&institution='+institution;"; echo "$(location).attr('href',url);"; } ?> }); $("#chartcontinent .jqplot-table-legend-label").bind("click", function() { var $this = $(this); var url =""; var sepa="?"; <?php echo "var institution=$(location).attr('search').split(\"&\")[0].split(\"registry=\")[1];"; if (! empty ( $countries )) { echo "url = 'http://'+$(location).attr('hostname')+'/".Yii::$app->params['siteName']."/search/browse?'+'institution='+institution+'&country='+encodeURI($(this).text().split('(')[0].trim());"; echo "$(location).attr('href',url);"; } else { echo "url = 'http://'+$(location).attr('hostname')+'/".Yii::$app->params['siteName']."/stats/details';"; echo "url += sepa+'continent='+$(this).text().split('(')[0].trim()+'&institution='+institution;"; echo "$(location).attr('href',url);"; } ?> }); $("#chartocean").bind('jqplotDataHighlight', function(ev, seriesIndex, pointIndex, data) { var $this = $(this); $this.attr('title', data[0] + ": " + data[1]); $this.css('cursor','pointer'); }); $("#chartocean").bind('jqplotDataUnhighlight', function(ev, seriesIndex, pointIndex, data) { var $this = $(this); $this.attr('title',""); $this.css('cursor',''); }); $('#chartocean').bind('jqplotDataClick', function (ev, seriesIndex, pointIndex, data) { var $this = $(this); var url =""; var sepa="?"; <?php echo "var institution=$(location).attr('search').split(\"&\")[0].split(\"registry=\")[1];"; if (! empty ( $seas )) { echo "url = 'http://'+$(location).attr('hostname')+'/".Yii::$app->params['siteName']."/search/browse?'+'institution='+institution+'&sea='+encodeURI(data.toString().split('(')[0].trim());"; echo "$(location).attr('href',url);"; } else { echo "url = 'http://'+$(location).attr('hostname')+'/".Yii::$app->params['siteName']."/stats/details';"; echo "url += sepa+'ocean='+data.toString().split('(')[0].trim()+'&institution='+institution;"; echo "$(location).attr('href',url);"; } ?> }); $("#chartocean .jqplot-table-legend-label").bind("click", function() { var $this = $(this); var url =""; var sepa="?"; <?php echo "var institution=$(location).attr('search').split(\"&\")[0].split(\"registry=\")[1];"; if (! empty ( $seas )) { echo "url = 'http://'+$(location).attr('hostname')+'/".Yii::$app->params['siteName']."/search/browse?'+'institution='+institution+'&sea='+encodeURI($(this).text().split('(')[0].trim());"; echo "$(location).attr('href',url);"; } else { echo "url = 'http://'+$(location).attr('hostname')+'/".Yii::$app->params['siteName']."/stats/details';"; echo "url += sepa+'ocean='+$(this).text().split('(')[0].trim()+'&institution='+institution;"; echo "$(location).attr('href',url);"; } ?> }); $('#chart1a').bind('jqplotDataClick', function (ev, seriesIndex, pointIndex, data) { var url =""; var burl=$(location).attr('href').split("?")[0]; var filter=$(location).attr('href').split("?")[1]; var sep="?"; if(filter !=null){ var filters=filter.split("&"); for (i=0;i<filters.length;i++){ if (filters[i].indexOf("sampletype")==-1 ){ if(i==0 || sep=="?"){ url+=sep+filters[i]; sep="&"; } else url+=sep+filters[i]; }else{ var oldvalue=filters[i].split("sampletype=")[1]; if(oldvalue==data.toString().split('(')[0].trim()){ var institution=$(location).attr('search').split("&")[0].split("registry=")[1]; var url = 'http://'+$(location).attr('hostname')+'/<?php echo Yii::$app->params['siteName']?>/search/browse?'+'institution='+institution; for (j=0;j<filters.length;j++){ if(filters[j].indexOf("registry")==-1) url+="&"+filters[j]; } return $(location).attr('href',url); } } } url+=sep+'sampletype='+data.toString().split('(')[0].trim(); } else url+=sep+'sampletype='+data.toString().split('(')[0].trim(); $(location).attr('href',burl+url); }); $("#chart1a .jqplot-table-legend-label").bind("click", function() { var url =""; var burl=$(location).attr('href').split("?")[0]; var filter=$(location).attr('href').split("?")[1]; var sep="?"; if(filter !=null){ var filters=filter.split("&"); for (i=0;i<filters.length;i++){ if (filters[i].indexOf("sampletype")==-1 ){ if(i==0 || sep=="?"){ url+=sep+filters[i]; sep="&"; } else url+=sep+filters[i]; }else{ var oldvalue=filters[i].split("sampletype=")[1]; if(oldvalue==$(this).text().split('(')[0].trim()){ var institution=$(location).attr('search').split("&")[0].split("registry=")[1]; var url = 'http://'+$(location).attr('hostname')+'/<?php echo Yii::$app->params['siteName']?>/search/browse?'+'institution='+institution; for (j=0;j<filters.length;j++){ if(filters[j].indexOf("registry")==-1) url+="&"+filters[j]; } return $(location).attr('href',url); } } } url+=sep+'sampletype='+$(this).text().split('(')[0].trim(); } else url+=sep+'sampletype='+$(this).text().split('(')[0].trim(); $(location).attr('href',burl+url); }); $('#chart1b').bind('jqplotDataClick', function (ev, seriesIndex, pointIndex, data) { var url =""; var burl=$(location).attr('href').split("?")[0]; var filter=$(location).attr('href').split("?")[1]; var sep="?"; if(filter !=null){ var filters=filter.split("&"); for (i=0;i<filters.length;i++){ if (filters[i].indexOf("sampletype")==-1 ){ if(i==0 || sep=="?"){ url+=sep+filters[i]; sep="&"; } else url+=sep+filters[i]; }else{ var oldvalue=filters[i].split("sampletype=")[1]; if(oldvalue==data.toString().split('(')[0].trim()){ var institution=$(location).attr('search').split("&")[0].split("registry=")[1]; var url = 'http://'+$(location).attr('hostname')+'/<?php echo Yii::$app->params['siteName']?>/search/browse?'+'institution='+institution; for (j=0;j<filters.length;j++){ if(filters[j].indexOf("registry")==-1) url+="&"+filters[j]; } return $(location).attr('href',url); } } } url+=sep+'sampletype='+data.toString().split('(')[0].trim(); } else url+=sep+'sampletype='+data.toString().split('(')[0].trim(); $(location).attr('href',burl+url); }); $("#chart1b .jqplot-table-legend-label").bind("click", function() { var url =""; var burl=$(location).attr('href').split("?")[0]; var filter=$(location).attr('href').split("?")[1]; var sep="?"; if(filter !=null){ var filters=filter.split("&"); for (i=0;i<filters.length;i++){ if (filters[i].indexOf("sampletype")==-1 ){ if(i==0 || sep=="?"){ url+=sep+filters[i]; sep="&"; } else url+=sep+filters[i]; }else{ var oldvalue=filters[i].split("sampletype=")[1]; if(oldvalue==$(this).text().split('(')[0].trim()){ var institution=$(location).attr('search').split("&")[0].split("registry=")[1]; var url = 'http://'+$(location).attr('hostname')+'/<?php echo Yii::$app->params['siteName']?>/search/browse?'+'institution='+institution; for (j=0;j<filters.length;j++){ if(filters[j].indexOf("registry")==-1) url+="&"+filters[j]; } return $(location).attr('href',url); } } } url+=sep+'sampletype='+$(this).text().split('(')[0].trim(); } else url+=sep+'sampletype='+$(this).text().split('(')[0].trim(); $(location).attr('href',burl+url); }); try{ var t1= $('#chart1a.jqplot-target>table.jqplot-table-legend').height(); if(t1<$('#chart1a').height()) t1=$('#chart1a').height(); var t2= $('#chart2.jqplot-target>table.jqplot-table-legend').height(); if(t2<$('#chart2').height()) t2=$('#chart2').height(); $('.browser').css('height',t1+t2+150); }catch(e ){}; }); </script> </div>