1. Michel Sabchuk
  2. jqplot

Commits

cleo...@USDFPX5LN1.vistcorp.ad.visteon.com  committed 550cbc7

Added function to export an img tag to image exporting functionality.
Enhanced examples for new export capabilities.

  • Participants
  • Parent commits 18f31b0
  • Branches default

Comments (0)

Files changed (7)

File examples/barTest.html

View file
 		});
 	});</script> 
 
-  
-    <script type="text/javascript">    
-        $(document).ready(function(){
-            $('script.code').each(function(index) {
-                $('pre.code').eq(index).text($(this).html());
-            });
-            $('script.common').each(function(index) {
-                $('pre.common').eq(index).html($(this).html());
-            });
-            $(document).unload(function() {$('*').unbind(); });
-        });
-    </script> 
+<script type="text/javascript" src="example.js"></script>
     
   </head>
   <body>

File examples/barTest2.html

View file
     });
   });
   </script>
-  
-    <script type="text/javascript">    
-        $(document).ready(function(){
-            $('script.code').each(function(index) {
-                $('pre.code').eq(index).text($(this).html());
-            });
-            $('script.common').each(function(index) {
-                $('pre.common').eq(index).html($(this).html());
-            });
-            $(document).unload(function() {$('*').unbind(); });
-        });
-    </script> 
+
+<script type="text/javascript" src="example.js"></script> 
     
   </head>
   <body>

File examples/bubbleChart2.html

View file
     [18, 17, 539, "Audi"], [7, 89, 864, "BMW"], [2, 13, 1026, "Bugatti"]];
     
     plot2 = $.jqplot('chart2',[arr],{
-        title: 'Bubble Gradient Fills<sup>*</sup>',
+        title: 'Bubble Gradient Fills*',
         seriesDefaults:{
             renderer: $.jqplot.BubbleRenderer,
             rendererOptions: {
 });</script>
 
 
-<script type="text/javascript">
-    $(document).ready(function(){
-        
-        $('script.code').each(function(index) {
-            $('pre.code').eq(index).text($(this).html());
-        })
-        $(document).unload(function() {$('*').unbind(); });
-    });
-</script> 
+<script type="text/javascript" src="example.js"></script>
 
   </head>
   <body>

File examples/canvasOverlay.html

View file
 
 </script>
 
-<script type="text/javascript">    
-    $(document).ready(function(){
-        $('script.code').each(function(index) {
-            $('pre.code').eq(index).text($(this).html());
-        });
-        $('script.common').each(function(index) {
-            $('pre.common').eq(index).html($(this).html());
-        });
-        $(document).unload(function() {$('*').unbind(); });
-    });
-</script> 
+<script type="text/javascript" src="example.js"></script>
     
   </head>
   <body>

File examples/example.js

View file
 
     if (!$.jqplot.use_excanvas) {
         $('div.jqplot-target').each(function(){
-            // Add a view image button
+            var outerDiv = $(document.createElement('div'));
+            var header = $(document.createElement('div'));
+            var div = $(document.createElement('div'));
+
+            outerDiv.append(header);
+            outerDiv.append(div);
+
+            outerDiv.addClass('jqplot-image-container');
+            header.addClass('jqplot-image-container-header');
+            div.addClass('jqplot-image-container-content');
+
+            header.html('Right Click to Save Image As...');
+
+            var close = $(document.createElement('a'));
+            close.addClass('jqplot-image-container-close');
+            close.html('Close');
+            close.attr('href', '#');
+            close.click(function() {
+                $(this).parents('div.jqplot-image-container').hide(500);
+            })
+            header.append(close);
+
+            $(this).after(outerDiv);
+            outerDiv.hide();
+
+            outerDiv = header = div = close = null;
+
             var btn = $(document.createElement('button'));
-            btn.text('View as PNG');
+            btn.text('View Plot Image');
+            btn.addClass('jqplot-image-button');
             btn.bind('click', {chart: $(this)}, function(evt) {
-            evt.data.chart.jqplotViewImage();
+                var imgelem = evt.data.chart.jqplotToImageElem();
+                var div = $(this).nextAll('div.jqplot-image-container').first();
+                div.children('div.jqplot-image-container-content').empty();
+                div.children('div.jqplot-image-container-content').append(imgelem);
+                div.show(500);
+                div = null;
             });
+
             $(this).after(btn);
-
-            // add a save image button
-            btn = $(document.createElement('button'));
-            btn.text('Save as PNG');
-            btn.bind('click', {chart: $(this)}, function(evt) {
-            evt.data.chart.jqplotSaveImage();
-            });
-            $(this).after(btn);
+            btn.after('<br />');
             btn = null;
         });
     }

File examples/examples.css

View file
     
 p {
     margin: 2em 0;
+}
+
+div.jqplot-image-container {
+    display: none;
+    background-color: #fff;
+    border: 1px solid #999;
+    display: inline-block;
+    margin-top: 25px;
+}
+
+div.jqplot-image-container-header {
+    font-size: 1.0em;
+    font-weight: bold;
+    padding: 5px 15px;
+    background-color: #eee;
+}
+
+div.jqplot-image-container-content {
+    padding: 15px;
+}
+
+a.jqplot-image-container-close {
+    float: right;
 }

File src/jqplot.toImage.js

View file
         return style.join(' ');
     };
 
-    $.fn.jqplotToImageCanvas = function(x_offset, y_offset) {
 
-        x_offset = (x_offset == null) ? 0 : x_offset;
-        y_offset = (y_offset == null) ? 0 : y_offset;
+
+    /**
+     * Namespace: $.fn
+     * jQuery namespace to attach functions to jQuery elements.
+     *  
+     */
+
+    $.fn.jqplotToImageCanvas = function(options) {
+
+        options = options || {};
+        x_offset = (options.x_offset == null) ? 0 : options.x_offset;
+        y_offset = (options.y_offset == null) ? 0 : options.y_offset;
+        backgroundColor = (options.backgroundColor == null) ? 'rgb(255,255,255)' : options.backgroundColor;
 
         if ($(this).width() == 0 || $(this).height() == 0) {
             return null;
         newCanvas.height = h + Number(y_offset);
 
         var newContext = newCanvas.getContext("2d"); 
+
+        newContext.save();
+        newContext.fillStyle = backgroundColor;
+        newContext.fillRect(0,0, newCanvas.width, newCanvas.height);
+        newContext.restore();
+
         newContext.translate(transx, transy);
         newContext.textAlign = 'left';
         newContext.textBaseline = 'top';
         return newCanvas;
     };
 
-    $.fn.jqplotToImageStr = function(x_offset, y_offset) {
-        var imgCanvas = $(this).jqplotToImageCanvas(0,0);
+    $.fn.jqplotToImageStr = function(options) {
+        var imgCanvas = $(this).jqplotToImageCanvas(options);
         if (imgCanvas) {
             return imgCanvas.toDataURL("image/png");
         }
 
     // create an <img> element and return it.
     // Should work on canvas supporting browsers.
-    $.fn.jqplotToImageElem = function(x_offset, y_offset) {
+    $.fn.jqplotToImageElem = function(options) {
         var elem = document.createElement("img");
-        var str = $(this).jqplotToImageStr(x_offset, y_offset);
+        var str = $(this).jqplotToImageStr(options);
         elem.src = str;
         return elem;
     };
     // Not gauranteed to work, even on canvas supporting browsers due to 
     // limitations with location.href and browser support.
     $.fn.jqplotSaveImage = function() {
-        var imgData = $(this).jqplotToImageStr(0,0);
+        var imgData = $(this).jqplotToImageStr(options);
         if (imgData) {
             window.location.href = imgData.replace("image/png", "image/octet-stream");
         }