2020

jun

4

Av

En av de mest lästa artiklarna på vår blogg de senaste åren är A clickable map som uppdaterar ett diagram med värden beroende på vilket landskap du klickar på i en Sverige-karta. Exemplet gjordes med FileMaker 13.0v2 redan 2014, använder en web viewer och FileMakers inbyggda diagram. Med FileMaker 19 kom nya möjligheter att interagera mellan web viewer och FileMaker, jag har uppdaterat exemplet.

 

Sverige-kartan är precis som tidigare i SVG-format där varje landskap har en länk. Samma värden för respektive landskap har använts som 2014. I den tidigare versionen var länken en url med fmp-protokollet som körde ett manus. Eftersom det nu går att köra manus direkt från en web viewer med Javascript har jag bytt ut länken på varje landskap så att en Javascript-funktion körs istället.

Länken ser nu ut t.ex. så här:

<a xlink:href="javascript:clickRegion (24);">

Det finns en Javascript-funktion i HTML-sidan som visas i web viewern, denna ser ut så här:

<script>
function clickRegion (region) {
   FileMaker.PerformScript ("Click Region on Map", region);
}
</script>

Manuset som körs heter ”Click region on Map” och måste finnas i samma databas som web viewern. OBS! Viktigt att du skriver det exakt som det heter i FileMaker-databasen. Som parameter skickas regionens nummer, t.ex. 24.

FileMaker-manuset ”Click region on Map” hämtar manusparametern med Get (Scriptparameter) som vanligt och sparar i ett globalt fält, som i sin tur uppdaterar HTML/SVG-koden för kartan så att landskapet fylls med grå färg.

Diagrammet är denna gång också en web viewer, egentligen finns bara själva värdena i FileMaker-databasen. De finns i tabellen Landskap.

Diagrammet använder biblioteket ChartJS som skapar trevliga diagram (som också kan bli klickbara!). För att uppdatera värdena finns en Javascript-funktion i HTML-sidan för web viewern. Funktionen heter UpdateChart och har 5 parametrar.

function UpdateChart (ix,title,data1,data2,data3) {
   regionBar.data.datasets[ix].label = title;
   regionBar.data.datasets[ix].data[0] = data1;
   regionBar.data.datasets[ix].data[1] = data2;
   regionBar.data.datasets[ix].data[2] = data3;
   regionBar.update()
}

Den första parametern (ix) är antingen 0 eller 1, vilket är den röda eller blå stapeln (som visar det landskap du klickar på och det landskap du vill jämföra med). Den andra parametern är rubriken (i de här fallen är det landskapens namn). De tre övriga parametrarna är värdena för de 3 staplarna.

Funktionen sätter värdena och ser till att diagrammet uppdateras.

Javascript-funktionen körs med samma manus som utförs när du klickar på ett landskap. Manuset ser ut så här i sin helhet:

På rad 3 utförs Javascript-funktionen i webbvisaren med namnet ”chart” (alltså diagrammet). Namn på objekt anger du med Granskaren när webbvisaren är markerad i layoutläget. Funktionsnamnet är ”UpdateChart” och parametrarna enligt bilden nedan:

På rad 4 i manuset uppdateras även de jämförande staplarna. De uppdateras också när landskapet du vill jämföra med ändras.

Det är viktigt att du anger att Javascript i webbvisaren får lov att utföra FileMaker-manus, dubbelklicka på webbvisar-objektet i layoutläget och sätt kryss längst ner: ”Tillåt Javascript att utföra FileMaker-script”. För att få ett ”snyggare” utseende har jag tagit bort ramkanterna på webbvisarna, och även den skuggeffekt som är förvald. Detta gör du i Granskaren.

HTML-koden för de båda webbvisaren har jag skrivit in i vars ett fält.

Du kan ladda ner exempeldatabasen (OBS! kräver version 19) här: SwedishMap.fmp12

Skriv en kommentar

  • (will not be published)

Läs också: