Warning this is an old version.

Tutorial: Alter the chart using Javascript

1: More Javascript

Warning: This is for advanced users only.

Update, Save

Because the data is held in the browser as a Javascript object, it is very easy to manipulate it. Click on the 'Update' link to call the update function.

The chart data object is passed into the function and changed. We know that this chart has only one element. We can get hold of that with this code:

chart_data['elements'][0]

The horizontal bar element has a number of attributes, colour, key text, etc. it also has an array of hbar objects, these are the idividual bars shown in the chart.

Each hbar is an object with a left and right attribute. The code creates a new hbar and replaces an existing one in the chart.

You could easily create a nice GUI that would allow the user to select a job (maybe using a drop down list) and let them type in the start date and end date. Then using Javascript update the chart.

To save the data you could POST the JSON string back to the server and save it in a database. Or you could walk through the chart data and get each start and end date (left and right positions) and POST these back to the server.

The save() function shows how to walk through the values and how to use the JSON.stringify() method to get a JSON string of the hbar array.

Using this method it is important to remember that your javascript chart data object is the most import item. Open Flash Chart is only displaying this data. The actual object is what you manipulate, then you pass this to Open Flash Chart for it to display.

Don't make things hard for yourself. For example if you need to know which month is represented by 1 use PHP to write this as a variable:

<script type="text/javascript">

var data = <?php $chart->toPrettyString() ?>;
var start_date = "<?php echo 'January'; ?>";

</script>