Diagram finns inte inbyggt i FileMaker, men det finns en mångd andra alternativ tack vare webbvisaren. Jag har tidigare visat hur man med vanligt html-kod och Cascading Style Sheets (CSS) kan göra enkla stapeldiagram, utan externa filer. Ibland finns behov av lite mer avancerade diagram och då är jQuery ett alternativ. jQuery är ett på senare tid mycket omtalat Javascript-bibliotet som är litet och snabbt. Ytterligare ett plus (tycker i alla fall jag) är att Microsoft som bäst håller på att integrera det i ASP.NET-miljön. Det finns en mängd funktioner och plugins i jQuery, diagram görs enklast med tillägget jQuery Google Charting. Det är en plugin som kombinerar jQuery med Google Chart där du kan göra oändliga kombinationer av diagram. Självklart kan du använda Google Chart direkt, utan omvägen via jQuery, men det är enklare med jQuery.
Du behöver en html-sida och gör den enklast i ett program avsett att skapa web-sidor. Testa först html-sidan utanför FileMaker. Du laddar ner jQuery-biblioteket och Javascript-koden för jQuery Google Charting och klistrar in dem i <script>-taggar i html-sidan.
Ladda ner ”minified”-versionen av de båda. Html-sidan kan se ut ungefär så här:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Diagram</title>
<script type="text/javascript">
.
. Här klistrar du in jQuery-1.2.6.min.js
.
</script>
<script type="text/javascript">
.
. Här klistrar du in jquery.gchart.min.js
.
</script>
</head>
<body style="border: none;">
<div id="lineChart" style="width: 300px; height: 200px; "></div>
<script type="text/javascript">
$('#lineChart').gchart({ type: 'line', maxValue: 61,
series:
[$.gchart.series([28, 4, 0, 4, 11, 5, 9, 7,
7, 7, 10, 20, 35, 46, 61, 46, 46, 23, 20, 28], 'red', 5, [5, 5]),
$.gchart.series([5, 8, 22, 24, 25, 10, 9, 23,
2, 3, 5, 10, 37, 49, 56, 41, 15, 18, 20, 20], 'green', 3, [10, 2]),
$.gchart.series([43, 50, 52, 54, 35, 10, 24,
33, 32, 43, 45, 55, 60, 39, 36, 31, 25, 28, 33, 40], 'blue', 1, [1, 0])];
});
</script>
</body>
</html>
I <head>-taggen klistrar du in de båda Javascript-filerna i var sin <script>-tag. I <body>-taggen gör du en <div>-tag (tänk på att du måste ange bredd och höjd) och till sist ytterligare ett <script> som tillverkar själva diagrammet. Resultatet ser du här:
Kopiera hela html-koden och klistra in i ett variabel-fält i FileMaker som du t.ex. kallar för ”DiagramMall”. Byt ut siffrorna i de olika dataserierna mot en annan text, t.ex. ”!SERIE1!, !SERIE2! respektive !SERIE3! så att det blir så här:
[$.gchart.series([!SERIE1!], 'red', 5, [5, 5]),
$.gchart.series([!SERIE2!], 'green', 3, [10, 2]),
$.gchart.series([!SERIE3!], 'blue', 1, [1, 0])];
Gör sedan ett beräkningsfält som använder funktionen Substitute för att ersätta !SERIE1! osv. i fältet DiagramMall med de data som du önskar visa. Du använder med fördel funktionen List för att sätta ihop flera värden med kommatecken mellan. Kalla det resulterande beräkningsfältet för DiagramHTML.
Gå sedan till den layout där du vill visa diagrammet, sätt in en webbvisare och ange formeln:
"data:text/html, " & DiagramHTML
Är det mycket data som du ska beräkna och sätta ihop innan diagrammet är klart kan det löna sig att istället för beräkningsfält använda ett manus som tilldelar fältet DiagramHTML samma formel.