2013

Maj

21

Av

När jag stöter på en ny uppgift i FileMaker som inte är helt självklar hur man gör tänker jag allt oftare “Går det att göra med Javascript och web viewer?” istället. Även om FileMaker är kraftfullt och enkelt att arbeta med finns det några begränsningar. 

Jag har tidigare visat hur man kan använda Javascript och web viewer för att göra diagram med Google Chartsvälja datum i en kalendernavigera med en trädstruktur och navigera med Google Maps m.fl.

Diagram är en av de funktioner i FileMaker som är en aning begränsad (även om det finns en mängd inställingar), speciellt om man har speciella önskemål. Ett önskemål som jag stöter på ganska ofta är att kunna “zooma in” i diagrammet och se detaljer. Det går inte i FileMaker.

En av mina absoluta Javascript-favoriter är Highcharts (www.highcharts.com) som visar diagram både snyggt och flexibelt. Det är ett av de många Javascript-bibliotek som finns tillgängliga, dock kostar Highcharts 90 USD vilket i många fall kan vara väl investerade pengar. Det finns förstås gratisalternativ, förutom Google Charts, även olika alternativ som bygger på jQuery med varierande funktionalitet.

Vi har sedan flera år en FileMaker-databas som dagligen hämtar valutakurser från europeiska centralbanken via web service (se tidigare artiklar här och här) och har också skrivit om hur man gör ett (enkelt) diagram för växelkurserna. Med Highcharts kan det bli mycket bättre!

I vår databas för valutakurser finns alla kurserna i en tabell. Jag gör en ny tabell och en relation med start- och slutdatum till valutakurs-tabellerna. Jag använder beräkningsfunktionen List (igen!) för att samla ihop alla värdena i en lång lista. Med Substitute byter jag ut decimalkomma mot punkt (som Highchart kräver) samt ny rad mot kommatecken. Följande formel används:

Värden = Substitute(List(Valutakurser::SEK);[",";"."];["XX";", "])

Föredömligt finns det exempel som visar just valutakurser bland demo-exemplena på Highcharts hemsida (titta gärna på de demon som finns där!). Jag kopierar helt enkelt källkoden för diagrammet och byter ut rubriker samt startdatum för diagrammet. Där alla värdena för diagrammet ska finnas skriver jag in “!DATA!” och klistrar sedan in hela koden i ett textfält i FileMaker-databasen. Jag kallar textfältet för Highchart_mall.

Till sist placerar jag en web viewer på en layout i FileMaker och anger källan:

"data:text/html, " & Substitute(Highchart_mall;"!DATA!";Värden)

Resultatet blir så här:

Highchart1

Genom att dra med markören går det att zooma in, t.ex. för december 2011:

Highchart2

Ibland kan det till och med vara enklare att göra diagram med Highchart (eller motsvarande) än FileMakers inbyggda :) Tyvärr fungerar Windows-versionen inte till 100% i alla lägen, men fullt tillräckligt!

Skriv en kommentar

  • (will not be published)
  • seven × 5 =

Läs också: