Page last modified 01:23, 10 Jun 2010 by carles.coll

Template:OpenFlashChart

1. Documentation
1. 1.1. Summary
2. 1.2. Version History
3. 1.3. Template Parameters

Documentation

This box includes basic usage information for this template. When calling the template, this documentation will not appear. Functional template code should be placed outside the dotted box.

Summary

Template Description	implementation of OpenFlashChart in deki
Requirements	json2.js, open-flash-chart.swf(renamed ofc.swf here), Bluff graphing template
Documentation URL	http://developer.mindtouch.com/User:neels/OpenFlashChart
Discussion URL

Version History

Place newest version at the top of the table.

Version	Date	Author	Description
0.3	2010/05/21	neels	added bluff fallback for non-flash browsers; animation type; calculated ymax and ystep values; added optional button to display chart as image for easy saving and re-use in offline documents; fixed tooltip hover display for bar-graphs;
0.2	26/03/2010	carles.coll	add id parameter ( it allows more than 1 chart per page )
0.1	24/03/2010	neels	first release

Template Parameters

Name	Type	Default	Description
data	list	NULL	list of the data to graph
labels	list	NULL	list of the x-axis labels
title	string	NULL	title of the graph
type	string	'bar_glass'	the type of graph to display
ymax	num	max value of data	the maximum value on the y-axis
ystep	num	splits axis into 10	the step of values on the y-axis
width	num	550	the width in pixels of the graph
height	num	600	the height in pixels of the graph
anim_type	string	pop	choose one of pop-up, fade-in, drop, grow-up, grow-down or pop
id	string	'my_data'	to identify the chart if we have more than one chart per page
image	bool	false	show save as image button

// UNSAFECONTENT PERMISSION CHECK
// This code checks if the template is properly installed for unsafe content execution,
// and may be removed if this check is not desired.  If you leave this here, add your new code
// in a new DekiScript block below this one.
var chkunsafe = wiki.inclusions()[-1];
if (!wiki.pagepermissions(chkunsafe.id, chkunsafe.author.id).unsafecontent)
  <div style="color:red; width:75%; padding:5px; border:1px solid red;">
    "WARNING: The page '"..chkunsafe.path.."' must be re-saved by a user with UNSAFECONTENT permission in order to work correctly. ";
    <a href="http://developer.mindtouch.com/en/kb/Using_templates_which_require_UNSAFECONTENT_permission"> "See this" </a>;
    " for more info."; 
  </div>;

var data_1 = $0 ?? $data ?? '';
var label_1 = $1 ?? $labels ?? '';
var title = $2 ?? $title ?? '';
var type = $3 ?? $type ?? 'bar_glass';
var ymax = $4 ?? $ymax;
var ystep = $5 ?? $ystep;
var width = $6 ?? $width ?? 550;
var height = $7 ?? $height ?? 600;
var anim_type = $8 ?? $anim_type ?? 'pop'; // pop-up,fade-in,drop,grow-up,grow-down,pop
var id = $9 ?? $id ?? 'my_data';
var image = $10 ?? $image ?? false;

var errors = [];

if (data_1 is not list) {
    if (data_1 is not nil) let errors ..= [ "Data must be a list of maps" ];
    let data_1 = [];
};
if (label_1 is not list) {
    if (label_1 is not nil) let errors ..= [ "Labels must be a list of maps" ];
    let label_1 = [];
};

if (!ymax) let ymax ..= list.max(data_1);

if (!ystep) let ystep ..= num.ceiling(ymax/10);

<html>
<head>
<script type="text/javascript" src=(site.api.."/files/5923/=json2.js")></script>;
<script type="text/javascript" src=(site.uri.."skins/common/swfobject.js")></script>;

<script type="text/javascript"> "
  swfobject.embedSWF(
  '"..site.api.."/files/5942/=ofc.swf',
  '"..id.."',
  '"..json.emit(width).."', 
  '"..json.emit(height).."', 
  '9.0.0',
  'expressInstall.swf',
  {'get-data':'open_flash_chart_data_"..id.."'}
);
"</script>;

<script type="text/javascript"> "

function ofc_ready()
{
//	alert('ofc_ready');
}
 
function open_flash_chart_data_"..id.."()
{
//	alert( 'reading data' );
	return JSON.stringify(data_"..id..");
}
 
function findSWF(movieName) {
  if (navigator.appName.indexOf(\"Microsoft\")!= -1) {
    return window[movieName];
  } else {
    return document[movieName];
  }
}

var data_"..id.." = {
  \"elements\": [
    {
      \"type\": "..json.emit(type)..",
      \"on-show\":{
        \"type\":"..json.emit(anim_type)..",

        \"cascade\":2,
        \"delay\":1
      },
      \"alpha\":0.6,
      \"animate\": [
        {
          \"type\": \"fade\"
        },
        {
          \"type\": \"bounce\",
          \"distance\": 15
        }
      ],
      \"values\": "..json.emit(data_1)..", 
      \"tip\": \"#val#\"
    }
  ],
  \"title\": {
  \"text\": "..json.emit(title).."
  },
  \"x_axis\": {
    \"steps\": 1,
    \"labels\": {
      \"labels\": "..json.emit(label_1)..",
      \"steps\": 1,
      \"rotate\": 315
    }
  },
  \"bg_colour\": \"#FFFFFF\",
  \"y_axis\": {
    \"min\": 0, 
    \"max\": "..json.emit(ymax)..", 
    \"steps\": "..json.emit(ystep).." 
  },
  \"tooltip\": {
    \"mouse\": 2,
    \"stroke\": 1
  }
};
 
"</script>; 

<script type="text/javascript">"
 
OFC = {};
 
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><h1>Chart from "..page.title.."&nbsp;<span style=\"font-size:small\">"..web.link(page.uri).."<\/span> <\/h1><hr \/><br \/>Retrieved on "..date.format(date.now,'dddddd, dd MMMM yyyy @ HH:mm:ss').."<br \/>' + Control.OFC.image(src) + '<div><br \/><hr \/>Right-click the image and save to your computer to allow use in documents\/spreadsheets and so on.<\/div><\/body><\/html>') }
     }
}

if (typeof(Control == \"undefined\")) {var Control = {OFC: OFC.none}}
function save_image() { OFC.none.popup('"..id.."') };
"</script>

</head>
<body>
if (#errors) {<div style="color:red">
    <strong> "ERRORS:" </strong>;
    <ul> foreach (var e in errors) <li> e </li>; </ul>;
</div>;}
<div id="chart-wrapper" style="text-align:center;"> 
  <div id=(id)>bluff {
    type: "Bar",
    size: [width,height],
    theme: "pastel",
    y: { min: 0, max:ymax, inc:num.ceiling(ymax/10) },
    labels:label_1,
    data: [{data:data_1}],title: title
};<br /><br /><br /><br /></div>;
if (image) {
  <div style="text-align:center;">
    <input type="button" value="See graph as an image" ctor="when($this.click) OFC.none.popup({{id}});" />' (Opens in a new window)';
  </div>;
}
</div>; </body>; 
</html>;

Tag page
What links here

Files 0

Attach file or image

Images 0
No images to display in the gallery.

Viewing 4 of 4 comments: view all

carles.coll says:

@neilw - Hey we are coding at the same time!!!

Posted 13:25, 25 Mar 2010

neilw says:

@carles.coll
Yup. I stopped when I noticed and made my own private copy of this code. I'm trying to use media() extension to load the SWF file, but getting the same result (better to use media extension in general, but it's not fixing the problem.)

Posted 13:27, 25 Mar 2010

carles.coll says:

@neilw - Any Advance? I rewrite it all from another example of the official web and the same result for IE8 and FF.

Posted 14:11, 25 Mar 2010

neels says:

it seems to be getting a little further in chrome now carles.coll, but still doesn't actually ever load data. edited 14:28, 25 Mar 2010

Posted 14:27, 25 Mar 2010

Viewing 4 of 4 comments: view all

You must login to post a comment.

MindTouch Social Knowledge Base

Template:OpenFlashChart

Table of contents

Documentation

Summary

Version History

Template Parameters

Files 0

Table of contents

Login or Join Community

Template:OpenFlashChart

Table of contents

Documentation

Summary

Version History

Template Parameters

Files 0

Table of contents