Open Flash Chart
Support This Project :: Home - Javascript
Info: Open Flash Chart 2 is out. Version 1.x and these pages will never disappear and the charts will continue working forever, but further development on 1.x has stopped. Take a look at version 2 here Open Flash Chart 2.

Click here: set title.

Click here: show message, hide message.

Value: Label: push new value.

Click here to delete value.

This shows how to comunicate with Open Flash Chart from Javascript. In this example we just take the value from the text box and send it to Open Flash Chart.

gallery-chart-48.php
<?php
include_once 'ofc-library/open_flash_chart_object.php';
open_flash_chart_object'100%''100%''http://'$_SERVER['SERVER_NAME'] .'/open-flash-chart/gallery-data-48.php'false );
?>
To see the data produced : gallery-chart-48.php, then 'view source'.

This is the javascript that is running in this page:

Javascript
function go()
{
  set_title( document.getElementById('my_text').value );
}


function push()
{
  tmp = findSWF("chart");
  
  // pass in:
  //   the data set to add the value to
  //   the value
  //   the new x axis label
  x = tmp.push_value(
    0,
    document.getElementById('my_val').value,
    document.getElementById('my_label').value );
}

function msg()
{
  tmp = findSWF("chart");
  x = tmp.show_message(
    document.getElementById('my_msg').value );
}

function msg_hide()
{
  tmp = findSWF("chart");
  x = tmp.hide_message();
}

function pop()
{
  tmp = findSWF("chart");
  
  // which data set you want to delete a value from
  x = tmp.delete_value(0);
}

function set_title(str) {
  tmp = findSWF("chart");
  x = tmp.set_title(str);
}


function findSWF(movieName) {
  if (navigator.appName.indexOf("Microsoft")!= -1) {
    return window["ie_" + movieName];
  } else {
    return document[movieName];
  }
}

I imagine that in a real world example you would use AJAX to periodically get data from your server, and then use Javascript to update Open Flash Chart.

The important things to note are:

  • The HTML flash <embed> tag must have the id attribute set (e.g. <embed id="graph">) because this is how Javascript will find the chart in the DOM (in the HTML page.)
  • You may also have to set the id attribute in the <object> tag (e.g. <object id="graph">), I'm not sure why, I think it is for older versions of Netscape and IE to work.
  • Take a look at the source code of this page to see what values I have set in both object and embed tags.
  • In Javascript, to get the chart object you must use the following code:
    function findSWF(movieName) {
      if (navigator.appName.indexOf("Microsoft")!= -1) {
        return window["ie_" + movieName];
      } else {
        return document[movieName];
      }
    }
    
    because this is cross browser and will work in both IE and Firefox.

iCE wrote a lovely demo showing how to do periodic AJAX updates to the chart. Check out the ajax demo.
Help support the project: Support This Project

Adverts: