amCharts & amMap blog

In Pie chart v 1.1.1 I added a possibility to set alpha for individual slices. And even more – if you set alpha to 0, this slice will be disabled for mouse events, the data label will not be displayed and it will not appear in the legend. This means that you can easily have half a pie, 3/4 of a donut and so on. This allows you to create fancy menus as well. Check this example.

Download ampie

Column chart, unlike line chart, doesn’t have two value axes. But, especially after introducing a possibility to have lines in column chart, I keep receiving questions whether this is possible  – people want to display data which has very different range and having only one axis makes it impossible. But there is one easy way to workaround this problem with version 1.1.3. Here is an example.

Check Data XML and Settings XML.

As you can see in data XML file, the real values of line chart are not the ones displayed in the chart:

<value xid="0" start="10">10000</value>
<value xid="1" start="12">12000</value>

I used attribute "start", which original meaning is to set start value for floating column. Line chart pays no attention to this attribute, however you can make line’s data label to display this attribute, check settings file:

<line>
   <data_labels>
      <![CDATA[<b>{start}</b>]]>
   </data_labels>

That’s the trick. You can use "start" attribute to pass any data you want.

Since column chart  v 1.1.2 you can make your bars and columns float. Check this example.

To make floating charts you need to use XML data type. Here is the syntax:

<value xid="0" start="11">18</value>

This means that the bar or column will start at 11 and will end at 18.

Only clustered charts can be floating.

Two more things:

If you are using column chart and you will  set "above" for <data_labels_position>, the data label will appear rotated by 90 degrees inside the column.

If you want to change "Loading data", "Loading settings" and "Collecting data" (this one is if you use export to image function), you can add this code to your html (somewhere near other addVariable lines):

so.addVariable("loading_data", "Your own text");
so.addVariable("loading_settings", "Your own text");
so.addVariable("collecting_data", "Your own text");

What’s new in this version:

Some users asked me whether it is possible to import charts to PowerPoint. It is possible and here is a short tutorial how to do it.

1. Create new PowerPoint presentation and save it somewhere, let’s say to the same folder where your amcolum.html file is.

2. In PowerPoint, click View -> Toolbars -> Control Toolbox.

3. New Toolbar will appear. Click ”More Controls” button and select “Shockwave Flash Object” from the list. Your mouse pointer should change to +

4. Click on your presentation area and adjust the size of your chart. You should get this:

5. Click on it and select “Properties”. “Properties” window will open.

6. Double click on (Custom). “Property pages” window will open.

7. Now in the “Movie URL” field you should enter path to swf file and pass required variables to this file. Most often you will need two variables (amcolumn_dataFile and amcolumn_settingsFile). The syntax of passing variables is:

your.swf?variable1=value1&variable2=value2

We saved our ppt in the same folder where amcolumn.html file is, so swf file will be:

amcolumn/amcolumn.swf

then we should add variable amcolumn_dataFile. Data file is also in amcolumn folder, so this will be:

amcolumn_dataFile=amcolumn/amcolumn_data.xml

and another variable – amcolumn_settingsFile:

amcolumn_settingsFile=amcolumn/amclumn_settings.xml

Now lets join all together:

amcolumn/amcolumn.swf?amcolumn_dataFile=amcolumn/amcolumn_data.xml&amcolumn_settingsFile=amcolumn/amcolumn_settings.xml

 Click OK.

The flash movie will not appear in PPT. You should view presentation (click F5 or View->Slide Show).

That’s it.

The only uncomfortable thing is that these files will not be embeded in your ppt presentation. This means that you must always include all the files then you want to send presentation to someone.

P.S. since v 1.1.0 you can use shorter variable names:

“settings_file” instead of “amcolumn_settingsFile”

“data_file” instead of “amcolumn_dataFile”

I bet you will be surprised how many new and useful features this version has. Here is what you will be able to do:

1. add lines and areas to your column chart;
2. control chart with JavaScript – reload data and settings, set and get data and separate params;
3. export chart as an image;
4. load custom overlays and plugins (you can create them yourself);
5. labels, values and series near both axes and texts can be vertical. And you will not need to embed fonts like in competitors flash charting tools;
6. and more…

What next:

I will work on line and pie charts now and will implement most the new features to these charts too. And after that I promise to prepare a really good documentation :)

Download Column chart.

You can pass data or settings to charts directly from html file. This can save you loading time and in some cases will be more comfortable.

Check examples amcolumn7.html or amline7.html from downloaded zip files.  Line chart uses XML data type and column chart – CSV.

All you need to do is set chart_data or chart_settings in your html file, for example:

Data in XML:

so.addVariable("chart_data", "<chart><series><value xid='0'>2000</value><value xid='1'>2001</value><value xid='2'>2002</value><value xid='3'>2003</value><value xid='4'>2004</value><value xid='5'>2005</value><value xid='6'>2006</value><value xid='7'>2007</value></series><graphs><graph gid='0' title='First title'><value xid='0'>6</value><value xid='1'>36</value><value xid='2'>34</value><value xid='3'>37</value><value xid='4'>48</value><value xid='5'>42</value><value xid='6'>29</value><value xid='7'>43</value></graph><graph gid='1' title='Second title'><value xid='0'>19</value><value xid='1'>6</value><value xid='2'>39</value><value xid='3'>25</value><value xid='4'>8</value><value xid='5'>40</value><value xid='6'>50</value><value xid='7'>10</value></graph></graphs></chart>");

Data in CSV:

so.addVariable("chart_data", "First;50\nSecond;80");

\n separates new lines (you can’t have real new lines here).

Settings:

so.addVariable("chart_settings", "<settings><background><color>#DADADA</color><alpha>100</alpha></background><labels><label><y>20</y><width>520</width><align>center</align><text><![CDATA[<b>Passing data and settings directly from html file example</b>]]></text></label></labels></settings>")

You can generate this data dynamically with php, asp or any other script.

There is one more variable – "additional_chart_settings". You can use it for appending some of settings to the loaded ones.

I received some enquiries and understood, that I need to give some more explanations about using dynamic data with chart products.

When using dynamic data you don’t need to create and save xml or csv files on your server. Your data file, (which can be php or asp or any other script) should output xml or csv formatted text.

This example is made with php, but you can do it with other languages as well:

http://extra.amcharts.com/line/dynamic_data/index.php?title0=Income&title1=Expenses

Try to change "Income" and "Expenses" in url to some other text and you’ll see that text in the legend changes too.

Let’s see what we have in the index.php file:

so.addVariable("data_file", escape("amline/amline_data.php?title0=<? echo ($_GET['title0']); ?>&title1=<? echo ($_GET['title1']); ?>"));

As you can see I set data file name as amline_data.php file and attached two variables to it – title0 and title1.  This php code:

<?php echo ($_GET["title0"]); ?>

just gets title0 from your url. You can pass any variables in this way.

Flash script receives data url and then loads data accessing this url with all variables you passed. So data file can generate result according to parameters. Of course data file can generate dynamic result even if you don’t pass any variables, all depends on your needs. Now check this url and view source of the file – this xml was generated dynamically by php script.  In this case I just generated some random data. Usually you will not do this, instead you might want to get data from database, another xml file or anywhere else.

This works with all charts.

Source code of amline_data.php file

Full source of index.php:

<!-- saved from url=(0013)about:internet -->
<!-- amline script-->
  <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/amline.swf", "amline", "520", "400", "8", "#FFFFFF");
        so.addVariable("path", "amline/");
        so.addVariable("settings_file", escape("amline/amline_settings.xml"));
        so.addVariable("data_file", escape("amline/amline_data.php?title0=<? echo ($_GET['title0']); ?>&title1=<? echo ($_GET['title1']); ?>"));
        so.addVariable("preloader_color", "#999999");
        so.write("flashcontent");
        // ]]>
    </script>
<!-- end of amline script -->