html5 boiler plate
[scannr.git] / js / flotr2 / examples / js / examples / download-image.js
blob:a/js/flotr2/examples/js/examples/download-image.js -> blob:b/js/flotr2/examples/js/examples/download-image.js
--- a/js/flotr2/examples/js/examples/download-image.js
+++ b/js/flotr2/examples/js/examples/download-image.js
@@ -1,1 +1,98 @@
+(function () {
 
+Flotr.ExampleList.add({
+  key : 'download-image',
+  name : 'Download Image',
+  callback : download_image,
+  description : '' + 
+    '<form name="image-download" id="image-download" action="" onsubmit="return false">' +
+      '<label><input type="radio" name="format" value="png" checked="checked" /> PNG</label>' +
+      '<label><input type="radio" name="format" value="jpeg" /> JPEG</label>' +
+
+      '<button name="to-image" onclick="CurrentExample(\'to-image\')">To Image</button>' +
+      '<button name="download" onclick="CurrentExample(\'download\')">Download</button>' +
+      '<button name="reset" onclick="CurrentExample(\'reset\')">Reset</button>' +
+    '</form>'
+});
+
+function download_image (container) {
+
+  var
+    d1 = [],
+    d2 = [],
+    d3 = [],
+    d4 = [],
+    d5 = [],
+    graph,
+    i;
+  
+  for (i = 0; i <= 10; i += 0.1) {
+    d1.push([i, 4 + Math.pow(i,1.5)]);
+    d2.push([i, Math.pow(i,3)]);
+    d3.push([i, i*5+3*Math.sin(i*4)]);
+    d4.push([i, i]);
+    if( i.toFixed(1)%1 == 0 ){
+      d5.push([i, 2*i]);
+    }
+  }
+
+  // Draw the graph
+  graph = Flotr.draw(
+    container,[ 
+      {data:d1, label:'y = 4 + x^(1.5)', lines:{fill:true}}, 
+      {data:d2, label:'y = x^3', yaxis:2}, 
+      {data:d3, label:'y = 5x + 3sin(4x)'}, 
+      {data:d4, label:'y = x'},
+      {data:d5, label:'y = 2x', lines: {show: true}, points: {show: true}}
+    ],{
+      title: 'Download Image Example',
+      subtitle: 'You can save me as an image',
+      xaxis:{
+        noTicks: 7, // Display 7 ticks.
+        tickFormatter: function(n){ return '('+n+')'; }, // => displays tick values between brackets.
+        min: 1,  // => part of the series is not displayed.
+        max: 7.5, // => part of the series is not displayed.
+        labelsAngle: 45,
+        title: 'x Axis'
+      },
+      yaxis:{
+        ticks: [[0, "Lower"], 10, 20, 30, [40, "Upper"]],
+        max: 40,
+        title: 'y = f(x)'
+      },
+      y2axis:{color:'#FF0000', max: 500, title: 'y = x^3'},
+      grid:{
+        verticalLines: false,
+        backgroundColor: 'white'
+      },
+      HtmlText: false,
+      legend: {
+        position: 'nw'
+      }
+  });
+
+  this.CurrentExample = function (operation) {
+
+    var
+      format = $('#image-download input:radio[name=format]:checked').val();
+    if (Flotr.isIE && Flotr.isIE < 9) {
+      alert(
+        "Your browser doesn't allow you to get a bitmap image from the plot, " +
+        "you can only get a VML image that you can use in Microsoft Office.<br />"
+      );
+    }
+
+    if (operation == 'to-image') {
+      graph.download.saveImage(format, null, null, true)
+    } else if (operation == 'download') {
+      graph.download.saveImage(format);
+    } else if (operation == 'reset') {
+      graph.download.restoreCanvas();
+    }
+  };
+
+  return graph;
+};
+
+})();
+