15 Jan, 2009
Open Flash Chart 101: Make it %#$@!?* work
Posted by: j pimmel In: information visualisation|javascript
I have recently been attempting to get my head around Open Flash Chart to, at the very least, get an equivalent ‘Hello World’ version running before I run off customising it. Should be simple right? Well yes, once you get around a real showstopping gotcha which isn’t documented out there.
The starting point, this tutorial example. As you can see, everything is well with that example. Following my usual logic, I downloaded the following relevant page items
- json2.js
- swfobject.js
- open-flash-chart.swf
I created a local HTML into which I copy pasted the pertintent source from the tutorial example, changing script and page references to use same directory for the three page items above. I fully qualified the JSON data url to {“data-file” : ”http://teethgrinder.co.uk/open-flash-chart-2/gallery/tooltip.php” } - cross site yes, but its just JSON data right?
On loading the chart into my browser offf the filesystem I didn’t get the chart expected, instead I got what is pictured below
Using Firebug reveals some interesting things – yes the JS files are there and loading. Given that the spinning thing is in fact the SWF file loaded into the browser that has to have loaded too and it’s running too.. well, sort of. So why no graph?
Make my data local?
Fair enough I thought, perhaps its some cross-site thing after all. I made the JSON data that is handed to the SWF local to the page; embedding JSON data in page for the graph is shown by example here and making that change was easy. But once again no joy.
Make my data served?
I couldn’t see why, but maybe serving the content over HTTP would do something for me. Taking all the same resources and uploading them to the server here was what finally delivered a working chart example of my own making, reading the JSON data from inside it’s own page.
But why?
Assuming you have visited the above links, you will have noted the alerts which come up when the browser SWF successfully drawing a graph. I reasoned that maybe a local page load wasn’t firing the Javascript onLoad event? A quick local page test of
<body onLoad="alert('hello world!')">
proved me wrong.
Just don’t cross-site the content
What is clear is that no working charts I have found make references to any SWF/JS/JSON data resources which are outside of the same domain. Thats perhaps logical, but you might also like to be notified as such – at present OFC gives you no indication, not even a hint, that you have this problem. The only instance where you get a sniff of this is revealed in Firebug when visiting this version of the chart I am serving.
Coming up short
Sadly I dont have the answer to why the chart fails to draw when you attempt to run it locally from files vs when it is served up.
I know that the SWF is executing some ActionScript which is doing the magic somewhere which ultimately leads to the invocation of the Javascript ‘ofc_ready’ method. Its not clear how those bindings are different when loaded locally vs when served, but this problem could also easily be masked by cross-site complexities. Its seems pretty evident that the browser is triggering an event in the loaded SWF plugin in one instance but not the other.
If anyone has any deeper knowledge or thoughts as to why it would be good to know the details – please feel free to comment!
UPDATE (30th March 2009): We recently found out how to toggle local loading. The reason it doesn’t comes down to flash player sandboxing
Add permission for SWF files (woot!)
