amCharts width JSON and PHP howTo
May 10th, 2010
Dies soll eine kleines HowTo sein, wie man mittels JSON und PHP amCharts in einer Webseite einbindet
Ziel ist ein Chart wie hier abgebildet
Als erstes die Amcharts .js Dateien in den Header einbinden
Im HTML Code legt wird ein div-Tag angelegt. Dieses div-Tag bekommt eine ID, um später den Flash-Content einzuspielen zu können.
Nachfolgend die Javascript Funktion die ein FlashChart zeichnet
function draw(data,settings,print_id,width,height){
//mit jquery ist die base_uri auf der Seite hinterlegt und wird geholt
var main_path_on_server = $('#base_uri').val(); // website url
var so = new SWFObject(
main_path_on_server + "/amcharts/amline/amline.swf", "amline", width, height, "8", "#FFFFFF");
so.addVariable("path", "amcharts/amline/");
//Chart Wertepaare einfügen
so.addVariable("chart_data", escape(data));
//Chart Settings einfügen
so.addVariable("chart_settings", encodeURIComponent(settings));
so.addParam("wmode", "opaque");
//flash in das div, mit der übergebenen id schreiben
so.write(print_id);
}
//mit jquery ist die base_uri auf der Seite hinterlegt und wird geholt
var main_path_on_server = $('#base_uri').val(); // website url
var so = new SWFObject(
main_path_on_server + "/amcharts/amline/amline.swf", "amline", width, height, "8", "#FFFFFF");
so.addVariable("path", "amcharts/amline/");
//Chart Wertepaare einfügen
so.addVariable("chart_data", escape(data));
//Chart Settings einfügen
so.addVariable("chart_settings", encodeURIComponent(settings));
so.addParam("wmode", "opaque");
//flash in das div, mit der übergebenen id schreiben
so.write(print_id);
}
Die Funktion draw wird von der folgenden Funktion aufgerufen
//diese Funktion bekommt ein Json Objekt als Rückgabe einer AJAX-Anfrage vom Server
// dieses Objekt enthält die Member: xml,settings,flash_name,height,width
function prepare_draw(json_data){
var data = json_data.xml;
var settings = json_data.settings;
var flash_name = json_data.flash_name;
var height = json_data.height;
var width = json_data.width;
//call der draw funktion mit vorangestelltem xml- Syntax
draw("<?xml version=\"1.0\" encoding=\"UTF-8\"?>" + data,
"<?xml version=\"1.0\" encoding=\"UTF-8\"?>" + settings,
flash_name, width, height);
}
// dieses Objekt enthält die Member: xml,settings,flash_name,height,width
function prepare_draw(json_data){
var data = json_data.xml;
var settings = json_data.settings;
var flash_name = json_data.flash_name;
var height = json_data.height;
var width = json_data.width;
//call der draw funktion mit vorangestelltem xml- Syntax
draw("<?xml version=\"1.0\" encoding=\"UTF-8\"?>" + data,
"<?xml version=\"1.0\" encoding=\"UTF-8\"?>" + settings,
flash_name, width, height);
}
Das JSON Objekt wird über ein Ajax Aufruf in PHP erstellt.
Um es zu füllen, ist die JSON Funktion aus PHP 5 zu nutzen.
Die Amcharts XML wird mit den Libraries von AmCharts-PHP 0.2.0 generiert.
in Pseudo Code sieht das ganze dann so aus
......
/*
* Die AMCHARTS-PHP libraries einbinden
* APPPATH = deine Website Url
*/
require_once( APPPATH . 'libraries/amxml_dateien.php');
......
$chart = new AmLineChart("Mychart");
//hole Daten aus der Datenbank in ein result
foreach ($query->result() as $row) {
//x-Achse
$chart->addSerie($row['id_x'],"titel");
//Array mit Wertepaaren
$werte_paare[ $row['id_x'] ] = $row['y_wert'];
}
//Graph zum Chart hinzufügen
$chart->addGraph("Wetter_id", "Wetter_name", $werte_paare);
//Titel setzen
$conf = array('text_size'=> '12', 'align' =>'center');
$chart->addLabel("<b>Wetter</b>", 10,25,$conf);
/* settings */
$chart->setConfig("column.balloon_text"," {title}: {value}");
$chart->setConfig("values.x.rotate","90");
$chart->setConfig("grid.x.approx_count","30");
$chart->setConfig("export_as_image.file","export");
$chart->setConfig("export_as_image.target","_blank");
//nun das JSON-Objekt befüllen
$json->data['xml'] = $chart->getDataXml();
$json->data['settings']= $chart->getConfigXml();
$json->data['width'] = 800;
$json->data['height']= 400;
$json->data['flash_name']= "my_chart";
//JSON-Objekt abschicken, hier dient als Beispiel ein einfaches echo
....
<code>echo json_encode($json);</code>
...
/*
* Die AMCHARTS-PHP libraries einbinden
* APPPATH = deine Website Url
*/
require_once( APPPATH . 'libraries/amxml_dateien.php');
......
$chart = new AmLineChart("Mychart");
//hole Daten aus der Datenbank in ein result
foreach ($query->result() as $row) {
//x-Achse
$chart->addSerie($row['id_x'],"titel");
//Array mit Wertepaaren
$werte_paare[ $row['id_x'] ] = $row['y_wert'];
}
//Graph zum Chart hinzufügen
$chart->addGraph("Wetter_id", "Wetter_name", $werte_paare);
//Titel setzen
$conf = array('text_size'=> '12', 'align' =>'center');
$chart->addLabel("<b>Wetter</b>", 10,25,$conf);
/* settings */
$chart->setConfig("column.balloon_text"," {title}: {value}");
$chart->setConfig("values.x.rotate","90");
$chart->setConfig("grid.x.approx_count","30");
$chart->setConfig("export_as_image.file","export");
$chart->setConfig("export_as_image.target","_blank");
//nun das JSON-Objekt befüllen
$json->data['xml'] = $chart->getDataXml();
$json->data['settings']= $chart->getConfigXml();
$json->data['width'] = 800;
$json->data['height']= 400;
$json->data['flash_name']= "my_chart";
//JSON-Objekt abschicken, hier dient als Beispiel ein einfaches echo
....
<code>echo json_encode($json);</code>
...
Ich hoffe es hilft jemandem.
$json->data['xml'] = $chart->getDataXml();
$json->data['settings']= $chart->getConfigXml();
Leave a Reply