Open Flash Chart
Support This Project :: Home - Gallery - HTML and CSS
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.

Gallery - HTML and CSS

Style the chart with a combination of HTML, CSS and chart styles. Here we remove the chart title and give it a HTML title, same with the X axis.

Portreath Beach,
15 Dec 2017 (HTML)

Wave height (cm) (HTML)

By turing off parts of the chart (like the title) and replacing them with HTML gives you a lot of flexability. For example it would be simple to add HTML special characters or images into the title.

Create the flash object
<?php
include_once 'ofc-library/open_flash_chart_object.php';
open_flash_chart_object400250'http://'$_SERVER['SERVER_NAME'] .'/open-flash-chart/gallery-data-12.php' );
?>

A simple sin() wave is shown, the X axis labels are removed, and the X legend is made 20 pixels high.

gallery-data-12.php
<?php

// generate some random data
srand((double)microtime()*1000000);

$tmp = array();
$x_labels = array();
$count 6;
$time 2;
for( 
$i=0$i<9$i+=0.2 )
{
  
$tmp[] = sin($i) + 1.5;
  if( 
$count == )
  {
    
$x_labels[] = $time .':00am';
    
$count 0;
    
$time++;
  }
  else
  {
    
$x_labels[] = '';
      
$count++;
  }
}

include_once( 
'ofc-library/open-flash-chart.php' );
$g = new graph();
$g->bg_colour '0xDFFFDF';

$g->set_data$tmp );
$g->line3'0x736AFF''Avg. wave height (cm)'10 );

$g->set_x_labels$x_labels );
$g->set_y_max);
$g->y_label_steps);
$g->set_y_legend'Time of day'15'0x736AFF' );
echo 
$g->render();
?>
To see the data produced : gallery-data-12.php, then 'view source'.
Help support the project: Support This Project

Adverts: