Open Flash Chart

De Wikijoan
Dreceres ràpides: navegació, cerca

Open Flash Chart (versió 2) serveix per integrar dins d'una pàgina web gràfics dinàmics i xulos. Les dades de les gràfiques poden venir d'una base de dades, i es pot utilitzar Javascript i tècniques tipus AJAX per tal que l'experiència d'usuari sigui encara millor. Els gràfics que s'han de carregar esperen rebre un fitxer de dades (diferents tècniques explicades en el tutorial), i aquestes dades vénen en format JSON (que és la diferència entre la versió 2 i la versió 1).

Instal.lació

Disposem d'un servidor Apache amb PHP. En el directori arrel de la nostra aplicació, descarreguem i descomprimim la última versió, en aquest cas: open-flash-chart-2-hyperion.zip (http://teethgrinder.co.uk/open-flash-chart-2/downloads.php)

$ unzip open-flash-chart-2-hyperion.zip 
$  cd version-2
$ cp open-flash-chart.swf ..
$ cp -R js ..
$ cp -R php-ofc-library ..

A partir d'aquí ja podem seguir els tutorials (http://teethgrinder.co.uk/open-flash-chart-2/tutorial.php), que estan ordenats amb dificultat creixent.

Primer exemple

En el primer exemple introductori veiem com s'incrusta un objecte Flash. Fitxer chart.html

<html>
<head>
</head>
<body>
 
<p>Hello World</p>
 
 
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"http://example.com/chart.html?ofc=data.json
        codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0"
        width="500" height="250" id="graph-2" align="middle">
 
	<param name="allowScriptAccess" value="sameDomain" />
	<param name="movie" value="open-flash-chart.swf" />
	<param name="quality" value="high" />
	<embed src="open-flash-chart.swf"
		   quality="high"
		   bgcolor="#FFFFFF"
		   width="500"
		   height="250"
		   name="open-flash-chart"
		   align="middle"
		   allowScriptAccess="sameDomain"
		   type="application/x-shockwave-flash"
		   pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
 
</body>
</html>

Ara bé, el Flash open-flash-chart.swf espera tenir dades, que se li ha de passar en format JSON. Per exemple, el fitxer data.json:

{
  "title":{
    "text":  "Many data lines",
    "style": "{font-size: 20px; color:#0000ff; font-family: Verdana; text-align: center;}"
  },
 
  "y_legend":{
    "text": "Open Flash Chart",
    "style": "{color: #736AFF; font-size: 12px;}"
  },
 
  "elements":[
    {
      "type":      "bar",
      "alpha":     0.5,
      "colour":    "#9933CC",
      "text":      "Page views",
      "font-size": 10,
      "values" :   [9,6,7,9,5,7,6,9,7]
    },
    {
      "type":      "bar",
      "alpha":     0.5,
      "colour":    "#CC9933",
      "text":      "Page views 2",
      "font-size": 10,
      "values" :   [6,7,9,5,7,6,9,7,3]
    }
  ],
 
  "x_axis":{
    "stroke":1,
    "tick_height":10,
    "colour":"#d000d0",
    "grid_colour":"#00ff00",
    "labels": ["January","February","March","April","May","June","July","August","Spetember"]
   },
 
  "y_axis":{
    "stroke":      4,
    "tick_length": 3,
    "colour":      "#d000d0",
    "grid_colour": "#00ff00",
    "offset":      0,
    "max":         20
  }
}

Finalment ara ja se'm carrega el gràfic: http://example.com/chart.html?ofc=data.json

Aquest primer exemple és il.lustratiu. Ara bé, les coses no es fan així normalment.

En el tutorial 2 veiem com es pot simplificar la funcionalitat de Flash incloent un Javascript:

<head>
 <script type="text/javascript" src="js/swfobject.js"></script>
<script type="text/javascript">
swfobject.embedSWF("open-flash-chart.swf", "my_chart", "250", "200", "9.0.0");
</script>
 </head>

En el tutorial 3 i 4 veiem com es pot fer una crida a un fitxer php (data.php) que ens donarà les dades que s'han de dibuixar en format JSON:

<head>
 
<script type="text/javascript" src="js/swfobject.js"></script>
<script type="text/javascript">
swfobject.embedSWF(
  "open-flash-chart.swf", "my_chart", "550", "200",
  "9.0.0", "expressInstall.swf",
  {"data-file":"chart-3.php"}
  );
</script>
 
</head>

En els tutorials 5 i 6 utilitzem Javascript de forma profunda per tal de fer una sola petició al servidor (que només envïi les dades JSON), i que ens acosta a la funcionalitat AJAX.

<head>
 
<script type="text/javascript" src="js/swfobject.js"></script>
<script type="text/javascript">
swfobject.embedSWF(
  "open-flash-chart.swf", "my_chart", "550", "200",
  "9.0.0", "expressInstall.swf",
  {"data-file":"chart-3.php"}
  );
</script>
 
</head>



creat per Joan Quintana Compte, març 2009

Eines de l'usuari
Espais de noms
Variants
Accions
Navegació
IES Jaume Balmes
Màquines recreatives
CNC
Informàtica musical
joanillo.org Planet
Eines