Merge pull request #1732 from phil-davis/traffic-graphs-widget

2 files changed, 19 insertions, 4 deletions

diff --git a/usr/local/www/widgets/javascript/traffic_graph.js b/usr/local/www/widgets/javascript/traffic_graph.js
index 66a70f5..383a549 100644
--- a/usr/local/www/widgets/javascript/traffic_graph.js
+++ b/usr/local/www/widgets/javascript/traffic_graph.js
@@ -1,6 +1,12 @@
-function trafficshowDiv(incDiv,swapButtons) {
-	//appear element
+function trafficshowDiv(incDiv,ifDescription,refreshIntervalSec,swapButtons) {
+	// put the graph object HTML in the element and make it appear
 	selectedDiv = incDiv + "graphdiv";
+	jQuery('#' + selectedDiv).html(
+		'<object data="graph.php?ifnum=' + incDiv + '&amp;ifname=' + ifDescription + '&amp;timeint=' + refreshIntervalSec + '&amp;initdelay=0" height="100%" width="100%">' +
+		'<param name="id" value="graph" />' +
+		'<param name="type" value="image/svg+xml" />' +
+		'<param name="pluginspage" value="http://www.adobe.com/svg/viewer/install/auto" />' +
+		'</object>');
 	jQuery('#' + selectedDiv).effect('blind',{mode:'show'},1000);
 	d = document;
 	if (swapButtons) {
@@ -16,8 +22,9 @@ function trafficshowDiv(incDiv,swapButtons) {
 }
 
 function  trafficminimizeDiv(incDiv,swapButtons) {
-	//fade element
+	// remove the graph object HTML from the element (so it does not keep using CPU) and fade
 	selectedDiv = incDiv + "graphdiv";
+	jQuery('#' + selectedDiv).html('');
 	jQuery('#' + selectedDiv).effect('blind',{mode:'hide'},1000);
 	d = document;
 	if (swapButtons) {
diff --git a/usr/local/www/widgets/widgets/traffic_graphs.widget.php b/usr/local/www/widgets/widgets/traffic_graphs.widget.php
index c9f92b6..c5f6286 100644
--- a/usr/local/www/widgets/widgets/traffic_graphs.widget.php
+++ b/usr/local/www/widgets/widgets/traffic_graphs.widget.php
@@ -167,17 +167,25 @@ foreach ($ifdescrs as $ifname => $ifdescr) {
 				<div align="right" style="float:right;width:49%">
 					<div id="<?=$ifname;?>graphdiv-min" onclick='return trafficminimizeDiv("<?= $ifname ?>", true);'
 						style="display:<?php echo $mingraphbutton;?>; cursor:pointer" ><img src="./themes/<?= $g['theme']; ?>/images/icons/icon_minus.gif" alt="Minimize <?=$ifname;?> traffic graph" /></div>
-					<div id="<?=$ifname;?>graphdiv-open" onclick='return trafficshowDiv("<?= $ifname ?>", true);'
+					<div id="<?=$ifname;?>graphdiv-open" onclick='return trafficshowDiv("<?= $ifname ?>", "<?= rawurlencode($ifdescr); ?>", "<?= $refreshinterval ?>", true);'
 						style="display:<?php echo $showgraphbutton;?>; cursor:pointer" ><img src="./themes/<?= $g['theme']; ?>/images/icons/icon_open.gif" alt="Show <?=$ifname;?> traffic graph" /></div>
 				</div>
 				<div style="clear:both;"></div>
 			</div>
 			<div id="<?=$ifname;?>graphdiv" style="display:<?php echo $graphdisplay;?>">
+<?php
+		// If the graph is already enabled by the config then put the object inside the div now.
+		// Otherwise the graph object is inserted by trafficshowDiv JS when the user opens it.
+		if ($graphdisplay == "inline") {
+?>
 				<object data="graph.php?ifnum=<?=$ifname;?>&amp;ifname=<?=rawurlencode($ifdescr);?>&amp;timeint=<?=$refreshinterval;?>&amp;initdelay=<?=$graphcounter * 2;?>" height="100%" width="100%">
 					<param name="id" value="graph" />
 					<param name="type" value="image/svg+xml" />
 					<param name="pluginspage" value="http://www.adobe.com/svg/viewer/install/auto" />
 				</object>
+<?php
+		}
+?>
 			</div>
 		</div>
 	<?php }