Re: Open Flash Chart and AS3

[Frank]

Hi Eric,

just committed swfobject.joo.js which patches SWFObject 2.2+ to fall back to loading a Jangaroo alternative if no flash player is available.
You have to copy this script to your Web server (use github's "Raw" link!) and include it into the page right after where you include the original swfobject.js. If you don't want to change all your HTML pages, you can instead concatenate the original swfobject.js and swjobject.joo.js into a patched swfobject.js.
Then, you have to unzip the attached Jangaroo version of Open Flash Chart 2 into the same directory where open-flash-chart.swf is located on your Web server.
I tested this procedure with a patched copy of your Web site, and it works! I couldn't test on an iPad or the like, but I just temporarily disabled Flash on my desktop browsers. This works on Chrome, Firefox, and IE9.
If it doesn't work for you, don't hesitate to post again!
Please note that Jangaroo's Flash-to-HTML5 emulation is far from perfect (while the pure-ActionScript-to-JavaScript emulation is almost perfect!). For OFC2 this means for example that all charts have a fixed initial width and height (100% has no effect, thus your charts appear a bit smaller than in Flash) and for some reason, the hover text boxes don't appear (I think I have seen them in other charts).
I hope to come up with a Jangaroo-Open-Flash-Charts git repository using an up-to-date Jangaroo version soon...

Greetings
-Frank-

[Eric Plankeel]

Hi Frank,

Thanks for the (overnight) job.

Just followed your recipe and patched swfobject.js to the new version, which was easy. I uploaded and renamed the other file to expressInstall.js. 

Graphs on the website appear normal on a mac, but disabling flash results in JooFlash loading... Where should I look?

Regards,

Eric

[Eric Plankeel]

Hi Frank,

Did some further work and got a working solution on firefox with disabled flash, but not on iPhone. I had to copy the original open-flash-chart.js to the directory. The renamed version doesn't work. Got no graphs on iphone :-( 

[Frank]

Yes, you have to copy open-flash-chart.js to the directory where open-flash-chart.swf is located, not rename it to expressInstall.js (where did you get this idea? ;-)).
It seems you didn't patch your original Web site (of course), so I'll test my local setup on an iPad and report back.

[Eric Plankeel]

On Monday, July 9, 2012 11:25:04 AM UTC+2, Frank wrote:

Yes, you have to copy open-flash-chart.js to the directory where open-flash-chart.swf is located, not rename it to expressInstall.js (where did you get this idea? ;-)).
It seems you didn't patch your original Web site (of course), so I'll test my local setup on an iPad and report back.

It was a comment in the header which made me do so.

/**

 * A patch for SWFObject 2.2+ that falls back to loading a Jangaroo alternative if no flash

 * player is available.

 * The Jangaroo application is embedded into an iframe and has to come as a single JS file.

 * You have to rename the file jangaroo-application-all.js to the name of your SWF file

 * (only the extension remains .js in contrast to .swf).

 * Place this JS file in the same directory as the original SWF file. 

[Frank]

Ah yes, this comment is supposed to say the following: when you build your Jangaroo project with Maven, it produces a file "jangaroo-application-all.js" that contains all JavaScript merged into one file. This is the Jangaroo counterpart of your SWF, in your case open-flash-chart.swf, so you would have to rename "jangaroo-application-all.js" to "open-flash-chart.js". "expressInstall.swf" is a Flash that is supposed to direct the user to update his Flash player and is not related to OFC specifically.
The misunderstanding was that I already renamed the JS file before zipping it, so I didn't mention this step in the description in my post and didn't expect you to actually read the file comment! :-)

Concerning the test, I uploaded my local test copy of your page to my Web space and it works fine on my iPad 2. I do not have an iPhone to test, but if you do that and it still does not work, try switching on the "Debug Console" of Mobile Safari: In the iPhone's "Settings", select "Safari", then the last sub-menu "advanced" (or the like, my iPad's local is German), then toggle on "Debug Console". When returning to Safari, there should be a message counter at the top of the page as soon as any error (or warning or anything else) is logged. Tap that counter and you can scroll through the messages. Please report any errors you find (you can ignore the warnings for now).

[Eric Plankeel]

Turned it on,

JavaScript: Error

undefined

ReferenceError: Can't find variable: joo 

[Frank]

Seems it does not load the open-flash-chart.js at all, and then the inline script fails.

Was that the result on your own Web page or on my version? Could you try the other one?

[Eric Plankeel]

On Monday, July 9, 2012 12:46:30 PM UTC+2, Frank wrote:

Seems it does not load the open-flash-chart.js at all, and then the inline script fails.

Was that the result on your own Web page or on my version? Could you try the other one?

On my own site Jooflash runs on firefox with disabled flash (Mac OS X) It is public :-) On Safari with enabled flash I get the original site.

http://www.e2fb.nl/zphp 

[Frank]

I see. Your site works in principle on my iPad 2: it takes quite a while to process the first three plugins and seems to fail on the fourth one. They sure need a lot of resources. Maybe it is just too much, especially for the iPhone? Which iPhone / iOS version did you test on?
To keep resource needs more reasonable, I'd have to find a way to reuse the Jooflash code when there are multiple plugins on the same page. open-flash-chart.js is 800 kB large, and drawing into a canvas is not very efficient on iOS < 5.1... Maybe for the time being you have to set up a mobile version of your site where there is only one diagram per page...

[Eric Plankeel]

On Monday, July 9, 2012 3:13:43 PM UTC+2, Frank wrote:

I see. Your site works in principle on my iPad 2: it takes quite a while to process the first three plugins and seems to fail on the fourth one. They sure need a lot of resources. Maybe it is just too much, especially for the iPhone? Which iPhone / iOS version did you test on?
To keep resource needs more reasonable, I'd have to find a way to reuse the Jooflash code when there are multiple plugins on the same page. open-flash-chart.js is 800 kB large, and drawing into a canvas is not very efficient on iOS < 5.1... Maybe for the time being you have to set up a mobile version of your site where there is only one diagram per page...

Hi Frank,

This page is the one i'm most interested. http://www.e2fb.nl/zphp/dag_overzicht_vergelijk.php. Strange enough this one also generates 4 javascript errors on my iphone , but as far as I know there is only one swf on this page.

I own a iphone4 (not the s) running on ios 5.1.1 which is the latest version.

[Eric Plankeel]

On Monday, July 9, 2012 3:35:06 PM UTC+2, Eric Plankeel wrote:

Hi Frank,

This page is the one i'm most interested. http://www.e2fb.nl/zphp/dag_overzicht_vergelijk.php. Strange enough this one also generates 4 javascript errors on my iphone , but as far as I know there is only one swf on this page.

I own a iphone4 (not the s) running on ios 5.1.1 which is the latest version.

I disabled a footer with 3 flash objects and I was able to see the graph on the phone in another browser, but not in iphone's safari which still produces 1 javascript error. For testing I shortened the filename to dov.php

[Frank]

Hi Eric,

good news: I just took some manual effort to produce a minified version of open-flash-chart.js (579 kB instead of over 800), compiled with the latest Jangaroo compiler, using the latest JooFlash version.
On my iPad, it works much better than the previous version. For example, the boxes with the detailed numbers now appear!
I uploaded the file to my Web space, so you could test again with your iPhone on http://jangaron.net/ofc2/index.html and if it works (better), download the new version of open-flash-chart.js and replace the old version on your Web server.
Greetings
-Frank-

[Eric Plankeel]

Hi Frank,

I have downloaded the file and replaced it with the new version.

Quite impressive, the index.php stills causes the iphone to freeze but the dov.php runs ok, including the boxes with detailed information! This is quite promising. I guess there is still much to improve in speed by optimizing the code?

(FYI, I'll be offline from Thursday on to the start of August. Betriebsferien) 

[Frank]

Oops, seems your server is down, so I can't test with the iPad. As I said, my copy of your home page runs fine on iPad now, would like to see if this is any different when testing with your original home page.

Concerning speed optimization: It's rather not the code that is slow, but a) having to emulate Flash API through Canvas API and b) Canvas on iOS in principle.
For a), one of the main problems is that you cannot enlarge a Canvas after creation without clearing it (so everything rendered so far has to be backed-up and restored after enlarging the Canvas), and that is exactly what the Flash API requires. In Flash, conceptually you have an infinitely large drawing area which is resized on demand. Maybe I could use a larger Canvas an clip it to its actual current size...
For b), Canvas performance improved with several iOS updates, and there is still potential.

There is one possibility which might speed up things a lot: the folks at dartflash use SVG instead of Canvas. Their code would have to be ported from Dart to AS3, but that should be possible and maybe SVG is better suited to emulate Flash in HTML5. Of course, this is a rather long-term plan.

[Eric Plankeel]

Hi Frank,

Holidays are over :-( Time to go on with this project.

During the holidays I used Jooflash regularly and enjoyed it. I would like to share it with the ZonPHP community.

Things to improve before sharing:

-further reduce loading time

-adjust the size (static), optimized for i-devices

-go to a separate page ie index2.htm when no flash is available, to prevent hanging caused by loading 4 graphs at once in the original index.htm

Any suggestions?

Regards,

Eric

[Frank]

Hi Eric,

great to see you back on this topic!
As you can observe in the latest jangaroo-users thread and some of my tweets,
I am currently working on a completely revamped JooFlash version that renders
the whole display list into a single canvas. My last goal before releasing a new
jangaroo-libs version is to get OFC working at least as good as before (only
less resource-consuming!).
Currently, I'm tackling font metrics, but this seems solvable. Last thing is to dispatch
events to the correct event target, which, when done, should work much better
than before, especially for pie diagrams.

To decrease the static size of JavaScript code, there should be an optimized
Jangaroo packaging step that knows from which classes to starts and only
includes their transitive static dependencies. However, this will rather not make
it into the next release, so building a JS file with an optimized set of classes
will still require some manual work.
I'll keep you posted on my progress!

Greetings
-Frank-

[Frank]

Okay, I am approaching a state that can compete with the last stable one (feature-wise).

Please test the OFC "kitchen sink" on http://www.jangaron.net/ofc3/data-files/joo.html and tell me what you think!

Known issues:

• hovering/tooltips do not work for pie charts
  
• tooltips do not disappear when mousing out
• vertical text is not correctly aligned
  
• 45° text seems to have wrong height => wrong layout
  
• HTML markup in text is shown literally

Are these limitations okay for your charts?

[Eric Plankeel]

Hi Frank,

Seems you did a great job. The look and feel is OK, maybe a bit snappier as before. Since I use only a few different graphs it is OK for me. The only thing I think is a pity are the tooltips not disappear on mousing out. Does leaving out some graphtypes reduce the footprint? 

Regards,

Eric

(busy restoring data after a backup!disk crashed)

[Frank]

I think letting the tooltips disappear is the easiest fix, I'll get a try on this!
The footprint is larger since for testing, I used the full JooFlash version, not the one optimized for OFC. That'll change in the final version. Leaving out some graphs would of course reduce the footprint even more. Do you have a target size (say < 200 kB)?

[Eric Plankeel]

On Tuesday, August 14, 2012 1:03:51 PM UTC+2, Frank wrote:

I think letting the tooltips disappear is the easiest fix, I'll get a try on this!
The footprint is larger since for testing, I used the full JooFlash version, not the one optimized for OFC. That'll change in the final version. Leaving out some graphs would of course reduce the footprint even more. Do you have a target size (say < 200 kB)?

I don't have a target size, but for mobile use the leaner the better, since data traffic for mobile phone is still expensive in Europe.

[Frank]

Hey Eric,

after fixing several bugs (e.g. rotated label bounds) and implementing many additional features (e.g. DisplayObject#cacheAsBitmap and re-rendering only on changes) to improve performance/CPU usage, I just updated the JooFlash version in my copy of your overview web page: http://jangaron.net/ofc2/index.html

The only remaining quirks are:

* still about 600k (need a better approach to optimize Jangaroo-generated JS code!)

* (still) no tooltips on the first diagram, presumably because the bars are just one pixel wide, so mouse-over does not seem to fire

* on mobile devices, it does consider touch events to show tooltips, but the last tooltip does not hide, although I emulate the MOUSE_LEAVE event :-(

For anyone interested in other Open Flash Chart diagrams, I also updated the OFC "kitchen sink" at http://jangaron.net/ofc2/

After testing all other JooFlash demo applications, I'll release the new version!

Have fun,

-Frank-

[Frank]

Ah yes, if you decide to deploy that new version of JooFlash-OFC, all you need to update are

* swfobject.joo.js: http://jangaron.net/ofc2/js/swfobject.joo.js (again concat this file after the original swfobject.js)

* open-flash-chart.js: http://jangaron.net/ofc2/ofc/open-flash-chart.js

[Eric Plankeel]

Hi Frank,

Great you made the new version.Just started a new school year, resulting in a overall lack of spare time so the new version will have to wait until the weekend :-(

Do yo see any possibilities in reducing the footprint, or are you out of ideas? (because of this remark: I need a better approach to optimize Jangaroo-generated JS code!)

Regards,

Eric

[Frank]

When you look at the generated, white-space-stripped Jangaroo code, you still see a lot of "public static function foobar" string constants, which could easily be encoded in a much shorter fashion.

The most simple footprint reduction, however, is to zip the JS code and configure your web server to serve the gzipped version to any client who can deal with it. The 600kb become a mere 100kb when zipped.

Note that in practice, many proxies disable the corresponding "Accept" headers (I think Steve Souders wrote about this in his excellent book "Even Faster Web Sites"), so although the client would accept gzipped content, this information might get lost on the way to the server. But it is still worth trying.

Another thing you really have to configure correctly on your web server is that the JS file will be cached correctly by the client. If you do so, the footprint only affects each user/browser once, even for all your different pages, provided they all load the script from the same URL. Each follow-up request should result in a HTTP 304 (not changed) response. You can see this for example on the "Net" tab of firebug or Chrome developer tools.

Another approach could be this: Although I do not agree with everything Bernd Paradies writes about how generated JS code should look like, Jangaroo could follow his suggestion to generate JavaScript code that can be fully optimized with the Google Closure compiler. Currently, I had to fall back to "white-space-only" mode, as even "simple-optimization" resulted in broken code. I'll have to investigate on that.

[Eric Plankeel]

Hi Frank,

I have to invest in some reading to get sufficient knowledge :-(  I only found this website on a forum to monitor my PV-panels. Problem is that 99% of this site is PHP-based. Only the charts are JS. I like the concept with a database to store the data, rebuilding the site is not wanted, but repairing design faults others made is a tough job. It will take time, hope you'll be patient with me. Do you have some reading advice on the http 304 response?

Eric

[Frank]

Hi Eric!

On Tuesday, August 21, 2012 8:14:51 PM UTC+2, Eric Plankeel wrote:

Great you made the new version.Just started a new school year, resulting in a overall lack of spare time so the new version will have to wait until the weekend :-(

Any news on this? It should really be a drop-in replacement of the version you currently use...
 

Do yo see any possibilities in reducing the footprint, or are you out of ideas? (because of this remark: I need a better approach to optimize Jangaroo-generated JS code!)

Sure I do have ideas, but I ran out of quick-wins ;-)
As said above (I think), Jangaroo should utilize some minification tool like Google Closure and/or use its own dependency information to eliminate "dead code".

Greetings
-Frank-

[Eric Plankeel]

Hi Frank,

Just installed the new version on http://www.e2fb.nl/zonphp. Great to see the index.php page (with the 4 flash objects) loads without problems on an iPhone 4! This is an improvement. You did something on the image aspect? It looks a bit wider. Although I would like it to resize it a bit more to the size you can see here http://www.e2fb.nl/zonphp/nodagv.php which is an adapted frontend I use to wrap in my website.

The earlier Joo-version is still running at http://www.e2fb.nl/zphp so you can compare a live situation. This old version crashes the safaribrowser on the iPhone

Greetings,

Eric

(enjoying the solar energy produced on this nice day:-) )

[Frank]

On Monday, 27 August 2012 08:57:58 UTC+2, Eric Plankeel wrote:

Just installed the new version on http://www.e2fb.nl/zonphp. Great to see the index.php page (with the 4 flash objects) loads without problems on an iPhone 4! This is an improvement.

Yes, one of the main drivers to re-implement the rendering strategy was to save resources.

After adding Flash's cacheAsBitmap feature, I thought that this could be counter-productive on devices with fewer resources, as it creates many off-screen canvases into which objects are drawn. So caching bitmaps should render faster, but is also more memory-consuming! Thus I added a feature flag to switch off bitmap caching. To do so, in swfobject.joo.js, simply change the line that reads

  doc.write("<script>joo = { baseUrl: '../', debug: false};</script>");

to additionally set the global cacheAsBitmap flag to false:

  doc.write("<script>joo = { baseUrl: '../', debug: false}; cacheAsBitmap=false;</script>");

Would be great if you could experiment with which setting works faster / more stable on iPhone etc.!

You did something on the image aspect? It looks a bit wider. Although I would like it to resize it a bit more to the size you can see here http://www.e2fb.nl/zonphp/nodagv.php which is an adapted frontend I use to wrap in my website.

Yes, I hard-wired the size of your charts into the [SWF] annotation of Jangaroo's Open Flash Chart main class. In open-flash-chart.js, just search for 550 or 305 and replace it with the width / height you want. Currently, the same size is used for all diagrams.

Of course, this is not the way it should be. Instead, JooFlash should read the desired size from the swfobject parameters. That's my next item on the JooFlash road map, including "100%" width / height and resize events!

Greetings

-Frank-

[Eric Plankeel]

Hi Frank,

Just changed the line, you asked. Looks as f the load-time is improved with cacheAsBitmap=false. At the moment the load-time is very acceptable. Just switched from WiFI-mode to 3G to measure time.

Overall load-time for the index page, original new version is about 17 seconds. With cacheAsBitmap=false this is reduced to 15 seconds. (timemeasurement will not pass Olympic standards), so I'll keep this setting.

Greetings,

Eric

[Eric Plankeel]

Hi Frank,

Did some effort to remove clutter and enable gzip compression. I hope you see the improvement as well. Don't know if it is necessary to upgrade to a newer Jquery? I still use jquery-1.2.6.min.js and jquery-ui-1.6.custom.min.js and a json.js file from the same period. All js files are minified and gzip version is in the directory, but some webpages checking html compression report the jquery-ui-1.6.custom.min being not compressed?! I took the old site out, now http://www.e2fb.nl/zonphp is the only one. A header check on iPhone or iPad launches the simple site with buttons to navigate.

Did you get along with the sizing question?

Greetings,

Eric

[Eric Plankeel]

On Monday, August 27, 2012 9:20:36 AM UTC+2, Frank wrote:

On Monday, 27 August 2012 08:57:58 UTC+2, Eric Plankeel wrote:

Just installed the new version on http://www.e2fb.nl/zonphp. Great to see the index.php page (with the 4 flash objects) loads without problems on an iPhone 4! This is an improvement.

Yes, I hard-wired the size of your charts into the [SWF] annotation of Jangaroo's Open Flash Chart main class. In open-flash-chart.js, just search for 550 or 305 and replace it with the width / height you want. Currently, the same size is used for all diagrams.

Of course, this is not the way it should be. Instead, JooFlash should read the desired size from the swfobject parameters. That's my next item on the JooFlash road map, including "100%" width / height and resize events!

Greetings 

-Frank-

 

Hi Frank,

Everything OK?

How is the progress on JooFlash? It's a bit silent on Twitter. See your tweets only now and then.

Regards,

Eric

[Frank]

Yes, I know it's been a while, but I had to release Jangaroo 2 first.
But the Jangaroo 1 release containing the single-canvas mode is due this week!

Greetings
-Frank-

[Eric Plankeel]

You have to look for this line:

joo.classLoader.prepare("package",{SWF:{width:"600",height:"400"}},"public class main extends flash.display.Sprite"

You can find it in the last part of this file.

-- 

Eric

On Saturday, December 1, 2012 7:35:33 AM UTC+1, Frozentroy wrote:

No idea how to properly go about this..  But for the life of me I can't seem to find the height and width settings in open-flash-chart.js  I'm I missing something.  I've got everything I needed  to work following this thread, except the those parameters...  Not seeing 550 or 305 anywhere.

[Frank]

...and it will get better: we recently released Jangaroo 1.0.0,
including a JooFlash version that takes width/height parameters from
the swfobject.embed() call in your HTML page, so it will no longer be
necessary to patch the JS file for different chart sizes. However, I
did not yet create a minified version of Open Flash Chart recompiled
with Jangaroo 1.0.0, so please stay tuned for that...

[Eric Plankeel]

I will, as you noticed.... 

[Frozentroy]

Thank you!.  Finally found it.  Works perfectly!   Graphs on my iPhone Woo Hoo!

[Frank]

Okay, so here we go: Open Flash Chart with Jangaroo 1.0.0, packaged &
optimized!
http://jangaron.net/ofc4/data-files/joo.html
Concerning the demo, note that it only runs in Jangaroo mode if no
Flash is available! For testing purposes, you can disable Flash
temporarily, which seems to be easiest in Google Chrome: Just enter
the URL chrome://plugins, look for "Adobe Flash Player" and click on
"Deactivate". Then reload above demo, and it will look exactly the
same, but run in JooFlash/HTML5.

The JS version of OFC is now shrinked to < 500 kb, which is not so
bad, considering that the orginal SWF has 320 kb, and Jangaroo's
version includes its re-implementation of the Flash engine!
Another good news: from JooFlash 1.0.0, OFC/joo inherited the
capability to resize. Just change the width/height in your
swfobject.embedSWF() call, and it now adapt to that size like the
Flash version. No more need to patch the JS file.

To update to this latest version, as before, just grab
* http://jangaron.net/ofc4/joo/swfobject.joo.js
* http://jangaron.net/ofc4/open-flash-chart/open-flash-chart.js

joo/swfobject.joo.js has to be loaded directly after swfobject.js and
before the script that calls swfobject.embedSWF().
open-flash-chart.js is loaded automagically as a replacement of open-
flash-chart.swf if no Flash is available and must be placed in the
same directory on your web server where the SWF is located.

Having trouble getting it to work? Just post your problem here!

Have fun!
-Frank-

[Frank]

Sorry, but to be sure it works, you still have to wait a bit. I just
found a problem with open-flash-chart.js.
To minify, I ran the final Jangaroo JS code through Google Closure
Compiler, and it seems there is a bug in GCC that results in some of
the OFC examples (e.g. "on-show-area-drop") not working. GCC seems to
reuse local variables where it should not, as it changes the
semantics.
I'll have to investigate on this. While the uncompressed code works,
it is quite large, so I guess it is of no use for you, either. Let's
see if I can work around the bug, use a newer version of GCC, use YUI
compress, or whatever... stay tuned!

Greetings,
-Frank-

[Frank]

After updating to the latest GCC version and minifying again, now all
diagrams work.
I replaced open-flash-chart.js at the location given above, so feel
free to download and update now!
Greetings
-Frank-

[Eric Plankeel]

Anxious to try, but lacking the time at the moment due to "Sinterklaas" preparations. I hope I find some spare time this week to implement this!

-- 

Eric

[Eric Plankeel]

Hi Frank,

Just installed the new version on the non-production site, and it runs OK. But the size is still hardcoded in the file? 

Flashsize for the index.php should be different from dag_overzicht_vergelijk.php but is not.

www.e2fb.nl/zonphpoud

-- 

Regards,

Eric

[Frank]

It seems you did not replace swfobject.js.
If you don't want to change your HTML files, you have to concatenate the original swfobject.js that you use with the new version of swfobject.joo.js that you get from here:
http://jangaron.net/ofc4/joo/swfobject.joo.js
This file is part of the new JooFlash 1.0.0 release. I did not want to bundle it with swfobject.js, as it works with any SWFObject version > 2.2.

[Eric Plankeel]

Hi Frank,

Found some time in between, doing it in a hurry, forgot things. It is corrected. You were right, of course. Now it works as you wrote.

Thanks, because this is a great improvement!

Best regards,

Eric

[Eric Plankeel]

Hi Frank,

Did some more checking today and found out there is a problem. :-(

I can open without problem on Mac OS X in FF this page:

http://www.e2fb.nl/zonphp/index.php JooFlash loads correctly

but on this page it fails

http://www.e2fb.nl/zonphp/dag_overzicht_vergelijk.php

It shows the same chart as the first but in a different size.

The behavior on the iPhone is intermittent. Sometimes I get a correct view, but why I don't know.

Second problem is that charts don't always load by themselves. But when resized a bit they do.

What should cause this?

Best regards,

Eric

[Frank]

Hi Erik,

is it possible that the first page defines width/height in pixels, but the second uses 100% for both?
It seems that everything is working perfectly, only the height of the chart on the second page is 0 (zero).
The reason is there is something missing in swfobject.joo.js to make 100% height work.
I have just patched the file http://jangaron.net/ofc4/joo/swfobject.joo.js, so please download, replace and try again!
Sorry and thanks for beta-testing!

Greetings
-Frank-

[Eric Plankeel]

Hi Frank,

Just replaced the old version and it works in FF. But on the iPhone I have a new problem, the chart is malformed. 

This is how it should be http://www.e2fb.nl/nodagv.php

This is how it is at the moment. I wiped cache, history and cookies on the iPhone

http://www.flickr.com/photos/30461226@N05/8260874172/
Also I have to manipulate a little to show the charts on the iPhone, in FF they show instantaneous.

Regards,

Eric

[Frank]

The first link does not work, so I can't see how it is supposed to look like.
Did you try some WebKit browser (Chrome, Safari) which is more similar to the iPhone browser?

[Eric Plankeel]

Sorry

http://www.e2fb.nl/zonphp/nodagv.php is the correct link. Just tried in Chrome with flash switched off and chart is malformed as well.

Regards,

Eric

[Frank]

What relieves me a bit is that it is malformed in Firefox, too! ;-)
I have a few bug fixes since 1.0.0 and I'll make a new release 1.0.1 soon.
If you have time, I could package a new open-flash-chart.js containing the fixes right now and you could test before the release, so if there are still problems, I could fix them before 1.0.1.
What do you say?
-Frank-

[Eric Plankeel]

Hi Frank,

I see, you are right. While testing I enabled Flash, but I overlooked it. I have time at the moment, little need to go out in the rain.

There is another small problem with tooltips not showing. In http://www.e2fb.nl/zonphp/nojaren.php the tooltip should come up in all colored bars and when a bar is clicked it should redirect to the corresponding year.

Regards,

Eric

[Frank]

Okay, then I hope it is still raining, as here we go with another update of open-flash-chart.js again at http://jangaron.net/ofc4/joo/swfobject.joo.js!
Let's cross our fingers and hope you ran into the bugs already fixed in this version. I took some spot tests on the examples and they all worked like a charm.
Can't wait for your feed-back,
-Frank-

[Eric Plankeel]

Oops, don't see any improvement, did the patch twice to exclude a mistake.

Eric

[Frank]

Could have worked, but anyway, it was only a wild guess.
So as all OFC examples do work, I will have to set up a local copy for your diagram that does not work and debug what's wrong.
Might take a while, but I hope I can figure it out soon...

-Frank-

[Frank]

Hi Eric,

when I could not reproduce the problem with my local copy of your problematic page, I compared the open-flash-chart.js version, and it seems the old one must have still been in some cache, as your problematic page still uses the old version.
To help avoid this mistake, I have just added the following first line to the latest open-flash-chart.js version:
// version based on JooFlash 1.0.1-SNAPSHOT / 2012-12-10 17:15

So after downloading again, please check that this line is present before installing the file on your web server, and take care to update all locations, should you have multiple copies of the file.
Greetings,
-Frank-

[Eric Plankeel]

Hi Frank,

Time for me to be confused. You are talking about open-flash-chart.js but your link points to swfobject.joo.js?

[Frank]

Oops, that was probably the reason it did not work! Sorry for the confusion.
I was really talking about open-flash-chart.js, so the link was the wrong one.
To be on the safe side, you could always update both files, but the most recent patch goes to open-flash-chart.js.

http://jangaron.net/ofc4/open-flash-chart/open-flash-chart.js

[Eric Plankeel]

Hi Frank,

Updated both files but with no luck. For some reason the linecharts (green and red) are in correct order, but the bar charts are left from the Y-axis in reverse order. Index.php displays correct.

Greetings,

Eric

[Frank]

Ha! Now I can reproduce it!
You know, the site is kind of a moving target, as of course, you generate the chart data dynamically. Maybe the bug only occurs for certain data.
Now that I can debug, it should be possible to find the problem...

On Monday, 10 December 2012 18:57:56 UTC+1, Eric Plankeel wrote:

Hi Frank,

[Eric Plankeel]

The upper left chart in index.php uses almost the same php for the charts as the bugged chart. I exchanged the files but the display in index.php stayed correct.

Only difference is the chartsize but that is displayed correct in the other files like the monthview http://www.e2fb.nl/zonphp/nomaandv.php

[Frank]

I think the difference is simply that the diagrams that work use concrete sizes, while the ones that do not work use width/height 100%.
This is the latest feature and not very well tested (as you can see ;-)).
I'd recommend setting all diagrams to pixel sizes for the time being. At least you can now set the size dynamically from the HTML page.
I'm tracing the bug, and it looks like there is some initial size and then a resize event that causes re-rendering with a wrong layout.

[Eric Plankeel]

Both http://www.e2fb.nl/zonphp/nomaandv.php and http://www.e2fb.nl/zonphp/nodagv.php get there size from the same variable in the sql database. The first displays correct at 100%, the latter will not.

[Frank]

On Monday, 10 December 2012 21:27:55 UTC+1, Eric Plankeel wrote:

Both http://www.e2fb.nl/zonphp/nomaandv.php and http://www.e2fb.nl/zonphp/nodagv.php get there size from the same variable in the sql database. The first displays correct at 100%, the latter will not.

That might give a hint where to look for the bug. But still, you can work around the JooFlash bug by avoiding "100%" and replacing it by the desired size in pixels, if that is possible.
 

[Eric Plankeel]

I just leave it for the moment. PV-production in winter is almost neglectable :-( , so I don't have to monitor it all day on my phone.

On Monday, December 10, 2012 11:03:45 PM UTC+1, Frank wrote:

On Monday, 10 December 2012 21:27:55 UTC+1, Eric Plankeel wrote:

Both http://www.e2fb.nl/zonphp/nomaandv.php and http://www.e2fb.nl/zonphp/nodagv.php get their size from the same variable in the sql database. The first displays correct at 100%, the latter will not.

[Frank]

Hi Eric,

good news: I found and fixed the bug!
Would you give it one last try?
The patch is again in open-flash-chart.js at the well-known URL
http://jangaron.net/ofc4/open-flash-chart/open-flash-chart.js
The new time-stamp is
// version based on JooFlash 1.0.1-SNAPSHOT / 2012-12-11 10:09
Don't be bothered by the byte size being exactly the same. I just had to move one line of code!

Greetings
-Frank-

[Frank]

I have created an issue for the bug:
http://jangaroo.myjetbrains.com/youtrack/issue/LIBS-48
After next jangaroo-libs release, I'll create another OFC version using version 1.0.1.

[Eric Plankeel]

Hi Frank,

Found some time to upload the new file and it works OK so that problem is solved! Thanks. Also did some further checking on the not loading charts.

It happens when navigating on the IOS-site. When navigating to http://www.e2fb.nl/zonphp/nomaandv.php or http://www.e2fb.nl/zonphp/nodagv.php directly chart loads ok. But when navigating from the first to the second, the second chart is not loaded until some fiddling on the screen. A cache problem or something with a refresh?

Regards,

Eric

[Eric Plankeel]

Hi Frank,

After some optimizing the site runs fine on the iPad for almost a year now. Any new versions to be implemented? I have a wish, which is OFC related. I want to have a transparent background on the charts. As far my knowledge goes, I have to decompile the .swf file? Any free tools to do this on a mac? And then? And how to get this in JooFlash?

Regards,

Eric

[Steven Stark]

For decompilers, I have always been fond of sothink's version. It's been around for a very long time and is quite good.

http://www.sothink.com/product/flashdecompiler/

It is a windows app, but you can use it through a vm I'm sure. ( I use virtual box )

I hope that helps,

-Steven

[Eric Plankeel]

Hi Steven,

Thanks for your answer, I will have a look at it.

I also downloaded a trial version of Trillix but it is limited without license. And I tried an online decompiler which gave me some insight on the SWF-file but not on the solution yet.

Regards

Eric

[Frank]

Eric, wait!
Before you start de-compiling the SWF, note that Open Flash Chart 2 is Open Source (LGPL)!
(Otherwise I wouldn't have had a chance to re-compile it with Jangaroo!)
You can find the source code here:
http://sourceforge.net/projects/openflashchart/files/
So downloading the latest version of the code and compiling it with mxmlc should result in exactly the SWF you currently use, and then you can start tweaking the code.

And: are you sure you have to change the code to get transparent background? No JSON option for that? Maybe transparency is coded into the color values?
I'd recommend to ask in some OFC2 forum first...

Greetings
-Frank-

[Eric Plankeel]

Frank,

Thanks for pointing me to this one! I don't think it is coded in the JSON. When removing the background settings from the file it defaults to some beige colour. It should be coded somewhere, but the OFC community is not very active.

Regards,

Eric

[Eric Plankeel]

Hi,

Not surprisingly the background is formatted in the file background.as. There the colour is hardcoded. Can I just add an alpha to make this colour transparent? Or can I insert a transparent image with JSON2? This is new to me. Any suggestions are welcome.

Regards,

Eric

[Eric Plankeel]

Hi,

Tried compiling my own .swf but ran into numerous pitfalls on my iMac with Mountain Lion (all FlashConnect related), so i'm planning to try Windows 7 on VMware Fusion. What do I need apart from OFC and Flex? I need FlashDevelop, but which version? Do I need more?

Regards,

Eric

[Eric Plankeel]

Hi,

Managed to get this working with FlashDevelop. Compiled the swf myself and I got a transparent background by editing the background.as file on line 111 (this.graphics.beginFill( this.colour , 0.0 ), at least in safari. Next step is to find a correct way to parse a variable replacing the hardcoded line. That would be more versatile.

Regards,

Eric