AmCharts-PHP Class Library
A few weeks ago I had the pleasure to integrate the very nice AmCharts into one of our products. After a few tests in general (my colleague Stefan wrote about it – German) we decided to build a PHP5 library around the AmCharts Flash objects to create and configure charts in a more convenient way.
Usual integration
You usually configure AmCharts using one or more XML files (one for the settings and one for the data in most cases). This is great if you have static data and constant settings. We use AmCharts to create charts with data retrieved from a database. We could now use a PHP script to create the XML file AmCharts use. Our settings also vary from chart to chart. So we also need a settings file for each different chart. IMHO that’s too much code for a few charts, so we had to find another way to create them.
The solution
AmCharts offers the possibility to pass all settings and data via flash variables instead of external XML files. And that’s what we use in our Library. All parameters (chart type, settings, data) are passed via flash variables. That generates a lot of inline HTML code but eliminates a lot of files and headache when managing the source.
Because writing the XML strings for settings and data is not as easy as it should be we had to create a few classes to generate the ready-to-use HTML code directly in PHP.
An example
This example shows how to create a simple pie chart with two slices once in the plain old style and once using AmCharts-PHP.
Using XML files
settings.xml
-
<settings>
-
<pie>
-
<angle>45</angle>
-
<height>10</height>
-
</pie>
-
</settings>
data.xml
-
<pie>
-
<slice title="Democrats (Obama)" color="#0000FF" pull_out="true">365</slice>
-
<slice title="Republicans (McCain)" color="#FF0000">173</slice>
-
</pie>
Website integration
-
<script type="text/javascript" src="amline/swfobject.js"></script>
-
<div id="flashcontent">
-
<strong>You need to upgrade your Flash Player</strong>
-
</div>
-
<script type="text/javascript">
-
// <![CDATA[
-
var so = new SWFObject("amline/ampie.swf", "ampie", "520", "400", "8", "#FFFFFF");
-
so.addVariable("path", "ampie/");
-
so.addVariable("settings_file", escape("settings.xml"));
-
so.addVariable("data_file", escape("data.xml"));
-
so.write("flashcontent");
-
// ]]>
-
</script>
Using AmCharts-PHP
-
$chart = new AmPieChart("election2008");
-
$chart->setConfig("pie.angle", 45);
-
$chart->setConfig("pie.height", 10);
-
$chart->addSlice("democrats", "Democrats (Barack Obama)", 365,
-
$chart->addSlice("republicans", "Republicans (John McCain)", 173,
As we see, it’s much more comfortable to use and much more flexible.
Licencing
AmCharts-PHP is published under the GNU Lesser General Public Licence.
Download
You can download AmCharts-PHP from Sourceforge.
Tags: AmCharts, PHP
The swfobjects.js file on your examples and the one downloaded from amcharts are different and incompatible?
If I use the one donwloade from amcharts I get “chart loadling” and the chart never gets displayed…
The one delivered with AmCharts-PHP is a newer version which works differently. If you use AmCharts-PHP you have to use the newer version (2.0).
Where can I get the new version of AmCharts-PHP?… Sourceforge only has 0.1.0…
The swfobject.js from the AmCharts-PHP 0.1.0 bundle is version 2.0. You find it in the examples folder.
Ok… That’s the one I’ve got.
Do you have a user guide on this? I am taking to long just do understand on how to config the graphs…
How do we set the chart width and height?
How does SetConfig works?
Thanks a lot
There will be a more detailed example on chart configuration in the next release. Until then, this is a “real-life” example from one of our products:
AmChart::$jsPath = “tools/amcharts-php/AmCharts.js”;
AmChart::$libraryPath = “tools/amcharts”;
AmChart::$swfObjectPath = “tools/swfobject/swfobject.js”;
$chart = new AmLineChart(“test”);
// Sets chart config
$chart->setConfigAll(array(
“width” => “100%”,
“height” => 300,
“plot_area.margins.left” => 80,
“plot_area.margins.right” => 10,
“plot_area.margins.top” => 10,
“grid.x.enabled” => false,
“grid.x.approx_count” => 10,
“grid.y_left.enabled” => true,
“grid.y_right.enabled” => false,
“values.x.enabled” => true,
“values.x.rotate” => 90,
“values.x.skip_first” => false,
“values.x.skip_last” => false,
“values.y_left.enabled” => true,
“values.y_left.reverse” => false,
“values.y_left.frequency” => 1,
“values.y_right.enabled” => false,
“values.y_right.reverse” => false,
“values.y_right.frequency” => 2,
“axes.x.width” => 1,
“axes.y_left.width” => 1,
“axes.y_right.width” => 1,
“indicator.enabled” => true,
“indicator.zoomable” => true,
“indicator.x_balloon_enabled” => true
));
// Sets default config for graphs (lines in a line chart)
$chart->setDefaultGraphConfig(array(
“hidden” => false,
“bullet” => “round_outlined”,
“bullet_size” => 12,
“line_width” => 4
));
You can find all available settings in the official AmCharts-documentation.
I am looking to use this software to display data with my current PHP/Mysql software, but am not a programmer, if anyone has experience with doing this then i would appreciate them contacting me. My name is Simon and i can be contacted at sales@instant-leads.com
report bug
AmChart.php
line 191
public function setLibraryPath($_path) {
$this->libraryPath = $_path; //—>self::$libraryPath = $_path;
}
Fixed for the next release. I didn’t realize that because the function setLibraryPath is obsolete. the $libraryPath member is public.
I can’t make this work with Safari I have tried many times and It does work Works with other browsers on mac Just not Safari. Any Ideas
I have no problems using Safari 3.2.1. Which version of Safari do you use?
Nice. Unless I am mistaken, there is no way to have two Y axes (line charts) at the moment. Is this something you are planning on adding?
Using two Y axis is possible. Just use the settings from the AmCharts Documentation for AmCharts-PHP:
$amLineChart->addGraph(“myId”, “Description of Graph”, $dataArray, array(“axis” => “right”));
You can set the settings of the axis like this:
$amLineChart->setConfig(“values.y_right.enabled”, true);
Nice. Thanks!
I found the problem with safari I am using both 3.2.1 and 4.0 beta
The problem is in line 104 of swfobject.js
if(!(a.ie&&a.win)&&typeof g.createTextNode!=Z){k.appendChild(g.createTextNode(m+”{“+j+”}”))}l.appendChild(k);
I is undefined
If I remove the l.appendChild(k); from the code it works in all browser.
I hope that help you out.
I will comment out that line on my end.
Thanks for the great tool.
Ciao, I\’ve tried to use javacript to control the amcharts via your library but it seems that there are something that I dodn\’t completly understand.
May you please post an example of how to control a chart?
while amGetZoom function works well, the \’showall\’ and all the others to set the graph don\’t work.
Seems that I can get the information from the graph but not set it.
Ciao, ciao
What I do is recreate the chart with the option of
$HideAll = $_POST['HideAll'];
if ( $HideAll == true)
$theseHide = false; // Hide them all
else
$theseHide = true;// Show them all
$chart->setDefaultGraphConfig(array(
“hidden” => $theseHide,
“bullet” => “round”, //_outlined
“bullet_size” => 10,
“line_width” => 2
));
This was so much faster then trying to hide one at a time.
It time a spilt second to recreate the table again.
I Hope this helps.
if you need more code to help just say so. I used a drop down menu to control this feature.
Steven
how to enable labels?
I tried:
$chart->setConfig(“data_labels.show”, “”);
but it converts to html symbols so that it won’t work…
my last comment was altered, i’ll try html codes…
$chart->setConfig(“data_labels.show”, “<![CDATA[{title}: {percents}%]]>”);
anyway, the config value is inside “less than” and “greater than” symbols.
Just a warning: This doesn’t seem to work in Chrome. I spent quite a bit of time trying to make it work before i thought of testing in another browser. Chrome will say “Chart is loading” but it never loads. Works fine in FF and IE.
Would appreciate it if somebody could show me how to pass data from a database to the PHP file to display a stacked bar chart? All data, including balloon text is stored in the database. Its all right if the colours of the bar are hard-coded before hand
I’ve followed recommendations and setup here to the letter, but I can’t get this to 1) have more than one graph in a page (tried $chart2 on everything etc. as alternatives) and 2) get the config to actually do what I ask.
It parses the code correctly into the page, but config options such as animate etc. don’t materialise. Though width and basic adjustments do, so it is ‘getting through’. Am I the only one finding this all a bit more difficult than it should be?
I have no problem have many charts on a Page.
Just Change the $TableNum is it not the Same
// Initialize the chart (the parameter is just a unique id used to handle multiple charts on one page.)
$chart = new AmLineChart(“myLineChart_” . $TableNum);
If you need more Help I can post a Full Example if needed.
No Flash anything works in Chrome It is not just this code.
If you get the swfobject.js swfobject_2_2_beta1.zip It fixes the problems with not loading the charts in safari.
It will not work with the swfobject.js 2.1 version that is supplied in this download from here.
I have no idea what bugs are in this beta but at least I can have charts again in Safari.
Thanks for the effort to write this class.One thing I needed to know, how do you define settings for a particular slice through $chart->addSlice() ? I need to add a slice with following equivalent XML.
17.819
I am sorry .I think the html was filtered in last comment. here is the XML.
slice title=”South America” pull_out=”true” color=”#FCD202″
Just add the slice with the following parameters:
$chart->addSlice(‘south_america’, ‘South America’, 10, array(‘pull_out’ => true, ‘color’ => ‘#FCD202′));
The fourth parameter is a config array for the slice.
Worked !! Thanks a lot.
Hello, I would like to suggest a little improvement: in SWFObject 2.2 the embedSWF function has a 10th parameter that can be used to specify a callback function that is called on both success or failure of embedding a SWF file. You can use this parameter to display a message in case of Flash Player problems this way:
$code .= \’\’
. \’<div class=\"amChartInner\" …
…
. \’swfobject.embedSWF(\"\’ . $this->getSwfPath() . \’\", \"chart_\’ . $this->id . \’_flash\", \"\’ . $width . \’\", \"\’ . $height . \’\", \"8\", \"\", flashvars, params, {}, function(event){if (!event.success) document.getElementById(\"chart_\’.$this->id.\’_flash\").innerHTML=\"Flash player error!\";} );\’ . \"\\n\"
Hi, nice tools.
For those who needs the library path to be passed over to the actual chart, add this to the getCode() function:
. ‘flashvars.path = “‘ . self::$libraryPath . ‘”;’ . “\n”
Maybe add this for next release?
Hi, try to use the php code.
How to make this work with Chrome?
IE is OK, but in Chrome it just show : charts loading..
Hi,,report
went to google and downloaded the latet version of the swfobject.js (2.2), then chrome work!
By the way, can anyone tell me where should I put the license key into (folder) ??
Hi Sam,
this was what my comment was referring to.
Your license key file must be in the same folder as your .swf files (amcolumn.swf, amline.swf, …). But for your flash files to read the file, they must know it’s path.
So the getCode() function becomes:
…..
. ‘// id . ‘”;’ . “\n”
. ‘flashvars.chart_settings = escape(“‘ . str_replace(“\”", “‘”, $this->getConfigXml()) . ‘”);’ . \n”
…..
I guess you could put the file somewhere else as long as the path flashvars directs to that location, but I haven’t tried, and don’t know if there would be any side-effects.
Edit: the code I posted above did not go through, take no notice of it, just add the line i posted further above.
PS: at least your anti-code-injection mechanism seems to work :)
I\’ve wondered why I couldn\’t get the x-axis labels rotated by 45°.
The reason is that the path to the \"fonts\" directory isn\’t referenced correctly:
The Javascript variable \"path\" is missing. I added the following line in AmChart.php after line 127:
. \’flashvars.path = \"\’ . self::$libraryPath . \’/\";\’ . \"\\n\"
Using “export.php” for exporting a chart as an PNG image doesn’t work – function “imagepng” must be called like this: imagepng($imgResource, NULL, 0, NULL);
So in “export.php” it becomes: if ($imgtype == “png”) $function($img, NULL, 0, NULL);
Hi, Very nice library!
Im trying to generate a stacked line graph. Is this possible with current version?
Can you provide a detailed example?
Thanks in advance
Very nice library. Is google the best place to get the 2.2 version of swfobject?
Great library compared to others but is it possible to use multiple labels on a chart?! Ive been tryng it for two days now and im beginning to suspect its impssible to configure using PHP. Am i the only one whos having this problem? Here is my code, can anybody help?
$chart->setConfigAll(array(
“labels.label.x” => 0,
“labels.label.y” => 20,
“labels.label.text” => “cells ml“,
));
how can i add another label into x- 100, y – 20
found it, anybody having this kind of newbie problems described above use:
$myChart->addLabel(“blah”, 0, 20 );
I’m trying to integrate amcharts-php on a wordpress site.
I think it would be great if the user can add the scripts links into the header of the html page (through the wordpress functions).
For that, I added a parameter to the constructor to specify if amcharts-php shall include the script links or not.
Regards.
This is a really great library, thanks a lot for throwing it together. I did have one problem with the array2xml method in AmChart.php spitting out funky xml on a live server (I had no problem with it locally using wamp). I finally traced the problem down to line 278 ‘if($nextNode == null){‘. The $nextNode was being caught as null when it shouldn’t have been which was causing multiple nodes to be generated when there only should have been one. I changed it to ‘if($nextNode === null){‘ so that it makes sure that the comparison is strongly typed and now everything is working fine.
Cheers.
Excellent library!. Thanks for sharing.
Mmm… From what I see ( I think there should be a addGuide function.