FusionCharts Free Documentation

Using FusionCharts with PHP > Basic Examples

FusionCharts can effectively be used with PHP to plot dynamic data-driven charts. In this section, we'll show a few basic examples to help you get started.

We'll cover the following examples here:

We'll use FusionCharts in PHP with a pre-built Data.xml (which contains data to plot)
We'll then change the above chart into a single page chart using dataXML method.
Finally, we'll use FusionCharts JavaScript class to embed the chart.

Let's quickly see each of them. Before you proceed with the contents in this page, we strictly recommend you to please go through the section "How FusionCharts works?" and "Plotting from Database Example", as we'll directly use a lot of concepts defined in those sections.

All code discussed here is present in Download Package > Code > PHP > UTF8Example folder.

While using FusionCharts with UTF-8 characters, please remember the following:

dataURL method has to be used to get the xml.
Rotated text cannot render UTF-8 characters. For example, UTF-8 characters in the rotated labels will not be rendered correctly.
BOM has to present in the xml given as input to the chart.

In our code, we've used the charts contained in Download Package > Code > FusionCharts folder. When you run your samples, you need to make sure that the SWF files are in proper location. Also the JapaneseData.xml file used in JapaneseXMLFileExample.php is present in the Download Package > Code > PHP > UTF8Example > Data folder.

Let's now get to building our first example. In this example, we'll create a "Monthly Unit Sales" chart using dataURL method. For a start, we'll hard code our XML data in a physical XML document JapaneseData.xml and then utilize it in our chart contained in an PHP Page (JapaneseXMLFileExample.php).

Let's first have a look at the XML Data document:

<?xml version="1.0" encoding="UTF-8" ?>
<graph caption='月間販売' xAxisName='月' yAxisName='Units' decimalPrecision='0' formatNumberScale='0'>
    <set name='一月' value='462' color='AFD8F8' />
    <set name='二月' value='857' color='F6BD0F' />
    <set name='三月' value='671' color='8BBA00' />
    <set name='四月' value='494' color='FF8E46' />
    <set name='五月' value='761' color='008E8E' />
    <set name='六月' value='960' color='D64646' />
    <set name='七月' value='629' color='8E468E' />
    <set name='八月' value='622' color='588526' />
    <set name='九月' value='376' color='B3AA00' />
    <set name='十月' value='494' color='008ED6' />
    <set name='十一月' value='761' color='9D080D' />
    <set name='十二月' value='960' color='A186BE' />
</graph>

The XML document should begin with an XML declaration which specifies the version of XML being used and the encoding as seen in the above xml:
<?xml version="1.0" encoding="UTF-8" ?>

As you would notice, the caption, x-axisname and names of the months in the xml are in Japanese. The xml tags itself are same as the ones seen in BasicExample.

The php which uses this xml is JapaneseXMLFileExample.php which contains the following code:

<?php
   //We've included ../Includes/FusionCharts.php, which contains functions
   //to help us easily embed the charts.
   include("../Includes/FusionCharts.php");
?>
<HTML>
    <HEAD>
        <TITLE>
                FusionCharts Free - UTF8 日本語 (Japanese) Example
        </TITLE>
        <?php
        //You need to include the following JS file, if you intend to embed the chart using JavaScript.
        //Embedding using JavaScripts avoids the "Click to Activate..." issue in Internet Explorer
        //When you make your own charts, make sure that the path to this JS file is correct. Else, you
        //would get JavaScript errors.
        ?>
        <SCRIPT LANGUAGE="Javascript" SRC="../../FusionCharts/FusionCharts.js"></SCRIPT>
        <style type="text/css">
        
        </style>
    </HEAD>
    <BODY>
        <CENTER>
            <h2><a href="http://www.fusioncharts.com" target="_blank">FusionCharts Free</a>              UTF8日本語(Japanese) Example</h2>
            <h4>Basic example using pre-built JapaneseData.xml</h4>
            <?php
            /*
            In this example, we show how to use UTF characters in charts created with FusionCharts
            Here, the XML data for the chart is present in Data/JapaneseData.xml.
            The xml file should be created and saved with an editor
            which places the UTF8 BOM. The first line of the xml should contain the
            xml declaration like this: <?xml version="1.0" encoding="UTF-8" ?>
            */

            //Create the chart - Column 3D Chart with data from Data/JapaneseData.xml
            echo renderChart("../../FusionCharts/FCF_Column3D.swf", "Data/JapaneseData.xml", "",                    "JapaneseChart", 600, 300);
            ?>
            <BR><BR>
            <a href='../NoChart.html' target="_blank">Unable to see the chart above?</a>
            <H5 ><a href='../default.htm'>« Back to list of examples</a></h5>
      </CENTER>
</BODY>
</HTML>

This code is similar to the code present in BasicExample/SimpleChart.php. As you would notice, there is nothing specific to be done in the Chart container page to ensure UTF-8 output. As a practice, you could have the <meta> tag in the head section of the html with the charset defined as UTF-8 as shown below.

<meta http-equiv="content-type" content="text/html; charset=utf-8" />

That's the only effort involved in rendering a chart with UTF8 characters with data from a xml file. The chart with Japanese text will look as shown:

Let' move on to our next example where we get the data from the database and dynamically create the xml.

Let us now create a chart with UTF characters present in the database. For this we will modify the database and add a table to contain the Japanese data.

Please refer to Plotting From Database section for basic setup and configuration of the database.
Ensure that the tables required for the UTF8 examples have been created. The required sql script "UTFExampleTablesCreation.sql" is present in the Download Package > Code > PHP > DB folder. You could run this script in your mysql, (if not already done)- this will alter the database to use UTF8 as default character set, create the Japanese_Factory_Master and French_Factory_Master tables and insert sample data.

Let's now shift our attention to the code that will interact with the database, fetch data and then render a chart. We will create two php files - JapaneseDBExample.php and PieDataJapanese.php for this example.

JapaneseDBExample.php will act as the chart container and PieDataJapanese.php will be the xml data provider.

The code contained in JapaneseDBExample.php is as follows:

<?php
//We've included ../Includes/FusionCharts.php, which contains functions
//to help us easily embed the charts.
include("../Includes/FusionCharts.php");
?>
<HTML>
    <HEAD>
        <META http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
        <TITLE>
            FusionCharts Free - UTF8 日本語 (Japanese) Database Example
        </TITLE>
        <?php
        //You need to include the following JS file, if you intend to embed the chart using JavaScript.
        //Embedding using JavaScripts avoids the "Click to Activate..." issue in Internet Explorer
        //When you make your own charts, make sure that the path to this JS file is correct. Else, you         would get JavaScript errors.
        ?>
        <SCRIPT LANGUAGE="Javascript" SRC="../../FusionCharts/FusionCharts.js"></SCRIPT>
        <style type="text/css">
        
        </style>
    </HEAD>
    <BODY>
        <CENTER>
            <h2><a href="http://www.fusioncharts.com" target="_blank">FusionCharts Free</a> - UTF8             日本語 (Japanese) Example With Data from Database             </h2>
            <?php
            /*
            In this example, we show how to use UTF characters in chart created with FusionCharts
            Here, the XML data for the chart is dynamically generated by PieDataJapanese.php.
            */
            /*
            In this example, FusionCharts uses dataURL method to get the xml from the data in             the database.
            In order to store and retrieve UTF8 characters from database, in our example, MySQL,
            we have to alter the database default charset to UTF8. This can be done using the command:
            ALTER DATABASE DEFAULT CHARACTER SET = utf8; on the "factorydb" database.
            For this example, we will use another table Japanese_Factory_Master containing the names of             the factories
            in Japanese language. This table should also be defined to use UTF8 as DEFAULT CHARSET.
            The sql script that needs to be executed before running this example is                      UTFExampleTablesCreation.sql
            present in Code/JSP/DB folder.
            */
            $strDataURL = "PieDataJapanese.php";

            //Create the chart - Pie 3D Chart with dataURL as strDataURL
            echo renderChart("../../FusionCharts/FCF_Pie3D.swf", $strDataURL, "", "FactorySum", 650, 450);
            ?>
            <BR><BR>
            <a href='../NoChart.html' target="_blank">Unable to see the chart above?</a>
            <H5 ><a href='../default.htm'>« Back to list of examples</a></h5>
        </CENTER>
    </BODY>
</HTML>

In the above Chart container page, as far as UTF-8 specific changes is concerned, only the <meta> tag in the head section of the html with the charset defined as UTF-8 as shown below:

<meta http-equiv="content-type" content="text/html; charset=utf-8" />

Let's move on to PieDataJapanese.php which contains the code to connect to the database and retrieve data. Here is the code present in PieDataJapanese.php:

<?php
echo pack("CCC",0xef,0xbb,0xbf);
//We've included ../Includes/DBConn.php, which contains functions
//to help us easily connect to a database.
include("../Includes/DBConn.php");
/*
This page generates the XML data for the Pie Chart contained in JapaneseDBExample.php.

For the sake of ease, we've used the same database as used by other examples.
We have added one more table Japanese_Factory_Master with stores the names of the factory in Japanese language.

Steps to ensure UTF8 xml output for FusionCharts:
1. Output the BOM bytes 0xef 0xbb 0xbf as shown above in the first few lines
2. Put the xml declaration <?xml version='1.0' encoding='UTF-8'?> immediately after the output from previous step.
3. Declare contentType to be text/xml, charSet.
4. Use getBytes to get the data from UTF field in the database and to convert it into String, use new String(bytes,"UTF-8")
Do not output anything other than the BOM, xml declaration and the xml itself. (no empty lines too!)
*/

//Connect to the DB
$link = connectToDB();
$useUTFQuery = "SET NAMES 'utf8'";
$utfQueryResult = mysql_query($useUTFQuery);
//$strXML will be used to store the entire XML document generated
//Generate the graph element
$strXML = "<graph caption='工場出力レポート' subCaption='量で' decimalPrecision='0' showNames='1' numberSuffix=' Units' decimalPrecision='0' pieSliceDepth='30' >";

// Fetch all factory records
$strQuery = "select * from Japanese_Factory_Master";
$result = mysql_query($strQuery) or die(mysql_error());

//Iterate through each factory
if ($result) {
    while($ors = mysql_fetch_array($result)) {
        //Now create a second query to get details for this factory
        $strQuery = "select sum(Quantity) as TotOutput from Factory_Output where FactoryId=" . $ors['FactoryId'];
        $result2 = mysql_query($strQuery) or die(mysql_error());
        $ors2 = mysql_fetch_array($result2);
        //Generate <set name='..' value='..'/>
        $strXML .= "<set name='" . $ors['FactoryName'] . "' value='" . $ors2['TotOutput'] . "' />";
        //free the resultset
        mysql_free_result($result2);
    }
}
mysql_close($link);
//Finally, close <graph> element
$strXML .= "</graph>";

//Set Proper output content-type and charset
header('Content-type: text/xml;charset=UTF-8');

//Just write out the XML data
//NOTE THAT THIS PAGE DOESN'T CONTAIN ANY HTML TAG, WHATSOEVER
?>
<?xml version='1.0' encoding='UTF-8'?><?php echo $strXML; ?>

This code is similar to PieData.php seen in DBExample with dataURL method. There are some UTF-8 specific points to be noted here.
If the XML data provider is a PHP file, as in this case, then the output should follow this sequence:

The php should output the BOM as shown in the code below:
<?php
echo pack("CCC",0xef,0xbb,0xbf);
?>
This should be the first output from this php.
Next, the xml declaration should be output: <?xml version='1.0' encoding='UTF-8'?>
Finally, the xml data should be output

Try not to put any empty lines or spaces in the output xml.

When connecting to the database, the following query should be executed, before running query to get data in UTF8:

mysql_query ( "SET NAMES 'UTF8'" );

This will inform mysql that all incoming data are UTF-8, it will convert them into table/column encoding. Same will happen when mysql sends you the data back - they will be converted into UTF-8.

You will also have to assure that you set the content-type response header to indicate the UTF-8 encoding of the page as shown:

header('Content-type: text/xml;charset=UTF-8');

When we view the chart in the browser, it would look as under:

In Download Package > Code > PHP > UTF8Example, we've more example codes for French language too, which have not been explained here, as they're similar in concept. You can directly see the code and get more insight into it.