Warning this is an old version.

Take me to the latest version

Chart Elements - Save as Image - Javascript

The image will appear here

Save Chart as Image

[ | | | ]

All this code was written by Sylvain Ab�lard.

Right click and 'save image'

This goes into the <head> of the page:

 
<!-- Include your JS library of choice here and fix the path
 
    <script src="javascripts/prototype.js" type="text/javascript"></script>
    <script src="javascripts/jquery/jquery-1.2.6.min.js" type="text/javascript"></script>
 
--->
 
<!-- I am using jQuery --->
<script src="js/jquery-1.2.6.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/swfobject.js"></script>
<script type="text/javascript">
 
swfobject.embedSWF(
  "open-flash-chart.swf", "my_chart",
  "550", "250", "9.0.0", "expressInstall.swf",
  {"data-file":"gallery/3d-bar-chart.php"} );
 
</script>
 
<script type="text/javascript">
 
OFC = {};
 
OFC.jquery = {
    name: "jQuery",
    version: function(src) { return $('#'+ src)[0].get_version() },
    rasterize: function (src, dst) { $('#'+ dst).replaceWith(OFC.jquery.image(src)) },
    image: function(src) { return "<img src='data:image/png;base64," + $('#'+src)[0].get_img_binary() + "' />"},
    popup: function(src) {
        var img_win = window.open('', 'Charts: Export as Image')
        with(img_win.document) {
            write('<html><head><title>Charts: Export as Image<\/title><\/head><body>' + OFC.jquery.image(src) + '<\/body><\/html>') }
		// stop the 'loading...' message
		img_win.document.close();
     }
}
 
// Using an object as namespaces is JS Best Practice. I like the Control.XXX style.
//if (!Control) {var Control = {}}
//if (typeof(Control == "undefined")) {var Control = {}}
if (typeof(Control == "undefined")) {var Control = {OFC: OFC.jquery}}
 
 
// By default, right-clicking on OFC and choosing "save image locally" calls this function.
// You are free to change the code in OFC and call my wrapper (Control.OFC.your_favorite_save_method)
// function save_image() { alert(1); Control.OFC.popup('my_chart') }
function save_image() { alert(1); OFC.jquery.popup('my_chart') }
function moo() { alert(99); };
</script>

This writes the chart into a div with id="my_chart", right click and view source to see it in action, [the tutorials have more details]

This goes into the <head> of the page:

 
// This is the part where I set up the three adapters.
// Please choose the one you need and discard others.
// I did this because I observed that in some frameworks (especially ExtJS),
// using the standard DOM modifiers breaks up the framework's inner workings.
 
OFC = {}
 
OFC.prototype = {
    name: "Prototype",
    version: function(src) { return $(src).get_version() },
    rasterize: function (src, dst) { $(dst).replace(new Element("img", {src: Control.OFC.image(src)})) },
    image: function(src) {return "data:image/png;base64," + $(src).get_img_binary()},
    popup: function(src) {
        var img_win = window.open('', 'Charts: Export as Image')
        with(img_win.document) {
            write("<html><head><title>Charts: Export as Image<\/title><\/head><body><img src='" + Control.OFC.image(src) + "' /><\/body><\/html>") }
     }
}
 
OFC.jquery = {
    name: "jQuery",
    version: function(src) { return $('#'+ src)[0].get_version() },
    rasterize: function (src, dst) { $('#'+ dst).replaceWith(Control.OFC.image(src)) },
    image: function(src) { return "<img src='data:image/png;base64," + $('#'+src)[0].get_img_binary() + "' />"},
    popup: function(src) {
        var img_win = window.open('', 'Charts: Export as Image')
        with(img_win.document) {
            write('<html><head><title>Charts: Export as Image<\/title><\/head><body>' + Control.OFC.image(src) + '<\/body><\/html>') }
     }
}
 
OFC.none = {
    name: "pure DOM",
    version: function(src) { return document.getElementById(src).get_version() },
    rasterize: function (src, dst) {
      var _dst = document.getElementById(dst)
      e = document.createElement("div")
      e.innerHTML = Control.OFC.image(src)
      _dst.parentNode.replaceChild(e, _dst);
    },
    image: function(src) {return "<img src='data:image/png;base64," + document.getElementById(src).get_img_binary() + "' />"},
    popup: function(src) {
        var img_win = window.open('', 'Charts: Export as Image')
        with(img_win.document) {
            write("<html><head><title>Charts: Export as Image<\/title><\/head><body>" + Control.OFC.image(src) + "<\/body><\/html>") }
     }
}
 
// Using an object as namespaces is JS Best Practice. I like the Control.XXX style.
if (!Control) {var Control = {}}
 
// By default, right-clicking on OFC and choosing "save image locally" calls this function.
// You are free to change the code in OFC and call my wrapper (Control.OFC.your_favorite_save_method)
function save_image() { Control.OFC.popup('img_chart_1') }

This writes the chart into a div with id="my_chart", right click and view source to see it in action, [the tutorials have more details]

gallery/3d-bar-chart.php


<?php

include '../php-ofc-library/open-flash-chart.php';


srand((double)microtime()*1000000);
$data = array();

// add random height bars:
for( $i=0; $i<9; $i++ )
  $data[] = rand(2,9);
  
// make the last bar a different colour:
$bar = new bar_value(5);
$bar->set_colour( '#900000' );
$bar->set_tooltip( 'Hello<br>#val#' );
$data[] = $bar;

$title = new title( date("D M d Y") );

$bar = new bar_3d();
$bar->set_values( $data );
$bar->colour = '#D54C78';

$x_axis = new x_axis();
$x_axis->set_3d( 5 );
$x_axis->colour = '#909090';
$x_axis->set_labels( array(1,2,3,4,5,6,7,8,9,10) );

$chart = new open_flash_chart();
$chart->set_title( $title );
$chart->add_element( $bar );
$chart->set_x_axis( $x_axis );

echo $chart->toPrettyString();

To see the data produced : gallery/3d-bar-chart.php, then 'view source'.

Adverts:

Open Flash Chart logo by numb.me.uk. | Syntax highlights are by GeSHi

Warning this is an old version.

Advanced features

Chart Elements - Save as Image - Javascript

Save Chart as Image