Tutorials - jQuery resizable

Make your charts resizeable.


Grab the latest jQuery and jQuery UI, jQuery UI will ask you what components you want to include, I chose core and re-sizable.

This is the Javascript I used:

This goes into the <head> of the page:

<script type="text/javascript" src="js/jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-personalized-1.6rc2.min.js"></script>
<script type="text/javascript" src="js/swfobject.js"></script>
<script type="text/javascript">
"open-flash-chart.swf", "my_chart", "100%", "100%",
"9.0.0", "expressInstall.swf",
{"data-file":"gallery/data-lines.php"} );


function ofc_resize(left, width, top, height)
var tmp = new Array(
'width:'+ width,
'height:'+height );

$("#resize_info").html( tmp.join('<br>') );
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]

And this is the HTML I used.

<div id="resize" style="width:400px height:200px padding: 10px">
<div id="my_chart"></div>

The charts raise an event when they are resized via the ofc_resize event.

When the chart is destroyed it also raises a re-size event, but the chart object is now NULL: open-flash-chart-container-destruction

Support This Project

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