Ich bin schon des öfteren gefragt worden, ob es möglich ist, Diagramme mit FlashChart auch in "normalen" Webanwendungen einzubinden. Dies war schon immer möglich, ist jedoch mit seit der Version 1.2.1 von FlashChart sehr viel einfacher geworden.
In diesem Artikel wird beschrieben, wie man die Schnittstellen von FlashChart für Webanwendungen einsetzen kann. Mit einer Beispielanwendung wird Schritt für Schritt erklärt, was alles nötig ist, um Diagramme in diese Anwendung einzubinden. Zum Verständnis ist es notwendig, über einige Grundkenntnisse von HTML und der Scriptsprache PHP zu verfügen.
{tab Überblick|primary}Für eine solche Anwendung braucht man nicht notwendigerweise das CMS Joomla! sondern nur folgende von FlashChart bereitgestellte Programmteile:
- das Open Flashchart SWF-File "open-flashchart.swf"
- die FlashChart Library Files aus "../flashchart/lib/.."
- die FlashChart Javascript Files aus "../flashchart/js/.."
- die FlashChart CSS Files aus "../flashchart/css/.."
Falls man FlashChart unter Joomla! installiert hat, ist dies alles verfügbar. In einer anderen Umgebung muss man diese {flashchart data="popup_window" url="/php-apps/flashchart/samples/install-de.html" title="Files auf der jeweiligen Web-Umgebung bereitstellen" width="450" height="200"}install{/flashchart}
Webanwendungen laufen unter der Kontrolle eines HTTP-Server (wie z. B. Apache) und erzeugen in der Regel HTML-Code für eine Webseite. Der HTTP-Server sendet dann diese Webseite auf Anforderung an einen Client, zum Beispiel an einen Browser, wie Firefox oder Internet Explorer. Unsere Beispielanwendung wird genau diese Anwendungs-Infrastruktur verwenden.
Als erstes definieren wir unsere PHP Programm-Infrastruktur, damit alle notwendigen Bibliotheken gefunden werden können:
defined('_JEXEC') or die('Restricted access');
$basepath = JPATH_SITE; // mit jumi hat man Zugriff auf Joomla api
$flashchart_root = "/plugins/content/flashchart";
$lib_path = $basepath . $flashchart_root . "/lib/";
Damit können wir dann die FlashChart Bibliotheken und das für unsere Anwendung verwendete FlashChart Class-File einbinden:
$lib = $lib_path . "flashchart_class.php"; require_once ($lib);
Wichtiger Hinweis
Seit dem Release 1.2.2 von flashChart wird die Verwendung des Joomla Frameworks geprüft. Das bedeutet, dass ein direkter Aufruf von Bibliotheksfunktionen zu einem Fehler führt ("Restricted Access"). Dies vermeidet man mit folgenden Möglichkeiten:
- Anwendung verwendet das Jooomla Framework
- mit einer Joomla Erweiterung wie z. B. "jumi"
- aus dem Verzeichnis "../templates/system/":
1. Kopieren Sie "ihr-anwendungs-script.php" nach "../templates/system"
2. URL ist dann../index.php?option=com_content&tmpl=ihr-anwendungs-script // ohne ".php"
Wichtig! Um einen direkten Aufruf zu verhindern, kodieren Sie immer als 1. Statement in Ihrem Programm:defined('_JEXEC') or die('Restricted access');
- Anwendung läuft nicht unter Kontrolle von Joomla bzw. ausserhalb von Joomla
Das Framework wird explizit vor dem Einbinden von "flashchart_class.php" im Anwendungs Script definiert:define('_JEXEC', 1);
Die Grundkonzeption von FlashChart ist es, nicht Diagramme zu programmieren sondern es wird ein objektorienierter Ansatz implementiert: Man erzeugt ein "Diagrammobjekt", das mit den verschiedensten Attributen versehen werden kann und dann angezeigt bzw. als Javascript oder als HTML-File erstellt werden kann. Das heißt, dass man für eine Webanwendung im Wesentlichen nur diese drei Schnittstellen braucht:
...
$chart = new flashChart("chart01"); // Erzeugt das Diagrammobject "$chart" mit default Attributen
$chart->setChartProperty("attribut", "Wert"); // definiert ein Diagramm Attribut
$chart->createChart(); // erzeugt ein Diagramm
...
Zum Erzeugen des Diagramm Objektes wird der Konstruktor "flashchart" verwendet.
flashChart($chartid, $properties_file = null, $width = "100%", $height = "100%")
Er "kennt" damit folgende Parameter:
- "chartid" - die Chart-Id (immer erforderlich)
- "properties-file" - default = "null" (keine Properties File sondern die Default Diagrammattribute verwenden)
- "width" - Breite des Diagramms (default = "100%")
- "height" - Höhe des Diagramms (default = "100%")
Ein Aufruf mit
$chart = new flashChart("mychart-id");
erzeugt das Diagrammobjekt "$chart" und verwendet die {flashchart data="popup_window" url="/php-apps/flashchart/samples/default_props.html" width="800" height="500" title="Default Properties"}listing{/flashchart} und setzt die Höhe und Breite des Diagramms auf "100%". Wenn man eine eigene Properties-File verwenden möchte, sieht die Kodierung z.B. so aus:
$chart = new flashChart("mychart-id", "$basepath . "/html/my_properties.props");
Hier das {flashchart data="popup_window" url="/php-apps/flashchart/samples/flashchart_props.html" width="800" height="560" title="Format und der Inhalt einer eigenen Properties File."}own_file{/flashchart} Die jeweiligen Diagramm Attribute (die "Properties") sind dabei identisch den Parameternamen und Inhalten, die man vom FlashChart Plugin kennt. Eine Beschreibung aller mögliche Parameter findet man im FlashChart Referenz und Tutorial.
Alle Diagrammattribute kann man mit "setter" und "getter" Methoden des Diagrammobjektes setzen bzw. auslesen:
| Methode | Beschreibung | Rückgabe Wert |
| setChartProperty($key, $value) | Setzt ein Attribut mit den Namen "$key" und dem Wert "value" | true ("1") oder Fehlernachricht |
| getChartProperty($key) | Liefert ein Attribut mit den Namen "$key" | Attribut oder null |
| setChartProperties($properies) | Setzt alle Attribute mit den Inhalt des Arrays "$properties" | true ("1") oder Fehlernachricht |
| getChartProperties() | Liefert alle Diagramm Attribute in einem Array | array |
| setDefaultProperties() | Setzt die Diagramm Attribute auf ihren (internen) Default zurück | n/a |
| setChartWidth($width) | Setzt die Breite des Diagramms auf "$width" | true ("1") oder Fehlernachricht |
| getChartWidth() | Liefert die Breite des Diagramms in Pixel oder Prozent | Breite |
| setChartHeight($height) | Setzt die Höhe des Diagramms auf "$height" | true ("1") oder Fehlernachricht |
| getChartHeight() | Liefert die Höhe des Diagramms in Pixel oder Prozent | Höhe |
| setChartId($chartid) | Setzt die Chart-Id des Diagramms auf "$chartid" | n/a |
| getChartId() | Liefert die Chart-Id des Diagramms | chart-id (String) |
| getJavascripts() | Liefert den HTML-Code für alle notwendigen Javascripts | html (Strings) |
| createChartasScript($script) | Erzeugt das Diagramm als Javascript mit dem Namen "$script" | Javascript |
| createChart() | Erzeugt das Diagramm zur Anzeige | Javascript |
| createChartasModal($link, $close, $title) | Speichert das Diagramm als Modales Fenster und erzeugt einen Link (parameter "$link") dazu. Der Parameter "$close" (Default="Close") erzeugt einen title-tag für den Close button. Mit dem Parameter "title" kann mann einen Titel in die Kopzeile des Popups stellen. | HTML und Javascript oder Fehler |
Mit diesen Informationen können wir nun unser Webanwendung komplett erstellen.
{tab Webanwendung (1)|info}Die erste Aufgabenstellung ist, ein einfaches Diagramm mit selbst definierten Diagrammdaten zu erstellen. Als Besonderheit soll das Diagramm als modales Fenster über einen Link auf der Webseite aufrufbar sein.
Nachdem wir die Programm Infrastruktur definiert haben, erzeugen wir unser Diagramm Objekt. Danach lassen wir uns die notwendigen Javascripts als HTML-Code liefern und definieren den Stylesheet (CSS) für modale Fenster:
// create new chart object (use all provided defaults)
$chart = new flashChart("chart01", null, "450", "250");
// add javascripts and stylesheet for modal chart
$html = $chart->getJavascripts();
$urlpath = $chart->getChartProperty('url_path');
$html .= "<link href='$urlpath/css/bootstrap-modal.css' rel='stylesheet' type='text/css' />";
Unser Diagramm braucht natürlich noch Daten und einen Titel:
// set selected chart properties
$chart->setChartProperty("title", "Chart via testApp0.php");
$chart->setChartProperty("data", "50,60,70,80,90,60|109,120,100,130,140,100");
Das Diagramm wird mit "createChartasModal" als modales Fenster erzeugt:
// render (imbed) chart into html
$html .= $chart->createChartasModal("testApp0 <b>(Modal Chart)</b>, "Close", "testApp0 - Modal Chart");
Als letzen Schritt wird der HTML-Code abgeschlossen und an den HTTP-Server weitergeleitet:
//send genned html echo $html;{tab-level2 Aufruf von testApp0|info}
Damit ist unsere kleine Webanwendung fertig und kann eingesetzt werden. Via jumi plugin ist diese Anwendung hier aufrufbar:
- {jumi [php-apps/flashchart/samples/testApp0.php]}
Hier das komplette Programm testApp0.php"
<?php
// setup environment
defined('_JEXEC') or die('Restricted access');
$basepath = JPATH_SITE;
$flashchart_root = "/plugins/content/flashchart";
$lib_path = $basepath . $flashchart_root . "/lib/";
require_once ($lib_path . "flashchart_class.php");
// create new chart object (use default properties)
$chart = new flashChart("chart01", null, "450", "250");
// add javascripts and stylesheet for modal chart
$html = $chart->getJavascripts();
$urlpath = $chart->getChartProperty('url_path');
$html .= "<link href='$urlpath/css/bootstrap-modal.css' rel='stylesheet' type='text/css' />";
// set selected chart properties
$chart->setChartProperty("title", "Chart via testApp0.php");
$chart->setChartProperty("data", "50,60,70,80,90,60|109,120,100,130,140,100");
// render (imbed) chart into html
$html .= $chart->createChartasModal("testApp0 <b>(Modal Chart)</b>");
//send genned html
echo $html;
?>
{/tabs}
{tab Webanwendung (2)|info}
Unsere Anwendung ist natürlich sehr rudimentär. Es sollte ja auch nur zunächst das Prinzip erklärt werden, wie Diagrammobjekte in eine soche Anwendung eingebunden werden können. Die Anwendung soll nun aber ein wenig erweitert werden und dabei wird auch erklärt, wie man Daten für Diagrammobjekte liefern kann.
Dazu ergänzen wir unsere Webanwendung mit einem HTML-Formular, das über eine separate Funktion ("createHTMLform") erstellt wird. Über die jeweilige Auswahl soll ein Diagramm mit entsprechender Datenquelle erzeugt werden {flashchart data="popup_window" title="(hier diese Programm Routine)." width="550" height="250" url="/php-apps/flashchart/samples/testApp1-listing1.html"}listing_form{/flashchart} Damit soll gezeigt werden, wie man Daten für Diagramme liefern kann bzw. wie man auch Diagramm Menüs verwenden kann.
{tab-level2 Datenquellen|info}
Grundsätzlich ist die Datenanforderung wie beim flasChart Plugin - die Type der Datenquelle wird über das Attribut (die Property) "data" festgelegt:
- "database" - Daten kommen von einer Mysql Datenbank
- "file" - Daten liegen in einer File
- "url" - Daten werden von einem lokalen oder entfernten WebServer geliefert
- "formula" - Daten werden via mathematischer Formel erzeugt
- oder die Daten werden direkt über das "data" - Property bereitgestellt
Folgendes Schema zeigt die Properties, die für Datenanforderung jeweils gesetzt sein müssen:
| Mysql Datenbank | $chart->setChartProperty("db_config_file", $dbconfig_file); $chart->setChartProperty("data", "database"); $chart->setChartProperty("sql", $sql); |
| file | $chart->setChartProperty("data", "file"); $chart->setChartProperty("file", $file); |
| url | $chart->setChartProperty("data", "url"); $chart->setChartProperty("url", "$url"); |
| formula | $chart->setChartProperty("data", "formula"); $chart->setChartProperty("formula", "$formula"); otional vorher definieren: $chart->setChartProperty("x_min", "$x_min"); $chart->setChartProperty("x_max", "$x_max"); $chart->setChartProperty("x_interval", "$x_interval"); |
| daten | $chart->setChartProperty("data", "label und daten"); |
Die gelieferten bzw. bereitgestellten Daten müssen immer das Format:
"label-1,label-2,label-3,...label-n / zahl-1, zahl-2, zahl-3,...,zahl-n" bzw. "zahl-1, zahl-2, zahl-3, ...zahl-n" haben.
Aus obigen Schema erkennt man, dass man den Datenbankzugriff über ein "DB-Configfile" ermöglichen muss. Dieses File ist ein kleines PHP-Script mit allen notwendigen Datenbank Parametern. Wenn man auf die Joomla MySql-Datenbank zugreifen möchte, kann man das Joomla Konfigurations-File "configuration.php" verwenden. Hier ein Beispiel für ein eigenes Konfigurationsfile (z. B. mit dem Namen "my_dbconfig.php"):
<?php
/* --------------------------- */
/* file: my_dbconfig.php */
/* --------------------------- */
class JConfig {
var $host = 'localhost';
var $user = 'my_dbuser';
var $db = 'my_database';
var $password = 'my-password';
}
?>
Unsere Anwendnung greift auf die Joomla Datenbank zu und verwendet deswegen auch die Konfigurationsfile von Joomla. Im PHP-Code sehen die notwendigen Definitionen für den Datenbankzugriff dann so aus:
// use Joomla's Configfile and define sql statement
$dbconfig_file = $basepath . "/configuration.php";
$chart->setChartProperty("db_config_file", $dbconfig_file);
$sql = "Select title, hits From jos_content Order By hits Desc Limit 10";
$chart->setChartProperty("data", "database");
$rc = $chart->setChartProperty("sql", $sql);
Die Methode "setChartProperty" gibt einen Returncode zurück, der beim erfolgreichen Setzen des Diagrammattributs auf "true" gesetzt ist, oder zeigt eine Fehlersituation an (es werden dann u. U. Fehlernachrichten angezeigt). Speziell beim Setzen von Daten-Attributen ist es sinnvoll, den Erfolg der "Datengewinnung" zu überprüfen.
{tab-level2 Die Anwendung testApp1.php|info}Nun aber zurück zu unserer Anwendung! Die Anwendungslogik ist relativ einfach:
- Anzeige eines Auswahl Menüs
- je nach Benutzereingabe Anzeige der vier Szenarien:
- Daten aus einer Datenbank
- Daten von einem Webserver
- Daten von einer File
- Daten über eine mathematische Formel
- Anzeige aller Diagramme via Diagramm Menü
Für die Implementierung von Diagramm Menüs wird die Property "menu" definiert und die Methode "createChartasScript" eingesetzt:
..
$chart->setChartProperty("menu", "Data via Database,sql_chart|Data via URL,url_chart|Data via File,file_chart");
...
$html .= $chart->createChartasScript("sql_chart");
..
Die Benutzeraktionen werden über die PHP Environmental-Variable "$_POST" geliefert und je nach Situation abgefragt und reagiert. Mit all diesen Informationen kann unser Programm nun fertiggestellt werden.
- Aufruf von {flashchart data="popup_window" width="630" height="350" url="/index.php?option=com_jumi&view=application&fileid=14&format=raw" title="testApp1.php"}callit{/flashchart}
Versuchen Sie sich es doch einmal selbst, diese Anwendung zum Laufen zu bringen oder entwickleln Sie eine ähnliche Anwendung.
{tab-level2 Quelltext von testApp1.php|info}der Quelltext von testApp1.php
<?php
// setup environment
// script url is based on jumi's stored fileid of application (testApp1.php)
defined('_JEXEC') or die('Restricted access');
$script = "/index.php?option=com_jumi&view=application&fileid=25&format=raw";
$basepath = $_SERVER ['DOCUMENT_ROOT'];
$flashchart_root = "/plugins/content/flashchart";
$lib_path = $basepath . $flashchart_root . "/lib/";
require_once ($lib_path . "flashchart_class.php");
// create new chart object (use default properties)
$chart = new flashChart("chart01", null, "90%", "300");
$chart->setChartProperty("flashchart_root", $flashchart_root);
$javascript_html = $chart->getJavascripts();
// setup html
$urlpath = $chart->getChartProperty("url_path");
$html = "<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en-gb' lang='en-gb' >
<head>$javascript_html
<link href='$urlpath/samples/sample_style.css' rel='stylesheet' type='text/css' />
</head>
<body style='min-width: 650px;'>";
$menu = "Data via Database,sql_chart|Data via URL,url_chart|Data via File,file_chart|
Data via Formula,formula_chart";
// process user input and setup charts
if (array_key_exists('chart', $_POST))
{
$selection = $_POST ['chart'];
$chart->setChartProperty("label_fontsize", "11");
if ($selection == "menu")
$chart->setChartProperty("menu", $menu");
else
$html .= createHTMLform($script);
if ($selection == "sql" || $selection == "menu")
{
// use Joomla's Configfile and define sql statement
$dbconfig_file = $basepath . "/configuration.php";
$chart->setChartProperty("db_config_file", $dbconfig_file);
$sql = "Select title, hits From jos_content Order By hits Desc Limit 10";
$chart->setChartProperty("x_label_rotate", "40");
$chart->setChartProperty("data", "database");
$rc = $chart->setChartProperty("sql", $sql);
$chart->setChartProperty("type", "bar_dome");
$chart->setChartProperty("tooltip", "#val# hits");
if ($selection != "menu")
$html .= "<br/ >Chart data via <b>sql</b>="$sql"";
$chart->setChartProperty("title", "Chart Data from Database (most read articles)");
if ($selection == "menu")
$html .= $chart->createChartasScript("sql_chart");
}
if ($selection == "file" || $selection == "menu")
{
$file = $basepath . "php-apps/flashchart/samples/square.data";
if ($selection != "menu")
$html .= "<br/ >Chart data via <b>file</b>="$file"";
$chart->setChartProperty("x_label_rotate", "0");
$chart->setChartProperty("data", "file");
$rc = $chart->setChartProperty("file", $file);
$chart->setChartProperty("x_step", "10");
$chart->setChartProperty("y_step", "8");
$chart->setChartProperty("axis_3d", "0");
$chart->setChartProperty("type", "line");
$chart->setChartProperty("tooltip", "x=#x_label# -> y=#y#");
$chart->setChartProperty("title", "Chart Data from File (square values)");
if ($selection == "menu")
$html .= $chart->createChartasScript("file_chart");
}
if ($selection == "url" || $selection == "menu")
{
$url = "http://www.jschmidt-systemberatung.de/php-apps/flashchart/samples/sinus.php";
if ($selection != "menu")
$html .= "<br/ >Chart data via <b>url</b>="$url"";
$chart->setChartProperty("data", "url");
$rc = $chart->setChartProperty("url", "$url");
$chart->setChartProperty("x_label_rotate", "0");
$chart->setChartProperty("x_step", "9");
$chart->setChartProperty("y_step", "0.2");
$chart->setChartProperty("y_min", "-1");
$chart->setChartProperty("axis_3d", "0");
$chart->setChartProperty("type", "line_area");
$chart->setChartProperty("tooltip", "sinus #x_label# = #y#");
$chart->setChartProperty("title", "Chart Data from Remote WebServer (sinus from 0 to 360 degrees)");
if ($selection == "menu")
$html .= $chart->createChartasScript("url_chart");
}
if ($selection == "formula" || $selection == "menu")
{
$formula = "y = 2 * e^-(0.2 * x) * sin(x * 2 * pi)";
$chart->setChartProperty("title", "Chart Data created via Formula");
$chart->setChartProperty("type", "line");
$chart->setChartProperty("axis_3d", "0");
$chart->setChartProperty("y_step", "0.5");
$chart->setChartProperty("x_step", "10");
$chart->setChartProperty("x_interval", "0.1");
$chart->setChartProperty("x_max", "20");
$chart->setChartProperty("y_min", "-2");
$chart->setChartProperty("data", "formula");
$rc = $chart->setChartProperty("formula", $formula);
if ($selection == "menu")
$html .= $chart->createChartasScript("formula_chart");
else
$html .= "<br/ >Chart data via <b>formula</b>="$formula":";
}
// create empty chart if "menu" requested
if ($selection == "menu")
{
$chart->setChartProperty("data", "null");
$chart->setChartProperty("y_min", "null");
$chart->setChartProperty("grid_color", "f9f9f9");
$chart->setChartProperty("tooltip", "");
$chart->setChartProperty("title", "Charts via Chart Menu");
}
if ($rc)
{
$html .= $chart->createChart();
if ($selection == "menu")
$html .= "<br /><a class='readmore-link' href='javascript:window.history.go(-1);' title='go back'>...back...</a>";
}
else
echo "<br><b>Error</b> - setting chart property for $selection";
}
else
$html .= createHTMLform($script);
// close and send html
$html .= "\n</body>\n</html>";
echo $html;
// create html-form
function createHTMLform($script)
{
$html = "\n<form action='$script' method='post'>
<b>Select Chart:</b>
<select name='chart'>
<option value='sql'>data from database</option>
<option value='url'>data via URL</option>
<option value='file'>data via file</option>
<option value='formula'>data via formula</option>
<option value='menu'>all charts via chart menu</option>
</select>
<input type='submit' value='show chart' class='button' />
</form>";
return $html;
}
?>
{/tabs}
{tab flashChart und AJAX|info}
„AJAX“ bezeichnet ein Konzept der asynchronen Datenübertragung zwischen einem Browser und dem Server. Dieses ermöglicht es, HTTP-Anfragen durchzuführen, während eine HTML-Seite angezeigt wird, und die Seite zu verändern, ohne sie komplett neu zu laden. Trotz der Bezeichnung muss XML nicht verwendet werden und die Datenübertragung kann auch synchron erfolgen.
{tab-level2 Ajax Anwendungen|info}Ajax-Anwendungen sind in der Lage, Anfragen an den Server zu schicken, bei denen nur die Daten angefordert werden, die tatsächlich benötigt werden. Dies geschieht über den Aufruf eines Webservices eines Servers. Der Aufruf erfolgt als asynchrone Kommunikation, d. h. während die Daten vom Server geladen werden, kann der User weiter mit der Oberfläche interagieren. Sind die Daten fertig geladen, dann wird eine zuvor benannte JavaScript-Funktion aufgerufen, die die Daten in die Webseite einbinden kann.
Im Ergebnis erhält man so eine Benutzeroberfläche, die sehr viel zügiger auf Benutzereingaben reagiert. Ein Grund für dieses veränderte Verhalten ist die Tatsache, dass wesentlich weniger Daten zwischen Webbrowser und Webserver ausgetauscht werden müssen, und dass das Laden der Daten asynchron erfolgt. Zudem wird die Webserver-Last reduziert, da schon viele Verarbeitungsschritte clientseitig getätigt werden können.
Flashchart seit der Version 1.2.1 (mit seiner Diagramm Klasse) unterstützt dabei Ajax sowohl Serverseitig mit zusätzlichen Methoden als auch mit seinen Javascript Schnittstellen.
{tab-level2 requestFlashchartData|info}Die Javascript Funktion "requestFlashchartData"
Eine Ajax-Anwendung besteht immer aus einer Client- und einer Serveranwendung. Der Client fordert via Javascript Daten (im Falle von flashChart im JSON-Format) von der Serveranwendung an. Diese Daten werden über eine Callback-Funktion verarbeitet und dann via Client präsentiert. Die Javascript Funktion "requestFlashchartData" hat genau diese Funktionalität. Als Eingabe benötigt dieses Funktion eine gültige URL der Serveranwendung. Für das Update der angezeigten Webseite werden folgende Nodes (div-Elemente) benötigt:
- "html_text" - für die Ausgabe von HTML-Code
- chart ids - für die Ausgabe von Diagrammen
- "flashchart_scripts" - für die Ausgabe von Diagramm Scripten
Serverseitige Unterstüzung für Ajax-Anwendungen
Flashcharts Ajax Schnittstellen verwenden ausschliesslich das JSON Datenformat - folgende Methoden liefern Flashchart JSON-Objekte:
| Methode | Beschreibung | Rückgabe Wert |
| createChartasJSON() | Erzeugt ein Diagramm als JSON Objekt | JSON Objekt |
| createChartasJSONScript($script) | Erzeugt ein Diagrammscript als JSON Objekt | JSON Objekt |
| createHTMLasJSON($html,$node='html_text') | Erzeugt aus HTML-Strings ein JSON Objekt ("$node" definiert das benötigte div-Element)" | JSON Objekt |
| getJSON() | Liefert alle erzeugten JSON Objekte | JSON Objekte |
{tab-level2 Die Beispielanwendung|info}
Hier das Beispiel der vorherigen Seite nun als Ajax-Anwendung:
{jumi [php-apps/flashchart/samples/testApp2a.php]}
Die Ajax Beispielanwendung wurde mit der Erweiterung "jumi" unter Joomla installiert, läuft also unter Kontrolle des Joomla Frameworks. Das Client-Script wurde via jumi-plugin in diese Seite eingebunden. Der Server Teil ist via Admin-Backend in der jumi-Komponente definiert worden. Im Quellcode (s. u.) kann man die einzelnen Implementierungen studieren.
Der Client-Teil hat folgende Anwendungslogik:
- Laufzeitumgebung definieren
- Javascripts einbinden - speziell der Aufruf von "requestFlashchartData" durch die Javascript-Funktion "processFormResults"
- HTML Formular erstellen - speziell auch die div-Elemente für Diagramm, Scripts und HTML
Im Server Teil werden HTML, Diagramme und Scripts auf der Basis der Anforderung des Clients im JSON Format erstellt und die Daten am Ende mit der Funktion "getJSON()" an den Client geliefert.
{tab-level2 testApp2a.php (Client Teil)|info}
<?php
// do not allow direct access
defined('_JEXEC') or die('Restricted access');
// setup environment ($server_url is setup based on jumi and its fileid)
$server_url = "/index.php?option=com_jumi&view=application&fileid=27&format=raw";
$urlbase = JURI::base() . "plugins/content/flashchart";
// create javascript and css resources
$html = "\n<script type='text/javascript' src='" . $urlbase . "/js/jquery.min.js' ></script>";
$html .= "\n<script type='text/javascript' src='" . $urlbase . "/js/swfobject.js' ></script>";
$html .= "\n<script type='text/javascript' src='" . $urlbase . "/js/flashchart.js' ></script>";
$html .= "\n<script type='text/javascript' src='" . $urlbase . "/js/jquery_msgbox.js' ></script>";
$html .= "\n<link href='" . $urlbase . "/css/msgbox.css' rel='stylesheet' type='text/css' />";
$qq = '"';
$script = "function processFormResults (form) {
var Item = form.chart.selectedIndex;
var chart = form.chart.options[Item].value;
var url = '$server_url' + '&chart=' +chart;
var loading_info = document.getElementById('html_text');
var loading_html = '<div align=center><img src="/ . $qq . $urlbase . '/images/loading.gif' . "$qq /></div>';
loading_info.innerHTML = loading_html;
// send ajax request:
requestFlashchartData(url);
}";
$html .= "\n<script type='text/javascript'>" . $script . "</script>";
// create html form
$html .= "<form action='' name='test_ajax'>
<b>Select Chart:</b>
<select name='chart'>
<option value='sql'>data from database</option>
<option value='url'>data via URL</option>
<option value='file'>data via file</option>
<option value='formula'>data via formula</option>
<option value='menu'>all charts via chart menu</option>
</select>
<input type='button' value='show chart' class='button' onclick='processFormResults(this.form)' />
</form>
<!--- Nodes for html, charts and scripts: reserved/needed names are 'html_text' and 'flashchart_scripts' -->
<div id='html_text'></div>
<div id='charts'>
<div id='chart_ajax'></div>
</div>
<div id='flashchart_scripts'></div>";
// output html
echo $html;
?>
{tab-level2 testApp2b.php (Server Teil)|info}
<?php
// setup environment
defined('_JEXEC') or die('Restricted access');
$basepath = JPATH_SITE;
$flashchart_root = "/plugins/content/flashchart";
$lib_path = $basepath . $flashchart_root . "/lib/";
require_once ($lib_path . "flashchart_class.php");
// create new chart object (use default properties)
$chart = new flashChart("chart01", null, "90%", "300");
$chart->setChartProperty("flashchart_root", $flashchart_root);
$selection = $_GET['chart'];
$chart->setChartProperty("label_fontsize", "11");
$chart->setChartProperty("bg_color", "f9f9f9");
$chart->setChartProperty("bg_image", $flashchart_root . "/images/watermark.png");
$menu = "Data via Database,sql_chart|Data via URL,url_chart|Data via File,file_chart|
Data via Formula,formula_chart";
if ($selection == "menu")
{
$chart->setChartProperty("menu", $menu);
$chart->createHTMLasJSON("<br/ >All Charts via <b>chart menu:</b>");
}
if ($selection == "sql" || $selection == "menu")
{
// use Joomla's Configfile and define sql statement
$dbconfig_file = $basepath . "/configuration.php";
$chart->setChartProperty("db_config_file", $dbconfig_file);
$sql = "Select title, hits From jos_content Order By hits Desc Limit 10";
$chart->setChartProperty("x_label_rotate", "40");
$chart->setChartProperty("data", "database");
$rc = $chart->setChartProperty("sql", $sql);
$chart->setChartProperty("type", "bar_dome");
$chart->setChartProperty("tooltip", "#val# hits");
$chart->setChartProperty("title", "Chart Data from Database (most read articles)");
if ($selection != "menu")
$chart->createHTMLasJSON("<br/ >Chart data via <b>sql</b>="$sql":");
else
$chart->createChartasJSONScript("sql_chart");
}
if ($selection == "file" || $selection == "menu")
{
$file = $basepath . "/php-apps/flashchart/samples/square.data";
$chart->setChartProperty("x_label_rotate", "0");
$chart->setChartProperty("data", "file");
$rc = $chart->setChartProperty("file", $file);
$chart->setChartProperty("x_step", "10");
$chart->setChartProperty("y_step", "8");
$chart->setChartProperty("axis_3d", "0");
$chart->setChartProperty("type", "line");
$chart->setChartProperty("tooltip", "x=#x_label# -> y=#y#");
$chart->setChartProperty("title", "Chart Data from File (square values)");
if ($selection == "menu")
$chart->createChartasJSONScript("file_chart");
else
$chart->createHTMLasJSON("<br/ >Chart data via <b>file</b>="$file":");
}
if ($selection == "url" || $selection == "menu")
{
$url = "http://www.jschmidt-systemberatung.de/php-apps/flashchart/samples/sinus.php";
$chart->setChartProperty("data", "url");
$rc = $chart->setChartProperty("url", "$url");
$chart->setChartProperty("x_label_rotate", "0");
$chart->setChartProperty("x_step", "9");
$chart->setChartProperty("y_step", "0.2");
$chart->setChartProperty("y_min", "-1");
$chart->setChartProperty("axis_3d", "0");
$chart->setChartProperty("type", "line_area");
$chart->setChartProperty("tooltip", "sinus #x_label# = #y#");
$chart->setChartProperty("title", "Chart Data from Remote WebServer (sinus from 0 to 360 degrees)");
if ($selection == "menu")
$chart->createChartasJSONScript("url_chart");
else
$chart->createHTMLasJSON("<br/ >Chart data via <b>url</b>="$url":");
}
if ($selection == "formula" || $selection == "menu")
{
// set selected chart properties
$formula = "y = 2 * e^-(0.2 * x) * sin(x * 2 * pi)";
$chart->setChartProperty("title", "Chart Data created via Formula");
$chart->setChartProperty("type", "line");
$chart->setChartProperty("axis_3d", "0");
$chart->setChartProperty("y_step", "0.5");
$chart->setChartProperty("x_step", "10");
$chart->setChartProperty("x_interval", "0.1");
$chart->setChartProperty("x_max", "20");
$chart->setChartProperty("y_min", "-2");
$chart->setChartProperty("tooltip", "x=#x_label# y=#y#");
$chart->setChartProperty("data", "formula");
$rc = $chart->setChartProperty("formula", $formula);
if ($selection == "menu")
$chart->createChartasJSONScript("formula_chart");
else
$chart->createHTMLasJSON("<br/ >Chart data via <b>formula</b>="$formula":");
}
// create empty chart if "menu" requested
if ($selection == "menu")
{
$chart->setChartProperty("data", "null");
$chart->setChartProperty("y_min", "null");
$chart->setChartProperty("grid_color", "f9f9f9");
$chart->setChartProperty("tooltip", "");
$chart->setChartProperty("title", "Charts via Chart Menu");
}
if ($rc == 1)
{
$chart->createChartasJSON ();
}
else
{
$data['data_type'] = 'error_data';
$data['error_title'] = "Processing Error";
$data['error_msg'] = "could not set chart property for $selection ($rc)";
echo json_encode($data);
return;
}
echo $chart->getJSON ();
?>
{/tabs}
{/tabs}
Haben Sie Fragen? Fragen Sie!
Viel Spaß!