Tutorials - jQuery resizable

Make your charts resizeable.

stuff

By default the chart will call a javascript function:

function ofc_resize(left, width, top, height)
but if you have given the chart an id, then it will call:
function ofc_resize(left, width, top, height, id)

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">
swfobject.embedSWF(
"open-flash-chart.swf", "my_chart", "100%", "100%",
"9.0.0", "expressInstall.swf",
{"data-file":"gallery/data-lines.php"} );

$(document).ready(function(){
$("#resize").resizable();
});

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

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

And this is the HTML I used.

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

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

IE BUG: open-flash-chart-container-destruction-bug

Support This Project
Adverts:


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