Diagramy v aplikaci FileMaker pomocí JavaScriptu a HTML5.

FileMaker Pro již několik let obsahuje možnost grafického zobrazení číselných hodnot ve formě diagramů. Diagramy lze pohodlně nastavit prostřednictvím dialogu. Grafy obsažené v aplikaci FileMaker však mají tu nevýhodu, že nejsou k dispozici v aplikaci FileMaker Runtime-řešení, protože FileMaker tuto funkci v runtime řešeních zablokoval. Kromě toho nativní diagramy od FileMakeru umožňují pouze základní interakce s diagramem. Mnohem flexibilnější řešení pro vytváření diagramů v prostředí FileMakerDatabáze Skvělý způsob vytváření animovaných grafů představuje open source řešení Chart.js, které lze díky webovému prohlížeči snadno integrovat do databáze FileMaker. V tomto článku vám ukážeme, jak můžete do svého řešení FileMaker integrovat krásné a animované grafy pomocí řešení "Chart.js" založeného na jazycích JavaScript a HTML5. Na závěr vám poskytneme ukázkové řešení ke stažení, abyste mohli všechny potřebné kroky provést přímo na svém počítači Mac nebo PC.

Mnoho variant diagramů

Řešení s otevřeným zdrojovým kódem "Chart.js" nabízí celkem šest různých typů grafů, z nichž každý lze individuálně konfigurovat a umožnit přímou interakci s uživatelem.

Chart.js využívá moderní technologie HTML5 a JavaScript a lze jej spustit ve webovém prohlížeči FileMaker. Vygenerované grafy jsou ve vektorovém grafickém formátu SVG a lze je libovolně měnit bez ztráty kvality. Webové stránky Charts.js obsahují rozsáhlou dokumentaci o tom, jak lze diagramy navrhovat také interaktivně, takže například kliknutím na část diagramu se otevře webový prohlížeč FileMaker.Skript lze spustit.

Zapouzdření Chart.js v aplikaci FileMaker

Abyste mohli ve FileMakeru používat funkce z knihovny JavaScript "Chart.js", musíte si nejprve nainstalovat aktuální verzi Knihovna Charts.js do počítače. Knihovna Chart.js je již integrována v našem ukázkovém řešení, které si můžete stáhnout na konci tohoto článku. Knihovnu v ní obsaženou jsme upravili tak, aby bylo možné zobrazovat i grafy se zápornými hodnotami.

V našem příkladovém řešení jsme knihovnu Chart.js zapouzdřili do samostatného (globálního) pole. Pole <> tedy jednoduše obsahuje zdrojový kód celého textového souboru "Chart.js".

Zdroj diagramu jako vlastní pole FileMakeru

Pokud si stáhnete celý balíček "Chart.js", najdete v adresáři "samples" několik ukázkových souborů HTML, které lze použít k zobrazení ukázkových grafů. Pro tyto soubory, které jsou nutné pro zobrazení grafu, obsahuje naše řešení FileMaker globální pole <> a <>, z nichž každé poskytuje zdrojový kód pro příslušný typ grafu. V odpovídajících zdrojových kódech jsme vytvořili zástupné symboly pro všechny hodnoty, které chceme dynamicky vkládat ze systému FileMaker. Do zdrojového kódu jsme vložili následující zástupné symboly:

• {javascript} - Zástupce pro Chart.js v oblasti mezi .
• {šířka} - Šířka diagramu
• {výška} - Výška diagramu
• {t1} - {t12} - Textové označení 1 až 12 pro hodnoty 1 až 12
• {w1} - {w12} - Hodnoty 1 až 12
• {červená}, {zelená}, {modrá} - Hodnoty barev RGB pro barvy diagramu

Zdrojový kód HTML pro zobrazení diagramu ve webovém prohlížeči FileMakeru je generován z těchto polí a zástupných symbolů, které obsahují.

Sloučení zdroje grafu a souboru Chart.js

Aby se graf nakonec zobrazil ve webovém prohlížeči FileMakeru, má naše ukázkové řešení další pole s názvem "xLay_Diagramm_Webviewer". V tomto poli se generuje konečný kód grafu, který se skládá ze zdrojového kódu grafu, souboru Chart.js a dynamických dat. Po kliknutí na tlačítko Registrace [hodnota 1] se schematicky spustí následující skript:

Nastavení hodnoty pole [xLay_Diagram_Webviewer; Exchange (xGlo_Diagram; Placeholder; Fields/Data)]

Nastavení proměnné [$$menuchart; Hodnota: "Hodnota 1"]

Zápis změn dat/dotazů [potlačit; bez dialogového okna]

Obnovit okno [Odstranit výsledky spojení, odstranit mezipaměť]

V prvním kroku skriptu se z polí pro zdrojový kód grafu, Chart.js a dynamická data vygeneruje zdrojový kód HTML pro webový prohlížeč. Ve druhém kroku skriptu se nastaví globální Variabilnícož znamená, že diagram "Hodnota 1" je aktivní a zobrazený. Posledními dvěma kroky skriptu zajistíme uložení dat a aktualizaci aktuálního okna.

Zobrazit další typy diagramů

V našem příkladovém souboru jsou všechny dílčí skripty, které mají být vyvolány, ve skriptu, který je vyvolán pomocí odpovídajících parametrů skriptu. První dva dílčí skripty "chart_value_1" a "chart_value_2" slouží k aktualizaci grafu po kliknutí na příslušné tlačítko karty. Dva dílčí skripty "bar" a "line" lze použít k přepnutí typu grafu ze sloupcového na čárový.

V našem příkladu je vždy zobrazeno celkem 12 hodnot, proto mají zdrojové kódy odpovídající plochou strukturu. Samozřejmě je možné zobrazit i více než 12 hodnot nebo zobrazit několik datových řad v jednom diagramu. V takovém případě je třeba výměnu zástupných symbolů organizovat dynamicky, a to tak, že pro celý řádek datové řady použijete zástupný symbol a datovou řadu ve skriptu dynamicky sestavíte. V našem příkladu se omezíme na plochou strukturu s 12 hodnotami v datové řadě.

Stáhnout ukázkovou databázi FileMaker (.fmp12)

Ukázková databáze pro tento článek je k dispozici ve formátu FileMaker 12 (.fmp12) pro FileMaker 12 až 14, ke stažení je zdarma.

Video tutoriál Matta Petrowského na toto téma

Matt Petrowski jako vynikající vývojář FileMakeru zveřejnil půlhodinový videonávod na téma "Diagramy s FileMakerem a JavaScriptem". V následujícím videu ukazuje možnosti diagramů s JavaScriptem v prohlížeči FileMaker Webviewer v angličtině.

Načtením videa souhlasíte se zásadami ochrany osobních údajů YouTube.
Zjistěte více

Načíst video

Vždy odblokovat YouTube

Za toto skvělé řešení děkujeme Mattu Petrowskému a Nicku Downiemu!

Jak přenést skripty ze vzorového souboru do řešení

Skripty lze snadno přenášet z jednoho řešení FileMakeru do druhého prostřednictvím schránky. Stačí otevřít dialogové okno Správa skriptůVyberte požadovaný skript myší a zkopírujte jej do schránky pomocí nabídky [Úpravy - Kopírovat] nebo kombinace kláves [Ctrl/Cmd-C]. Poté otevřete stejný dialog v cílovém řešení a jednoduše znovu vložte dříve zkopírovaný skript pomocí příkazu nabídky [Úpravy - Vložit].

Přenos tabulek ze vzorového souboru do řešení

Tabulky lze do stávajícího řešení vložit několika způsoby. Nejjednodušší je importovat Tabulka prostřednictvím tlačítka [Importovat...] v dialogu Správa databáze. Všechny tabulky, které mají být importovány ze zdrojového řešení, lze poté vybrat v následném dialogu. Tento způsob je proto vhodný zejména v případě, že se má importovat více tabulek najednou. Pokud se má importovat pouze jedna tabulka, lze to provést také prostřednictvím schránky jako skript. Má-li být tabulka importována spolu s daty, lze to provést příkazem [Soubor > Importovat záznamy > Soubor]. V dialogovém okně pro import je cílová tabulka Nová tabulka musí být zadán.

Přenos seznamů hodnot ze vzorového souboru do řešení

Seznamy hodnot lze snadno importovat z jednoho řešení FileMakeru do druhého prostřednictvím schránky. Stačí otevřít dialog v nabídce [Soubor/Soubor > Správa > Seznamy hodnot], vybrat požadovaný seznam hodnot a kliknout na tlačítko [Importovat]. Seznam hodnot myší a zkopírujte seznam hodnot do schránky pomocí nabídky [Úpravy - Kopírovat] nebo kombinace kláves [Ctrl/Cmd-C]. Poté otevřete stejný dialog v cílovém řešení a vložte dříve zkopírovaný seznam hodnot pomocí příkazu nabídky [Úpravy - Vložit].

Jak přenést vlastní funkce z příkladového souboru do řešení

Klikněte na tlačítko [Importovat] v dialogu [Soubor > Správa > Vlastní funkce...] a poté vyberte vzorový soubor. V následujícím dialogu vyberte požadované vlastní funkce a dialog potvrďte. Upozorňujeme, že tato funkce je k dispozici pouze v aplikaci FileMaker Pro Advanced, nikoli však v aplikaci FileMaker Pro.

Markus Schall

Markus Schall vyvíjí od roku 1994 databáze, rozhraní a podnikové aplikace na míru založené na Claris FileMaker. Je partnerem společnosti Claris, držitelem ocenění FMM Award 2011 a vývojářem aplikace Software ERP gFM-Business. Je také autorem knih a zakladatelem organizace M. Schall Publishers.

markus-schall.de