Last updated 5 April 2009. Created on 4 April 2009.
Edited by kong. Log in to edit this page.

The JavaScript method allows the user to create and pass the chart data to open-flash-chart.swf via JavaScript. This is convenient but may be difficult to maintain because you have to embed the long PHP code in the node / block body. And the resulting XHTML will be quite ugly because we will have to embed the chart data in the page using JavaScript.

To create a chart using JavaScript method, you only have to create a new Page, Story, or Block with input filter set to PHP code and then put the code to create and render the chart object in the body:

$data = array();

for($i = 0; $i < 6.2; $i += 0.2 ) {
  $tmp = sin($i) * 1.9;
  $data[] = $tmp;

$chart = ofc_api_chart();
$chart->set('title', array(
  'text' => 'Area Chart',

$dot = ofc_api_element('dot');
$dot->set('colour', '#9c0e57');
$dot->set('size', 7);

$area = ofc_api_element('area');
$area->set('width', 2);
$area->set('dot-style', $dot);
$area->set('colour', '#c4b86a');
$area->set('fill', '#c4b86a');
$area->set('fill-alpha', 0.7);
$area->set('values', $data);

$chart->add('element', $area);

$y_axis = ofc_api_element();
$y_axis->set('min', -2);
$y_axis->set('max', 2);
$y_axis->set('steps', 2);
$y_axis->set('labels', null);
$y_axis->set('offset', false);

$x_axis = ofc_api_element();
$x_axis->set('steps', 2);
$x_labels = ofc_api_element();
$x_labels->set('steps', 4);
$x_labels->set('rotate', 270);
$x_axis->set('labels', $x_labels);

$chart->set('y_axis', $y_axis);
$chart->set('x_axis', $x_axis);

print ofc_api_render($chart);

Notice that at the end of the code, we use the print function to render the chart right away.

So, that's how we pass the data to open-flash-chart.swf using the JavaScript method. Quick and easy isn't it? However, if you have to display many charts in one page, you may want to consider using the data file method instead.

Looking for support? Visit the forums, or join #drupal-support in IRC.