2008

Jun

9

Av

Det finns ingen diagramfunktion i FileMaker och otaliga är de lösningar där man försöker göra diagram på bästa sätt, t.ex. med repeterade fält, portaler, beräkningsfunktioner etc. Det finns externa lösningar också, allt från Flash-baserade webbvisartillägg till internetbaserade varianter som Google Chart.

Med FileMaker Pro 9 går det att använda HTML-kod direkt i webvisaren, utan någon behov av några extern lösningar. Jag ska visa hur man kan göra ett enkelt stapeldiagram med några rader kod. Du gör hela diagrammet i ett beräkningsfält som returnerar fälttypen Text. 

Jag vill göra ett stapeldiagram med 4 staplar och har fyra numeriska fält i en FileMaker-tabell, Värde1, Värde2, Värde3 och Värde4. I beräkningsfältet beräknar jag först en skalfaktor för värdena så att de fyller hela webvisaren och sedan sätter jag in värdena i en HTML-kodsnutt som ska visas i en webvisare. Nyckeln till att det fungerar utan externa filer är möjligheten att ange koden “data:text/html,” först i beräkningsfältet. Det talar om för FileMaker att tolka innehållet i fältet som HTML-kod.

Formeln ser ut så här. Du kan skriva formeln direkt i webvisarens definition:

"data:text/html," &

Let(
   [max = Max(Tabell::Värde1; Tabell::Värde2; Tabell::Värde3; Tabell::Värde4);
   höjd_1 = Round(Tabell::Värde1 / max; 2);
   höjd_2 = Round(Tabell::Värde2 / max; 2);
   höjd_3 = Round(Tabell::Värde3 / max; 2);
   höjd_4 = Round(Tabell::Värde4 / max; 2)];

"<html>
<head>
<style>div { 
background: red; 
position: absolute; 
width: 20%; 
bottom: 0; 
float: left; 
text-align: center; 
font-family: Verdana;
}</style>
<body style=\"border: 0; margin: 0;\">
<div style=\"left: 0; height: " & (höjd_1 * 100) & "%\"></div>
<div style=\"left: 26%; height: " & (höjd_2 * 100) & "%\"></div>
<div style=\"left: 52%; height: " & (höjd_3 * 100) & "%\"></div>
<div style=\"left: 78%; height: " & (höjd_4 * 100) & "%\"></div>
</body>
</html>"
)

Funktionen Max tar fram maxvärdet av de fyra värde-fälten som sedan används för att skala resterande värden. Det största värdet kommer att bli 100, de övriga mellan 0 och 100. Avrundning görs till 2 decimaler med funktionen Round.

I HTML-koden anger jag bakgrundsfärg och bredd på div-taggar i style-taggen. I respektive div-tag sätter jag sedan höjden på staplarna i enheten %.

Skriv en kommentar

  • (will not be published)
  • + six = 8

Läs också: