FusionBrew - The official FusionCharts blog

How boring charts in Microsoft Excel and a craving for pocket money gave birth to FusionCharts

Hrishikesh Choudhari — Tue, 10 Apr 2012 11:22:46 +0000

It all began in 2002 when our CEO, all of 17-years then, was fed up of *boring* charts in Excel. This, alongside an opportunity to tap into the lack of interactive charting solutions on the web and rake in decent pocket money set the ball in motion. He figured out an innovative way using Macromedia Flash (back then) to make charts interactive and fun, published that as an article and the rest as they say is “HISTORY”.

Our evolution has been exciting all along. Starting without any external funding (in fact none till date) and all of six chart types (since that’s all of what we knew back then), the first version of FusionCharts was launched. It steadily picked up steam and today we boast of 90 chart types and 550 maps. More importantly, FusionCharts today powers over a *billion* charts a month in some of the most popular web destinations like LinkedIn, Weather.com, Google Docs etc. We also have a picture of President Obama using FusionCharts products….and no it is NOT Photoshopped!!!!!!

For the first three years of our existence, a desk and a chair were all we had. No “official” office, no employees, not even an office number to call up on. In fact, the founder’s home number doubled up as the office number and he changed accents when you thought the call had been transferred from the support to the sales team. We didn’t even have a single dedicated sales person till we got to 10,000 customers, forget a sales team. In fact, we hadn’t even stepped out on foreign soil for as much as an expo till a year back. Guess we can safely say that hard work and persistence does pay off.

As we moved up the value-chain, so did our learnings and offerings. From our first ever tag line “The extensive real-time animated graphing solution” to the current “Data to delight… in minutes,” we have come a long way. We learnt a lot about technology, markets, dynamics and even marketing. We have our own mascot too, the FusionCharts Dude. We introduced products for Microsoft SharePoint, PowerPoint, VB6, Adobe Flex and Joomla. We even gave back to the community a free version of our core product. Success breeds more success and we gained tremendous coverage in leading publications like Forbes, Entrepreneur, Mixergy, Penn-Olson and far too many magazines, all of these without spending a single dime on PR. We have also been acknowledged as one of the 50 fastest growing tech firms in India and one of the top 500 firms in Asia-Pacific.

This is just the beginning and we are working hard to constantly push the boundaries of data visualization. We thank you for being with us along this exciting journey, for the brickbats and the bouquets alike. It matters a lot to us.

JavaScript charts using SQL Server data with FusionCharts XT – Part 2

Hrishikesh Choudhari — Fri, 30 Mar 2012 13:40:12 +0000

In the second part of FusionCharts XT with ASP.NET series, learn how to use SQL Server data to create JavaScript charts. We will use the .NET library bundled with FusionCharts XT to create charts in ASP.NET (C#). In the first article of this series, we saw how this .NET library reduces developer effort and generates the HTML and JavaScript required to produce interactive charts in the browser.

FusionCharts XT with ASP.NET
Part 1 – Create JavaScript charts in ASP.NET (C#)
Part 2 – Plot JavaScript charts using SQL Server data
Part 3 – Create Drill-Down & LinkedCharts in ASP.NET(C#)

What we are going to visualize

We will use the same SQL Server database that powers our showcase Management Dashboard. To keep things simple, we will plot the Total Sales Revenue of each Year.

.NET library bundled with FusionCharts XT

FusionCharts XT is essentially a JavaScript library. In order to render a chart, certain amount of HTML and JavaScript is required, along with the chart data in XML or JSON.

In order to automate this, we provide a .NET library with FusionCharts XT, which generates the HTML and JavaScript required. You can find this library in FusionCharts XT Download Package > Code > CS > Bin > FusionCharts.dll. By referencing this library, rendering charts is just one line of code! Let us see how..

What we will need

Visual Studio or Visual Web Developer
SQL Server
The latest version of FusionCharts XT
Sample SQL Server Database

Preparing the project

We will be using Visual Studio 2010 for this series. Visual Studio 2008 or Visual Web Developer will suit fine too.

You can re-use the project we created in the previous article, or create a new one:

Create a blank ASP.NET (C#) web site and save it as FusionChartsXT_with_ASPNET.
Right-click the project’s name in Solution Explorer > Add New Item > Web Form. Keep the name as Using_MS_SQL_Server.aspx.
Copy the Charts folder from the FusionCharts Download Package and paste it in the Solution Explorer.
Include the FusionCharts XT’s JavaScript file in Using_MS_SQL_Server.aspx:
<script type="text/javascript" src="Charts/FusionCharts.js"></script>
Right-click the project’s name in Solution Explorer > Add ASP.NET Folder > App_Data.
Right-click App_Data > Add Existing Item > Browse to the folder containing Sample SQL Server Database.
Right-click the project’s name in Solution Explorer > Add Reference > Browse. Now browse to FusionCharts XT Download Package > Code > CS > Bin > FusionCharts.dll.
In Using_MS_SQL_Server.aspx.cs, include the namespace of this library by writing
using InfoSoftGlobal;

The above steps are necessary whenever you want to use FusionCharts XT in a .NET project.

Before we begin coding, let us have a look at the database. It has 7 tables:

But we will work with just 2 of them for this demo – FC_Orders and FC_OrderDetails:

Creating charts using Data String method

As explained in the previous post, you can supply data to FusionCharts using the Data String method or the Data URL method. First, let us try the Data String method.

In this method, the XML or JSON data is embedded within the web page, along with the chart’s HTML and JavaScript code. This method doesn’t require a static data file or a virtual data provider. Moreover, once the chart has finished loading, the data is present locally within the page.

In Using_MS_SQL_Server.aspx, create a Literal tag with a unique ID.

<asp:Literal ID="chart_from_db" runat="server">
asp:Literal>

In the code-behind page, write the following code. In-line comments will help you understand what we’re doing:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using System.Data.Sql;
using System.Data.SqlClient;
using System.Text;
using InfoSoftGlobal;

public partial class Using_MS_SQL_Server : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
// Construct the connection string to interface with the SQL Server Database
string connStr = @"Data Source=.\SQLEXPRESS;AttachDbFilename=C:\Users\Fusion Charts\Documents\Visual Studio 2010\WebSites\FusionChartsXT_with_ASPNET\App_Data\FusionChartsDB.mdf;Integrated Security=True;User Instance=True";

// Initialize the string which would contain the chart data in XML format
StringBuilder xmlStr = new StringBuilder();

// Provide the relevant customization attributes to the chart
xmlStr.Append("");

// Create a SQLConnection object
using (SqlConnection conn = new SqlConnection(connStr))
{
// Establish the connection with the database
conn.Open();

// Construct and execute SQL query which would return the total amount of sales for each year
SqlCommand query = new SqlCommand("SELECT SUM(FC_OrderDetails.UnitPrice * FC_OrderDetails.Quantity) AS AMOUNT, YEAR(FC_Orders.OrderDate) AS yr FROM FC_Orders INNER JOIN FC_OrderDetails ON FC_OrderDetails.OrderID = FC_Orders.OrderID GROUP BY YEAR(FC_Orders.OrderDate) ORDER BY YEAR(FC_Orders.OrderDate)", conn);

// Begin iterating through the result set
SqlDataReader rst = query.ExecuteReader();

while (rst.Read())
{
// Construct the chart data in XML format
xmlStr.AppendFormat("", rst["yr"].ToString(), rst["AMOUNT"].ToString());
}

// End the XML string
xmlStr.Append("");

// Close the result set Reader object and the Connection object
rst.Close();
conn.Close();

// Call the RenderChart method, pass the correct parameters, and write the return value to the Literal tag
chart_from_db.Text = FusionCharts.RenderChart(
"FusionChartsXT/Column2D.swf", // Path to chart's SWF
"", // Leave blank when using Data String method
xmlStr.ToString(), // xmlStr contains the chart data
"annual_revenue", // Unique chart ID
"640", "340", // Width & Height of chart
false, // Disable Debug Mode
true); // Register with JavaScript object
}
}
}

Save and run this project. This is the chart that you should see in your browser:

Creating charts using Data URL method

As previously explained, in Data URL method, you need two pages:

Chart Container Page – The page which embeds the HTML code to render the chart. This page also tells the chart where to load the data from. We’ll use the Using_MS_SQL_Server.aspx page for this.

Data Provider Page – This page provides the XML data to the chart. We’ll name this page as DataProvider.aspx.

Keep the code in Using_MS_SQL_Server.aspx as it is. Delete all but the first line from DataProvider.aspx.

From Using_MS_SQL_Server.aspx.cs, cut the contents of the Page_Load() method, till before the RenderChart() method’s line. Paste it in DataProvider.aspx.cs. This is what you should have in DataProvider.aspx.cs:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using System.Data.Sql;
using System.Data.SqlClient;
using System.Text;
using InfoSoftGlobal;

public partial class DataProvider : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
// Construct the connection string to interface with the SQL Server Database
string connStr = @"Data Source=.\SQLEXPRESS;AttachDbFilename=C:\Users\Fusion Charts\Documents\Visual Studio 2010\WebSites\FusionChartsXT_with_ASPNET\App_Data\FusionChartsDB.mdf;Integrated Security=True;User Instance=True";

// Initialize the string which would contain the chart data in XML format
StringBuilder xmlStr = new StringBuilder();

// Provide the relevant customization attributes to the chart
xmlStr.Append("");

// Create a SQLConnection object
using (SqlConnection conn = new SqlConnection(connStr))
{
// Establish the connection with the database
conn.Open();

// Construct and execute SQL query which would return the total amount of sales for each year
SqlCommand query = new SqlCommand("SELECT SUM(FC_OrderDetails.UnitPrice * FC_OrderDetails.Quantity) AS AMOUNT, YEAR(FC_Orders.OrderDate) AS yr FROM FC_Orders INNER JOIN FC_OrderDetails ON FC_OrderDetails.OrderID = FC_Orders.OrderID GROUP BY YEAR(FC_Orders.OrderDate) ORDER BY YEAR(FC_Orders.OrderDate)", conn);

// Begin iterating through the result set
SqlDataReader rst = query.ExecuteReader();

while (rst.Read())
{
// Construct the chart data in XML format
xmlStr.AppendFormat("", rst["yr"].ToString(), rst["AMOUNT"].ToString());
}

// End the XML string
xmlStr.Append("");

// Close the result set Reader object and the Connection object
rst.Close();
conn.Close();

// This page should return only XML content
Response.ContentType = "text/xml";
Response.Write(xmlStr.ToString());
}
}
}

This completes the code for DataProvider.aspx. Run this page, and all you will see is the chart data in XML format:

caption="Total Revenue" palette="3" showValues="0" numberPrefix="$" useRoundEdges="1">
label="1994" value="175345.1000" />
label="1995" value="631865.8900" />
label="1996" value="547247.6000" />
>

Coming back to Using_MS_SQL_Server.aspx.cs, modify the RenderChart() method to use Data URL:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using InfoSoftGlobal;

public partial class Using_MS_SQL_Server : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{

// Call the RenderChart method, pass the correct parameters, and write the return value to the Literal tag
chart_from_db.Text = FusionCharts.RenderChart(
"FusionChartsXT/Column2D.swf", // Path to chart's SWF
Server.UrlEncode("DataProvider.aspx"), // Page which returns chart data
"", // String containing the chart data. Leave blank when using Data URL.
"annual_revenue", // Unique chart ID
"640", "340", // Width & Height of chart
false, // Disable Debug Mode
true); // Register with JavaScript object
}
}

We use the Server.UrlEncode() method to take care of any special characters in the URL / querystring.
Save and run this page. You should see the same chart as before:

The data for this chart is provided by DataProvider.aspx.cs. You can see this by opening the Network tab in either Firebug or Chrome’s Developer Tools.

Download Source Project

Next in the series: Creating Drill-down JavaScript charts with ASP.NET(C#)

In the third part of this series, we will add drill-down functionality to the above chart, so that we can drill-down into the year 1995 and see monthly revenue for that year. You can read more about drill-down charts in the FusionCharts Documentation. Stay tuned..

JavaScript charts with ASP.NET (C#) using FusionCharts XT – Part 1

Hrishikesh Choudhari — Thu, 29 Mar 2012 13:55:34 +0000

FusionCharts XT with ASP.NET is a new series where we walk you through the basics of creating interactive JavaScript charts, using your .NET skills. FusionCharts Suite is the leading enterprise-grade JavaScript charting solution. Our enterprise customers have vouched for our products and support, and we keep adding newer products and features to our solution. Be it a simple column or pie chart, gauges, advanced zoom and scroll charts, or specialized financial charts, FusionCharts Suite covers all your charting requirements. All the charts support interactive options like tooltips, drill-down, exporting as image, PDF, or CSV. We’re iPhone and iPad ready, too!

With FusionCharts XT, you can leverage your .NET skills to create JavaScript charts. We provide a .NET library which generates all the HTML and JavaScript required to create charts.

FusionCharts XT with ASP.NET
Part 1 – Create JavaScript charts in ASP.NET (C#)
Part 2 – Plot JavaScript charts using SQL Server data
Part 3 – Create Drill-Down & LinkedCharts in ASP.NET(C#)

What we are going to visualize

The chart below shows data of Top 5 Employees of a fictitious company.

In this tutorial, we will create the same chart using the .NET library.

.NET library bundled with FusionCharts XT

FusionCharts XT is essentially a JavaScript library. In order to render a chart, certain amount of HTML and JavaScript is required, along with the chart data in XML or JSON.

What we will need

Visual Studio or Visual Web Developer
The latest version of FusionCharts XT
Sample chart data

Preparing the project

We will be using Visual Studio 2010 for this series. Visual Studio 2008 or Visual Web Developer will suit fine too.

Create a blank ASP.NET (C#) web site and save it as FusionChartsXT_with_ASPNET.
Right-click the project’s name in Solution Explorer > Add New Item > Web Form. Keep the name as Default.aspx.
Copy the Charts folder from the FusionCharts Download Package and paste it in the Solution Explorer.
Include the FusionCharts XT’s JavaScript file in Default.aspx:
<script type="text/javascript" src="Charts/FusionCharts.js"></script>
Copy the Sample Data folder and paste it in the Solution Explorer.
Right-click the project’s name in Solution Explorer > Add Reference > Browse. Now browse to FusionCharts XT Download Package > Code > CS > Bin > FusionCharts.dll.
In Default.aspx.cs, include the namespace of this library by writing
using InfoSoftGlobal;

The above steps are necessary whenever you want to use FusionCharts XT in a .NET project.

Next, there are 2 ways by which you can supply data to your charts – the Data URL method and the Data String method. Let us try each one of them.

Creating a JavaScript chart using Data URL method

In the Data URL method, you tell FusionCharts XT to load data from an XML or JSON file URL. This URL could also point to a virtual data provider, e.g., /path_to/data_provider.aspx, which will execute queries on the database, construct the XML data and output it to the stream, with content type set to text/xml. For this example, we will point FusionCharts XT to an XML file’s URL.

Create a Literal tag in Default.aspx, and give it a unique ID.

<asp:Literal ID="literal_1" runat="server">
asp:Literal>

We will write the code required to generate a chart to this literal. Then, FusionCharts.js would process this code and show a chart instead.

In Default.aspx.cs, within the Page_Load method, write the following code:

// Set the rendering mode to "javascript". (Default is "flash")
FusionCharts.SetRenderer("javascript");

literal_1.Text = FusionCharts.RenderChart("FusionChartsXT/Column2D.swf", "Data/Data.xml", "", "browser_share", "640", "340", false, true);

Save. Run the project (F5). This is the chart that you should see:

You were able to render a chart in your .NET app with just one single line!

Understanding the RenderChart() method

The RenderChart() method does all the heavy lifting of generating HTML and JavaScript required to render a chart in the browser. It takes parameters in the following order:

Chart SWF name: The first parameter contains the Path and file name of the chart SWF file. We have to use the relative path to SWF file, which is recommended. When plotting charts in JavaScript, FusionCharts XT uses the SWF name to internally map to the chart’s JavaScript alias.
URL to static XML file: If Data URL method is to be used. If you intend to use Data String method, leave this as blank.
Variable containing XML data string: If Data String method is to be used. If you have specified data as a URL, leave this parameter as blank.
ID of the chart: Each chart on the page needs a unique ID. This ID is different from the ID of the container DIV. As we will learn later, this ID is used to get a reference to the chart for manipulation using advanced JavaScript.
Width and height in pixels: Each chart needs to be initialized with width and height, specified either in pixels (specified in numeric format, without appending px) or percentage. In this example, we have used pixels. You can also set it to percentage values. The FusionCharts JavaScript class will automatically convert the percentage dimensions to pixel dimensions, with respect to the parent container element in HTML, DIV in this case, and pass it to the chart.
Boolean for Debug Mode: If you’re facing any issues while developing your charts, you can initialize them in debug mode by setting this parameter to true. The debug mode gives you behind-the-scenes information on where data is loaded from, errors etc. In our example, we are rendering the chart in normal mode, by setting this parameter to false.
Boolean for Registering with JavaScript: In earlier versions of FusionCharts, the last parameter let you configure whether charts could be controlled using JavaScript. Now that FusionCharts is very tightly integrated with FusionCharts, this parameter is a mandatory true.

Creating a JavaScript chart using Data String method

In the Data String method, the XML or JSON data is embedded within the web page, along with the chart’s HTML and JavaScript code. This method doesn’t require a static data file or a virtual data provider. Moreover, once the chart has finished loading, the data is present locally within the page.

Let us create a chart using the Data String method below the first chart.

Create another Literal tag with ID as literal_2. In the code-behind, comment the line of the RenderChart() method, and write the following code after it:

// xmlStr contains the XML data required for the chart
String xmlStr = "";

// Set rendering mode to "javascript".
FusionCharts.SetRenderer("javascript");

literal_2.Text = FusionCharts.RenderChart("FusionChartsXT/Column2D.swf", "", xmlStr, "browser_share_2", "640", "340", false, true);

Save. Run the project (F5). You should see the following chart:

Providing chart data in JSON

JSON is another format that FusionCharts XT supports. If you want to provide data in JSON, simply write the following line before the RenderChart() method:

FusionCharts.SetDataFormat("json");

We provide a tool to convert XML to JSON. You can find it in FusionCharts XT Download Package > Tools > FCDataConverter. The JSON data for the above chart is:

{
"chart": {
"caption": "Top 5 Employees for 2011",
"palette": "3",
"showvalues": "0",
"numberprefix": "$",
"useroundedges": "1"
},
"data": [
{
"label": "Leverling",
"value": "100524"
},
{
"label": "Fuller",
"value": "87790"
},
{
"label": "Davolio",
"value": "81898"
},
{
"label": "Peacock",
"value": "76438"
},
{
"label": "Callahan",
"value": "55091"
}
]
}

Download the project source

Next article in this series: Create a chart using data from SQL Server

In the next article, we will create a chart using data from a database. You can head over to our documentation and read on how to use FusionCharts XT to create charts using data from SQL Server. Stay tuned.

Debugging JavaScript charts with FusionCharts XT – Part 5

Hrishikesh Choudhari — Wed, 21 Mar 2012 12:04:42 +0000

In the 5th and final part of the FusionCharts XT in PHP series, we will learn how to debug our charts. Debugging helps us know what happens behind the scenes while rendering a chart. With the FusionCharts JavaScript Debug Mode, we can generate a complete log of the internal events, as well as any errors that crop up. Since the JavaScript charts are rendered only by the browser, the debug logs will be available in the browser’s Console Log. Let us begin debugging!

FusionCharts XT in PHP Series
Part 1 – JavaScript charts in PHP using FusionCharts XT
Part 2 – JavaScript charts in PHP and MySQL using FusionCharts XT
Part 3 – Drill-down JavaScript charts in PHP and MySQL
Part 4 – JavaScript LinkedCharts in PHP and MySQL
Part 5 – Using Debugging Tools for JavaScript Charts

We will understand the debugging process in three sections:

Understanding Debug Messages

To aid you in basic debugging, the charts show certain messages when something goes wrong. These messages will show up in place of the chart:

Error in Loading Data:
- Check if you’ve actually provided Data URL or Data String. If you do not provide either, FusionCharts looks for a default Data.xml file in the same path. Now, if that is also not found, it shows the “Error in Loading Data” error.
- If you’re using Data URL method, paste this URL in your browser to check if it’s returning a valid XML. Make sure, there are no scripting or time-out errors and a valid XML is being returned. Also make sure that the XML isn’t intermingled with HTML content. The data provider page should return a clean XML only – not even HTML <head> or <body> tags.
- Make sure you’re passing relative URLs for Data URL, and not absolute URLs.
Invalid XML Data:
If you get an Invalid XML Data message, it means that the XML data document is malformed. Check it for common errors like:
- Differences in case of tags. e.g., > should end with [cciel lang='xml']> and not > or >
- Missing opening/closing quotation marks for any attributes. e.g., caption=Monthly Sales' ..> should be caption='Monthly Sales' ..>
- Missing closing tag for any element. e.g., label='Services' value='26' > should be label='Services' value='26' />
- In Data String method, check for conflict of ' (XML Attribute Character) and " (HTML Parameter Character). e.g., if you’re using direct HTML embedding method, and using " for HTML parameters, then you need to make sure that all your XML attributes use ' as containers.
- If you’ve quotes as part of your data, XML Encode them to ' e.g., label='John's House' />
No data to display:
- Your XML data doesn’t contain any data that could be plotted by FusionCharts. In this case, your XML just contains the > or > tags without any data between them.
- You might be using a single-series chart SWF and providing data in multi-series format or vice-versa.
- In some Dual Y Combination charts, you need to provide at least one dataset for both the axis.

FusionCharts XT JavaScript Debug Mode

The FusionCharts XT JavaScript Debug Mode provides a very developer-friendly way of debugging the charts.
It enables you to log all the events that take place in the lifetime of a chart. All you need to write is:

However, with the above line alone you will not be able to see any logs. To see the output, log it to the browser’s console by adding the following line:

FusionCharts.debugMode.outputTo( function() { console.log(arguments); } );

You should see the following events being logged in the browser’s console:

If you are using Firebug, or Chrome’s Developer Tools, you can explore the object hierarchy by setting the output format to verbose:

FusionCharts.debugMode.outputFormat('verbose');

Being good (read lazy) developers ourselves, we write the above 3 lines in a more compact fashion:

FusionCharts.debugMode.enabled( function() { console.log(arguments); }, 'verbose');

And for the rare bug-hunting session when you don’t have Firebug installed, you can include Firebug-Lite remotely:

FusionCharts.debugMode._enableFirebugLite();

Using Advanced Error and Warning Events

The FusionCharts XT JavaScript Class fires events at every stage during the lifetime of a chart. You can listen for the events that fire upon errors in the chart. You can either listen to these events globally, or on a per-chart basis as shown below:

function myChartListener(eventObject, argumentsObject) {
alert( eventObject.sender.id + " has an error: " + argumentsObject.message );
}
FusionCharts("chart_id").addEventListener ("Error" , myChartListener );

The first argument is eventObject which provides details of the event. It is an object which mainly provides three properties :
eventId : An unique ID given to the event
eventType : A string containing the name or the event type, for example, “rendered” etc.
sender : A FusionCharts JavaScript Object reference to the chart which has raised that event
The second argument is argumentsObject is an object and contains details of the event. As per the type of the event the properties of parameter objects varies.

You can read more about Listening to Events in the FusionCharts XT Documentation.

Concluding the series

We’ve covered a lot of ground in this series. You can go back and read through the previous articles if you haven’t yet:

Part 1 – JavaScript charts in PHP using FusionCharts XT

Part 2 – JavaScript charts in PHP and MySQL using FusionCharts XT

Part 3 – Drill-down JavaScript charts in PHP and MySQL

Part 4 – JavaScript LinkedCharts in PHP and MySQL

Let us know in the comments how you liked this series. We’re putting out more interesting content for all you developers. Stay tuned..

JavaScript LinkedCharts in PHP and MySQL using FusionCharts XT – Part 4

Hrishikesh Choudhari — Tue, 20 Mar 2012 14:42:47 +0000

In the 4th part of FusionCharts XT in PHP series, we will create LinkedCharts in PHP. LinkedCharts is a pioneering concept introduced by FusionCharts which allows unlimited levels of drill-down. LinkedCharts help users maintain the context when drilling down (or up) in their data. The child LinkedCharts can be configured in every way possible. Let us create LinkedCharts using the bundled PHP script, which takes the hassle out by generating the HTML, JavaScript and XML required to render any chart.

FusionCharts XT in PHP Series
Part 1 – JavaScript charts in PHP using FusionCharts XT
Part 2 – JavaScript charts in PHP and MySQL using FusionCharts XT
Part 3 – Drill-down JavaScript charts in PHP and MySQL
Part 4 – JavaScript LinkedCharts in PHP and MySQL
Part 5 – Using Debugging Tools for JavaScript Charts

What we are going to visualize

In the 3rd part of this series, we created a simple drill-down chart, where the parent chart shows the Top 10 Most Populous Countries, and the child chart shows the Top 10 Most Populous Cities of that country.

We will make use of the same data and create a LinkedChart as shown below:

LinkedCharts provides a convenient way to navigate through the levels using the overlay button. This helps immensely in maintaining context while traversing the data. There are a few more implementations of LinkedCharts in our Features Gallery.

What we will need

PHP running on any server
MySQL
The latest version of FusionCharts XT
The sample World database provided by MySQL. Read more to understand the structure of this database and how to set it up.
The source code for the 2nd part of the series

Our installation process will be the same as we did in the previous article. You may use the same setup or create it as follows:

Within the root directory of your web server, create a folder named FusionCharts_XT_with_PHP. This will be our demo folder.
Copy the entire Charts folder from the FusionCharts XT Download Package and paste it within our demo folder. This completes the installation of FusionCharts XT in our web application.
Copy the Includes folder from FusionCharts XT Download Package > Code > PHP > Includes to our demo folder.
Copy the source files used in the previous article and paste them in our demo folder

Attributes of LinkedCharts

When creating LinkedCharts, you will have to provide the data for the child charts in either Data URL or Data String formats using the link attribute.

LinkedCharts using Data URL

In the Data URL method, we can point to a static XML file which provides the data for this particular child. The syntax for Data URL method is:

label='your_label' value='your_value' link='newchart-xmlurl-{xml file URL}' />

The newChart prefix is used to indicate that it must invoke LinkedCharts. xmlURL indicates that Data URL method is used to specify XML data for the linked child charts. In case of JSON data, jsonurl is used. URL specifies the data path for the linked chart that opens when this column is clicked.
So according to the syntax, you would provide the child chart’s data in this way:

label='China' value='1277558000' link='newchart-xmlurl-China.xml' />

We can also point to a virtual data provider, such as a server-side script which returns only XML, with Content-type set to text/xml:

label='China' value='1277558000' link='newchart-xmlurl-LinkedCharts_DataProvider.php?country=China' />

LinkedCharts using Data String

When using the Data String method, the child chart’s data will have to be within the parent chart. Each data plot item in the parent chart is then linked to the child chart’s data (embedded in parent data source) by means of a unique data identifier. The syntax for Data String method is:

label='your_label' value='your_value' link='newchart-xml-{linked-data-ID}' />
id='your_id'>
caption='Child chart'>
{child chart data comes here}
>
>

According to this syntax, this demo’s code would have to be:

label='China' value='1277558000' link='newchart-xml-China' />
id='China'>
caption = 'Top 10 Most Populous Cities in China' showValues='0' useRoundEdges='1' palette='3'>
label='Shanghai' value='9696300' />
label='Peking' value='7472000' />
label='Chongqing' value='6351600' />
label='Tianjin' value='5286800' />
label='Wuhan' value='4344600' />
label='Harbin' value='4289800' />
label='Shenyang' value='4265200' />
label='Kanton [Guangzhou]' value='4256300' />
label='Chengdu' value='3361500' />
label='Nanking [Nanjing]' value='2870300' />
>
>

Data URL or Data String?

As is apparent from the samples above, the Data URL method is more concise than the Data String method. If you have more than 1 level of drill-down, your XML string will get large, and consequently difficult to debug. Loading times for your charts might suffer too.
Therefore, we recommend the Data URL method to keep your code cleaner, and charts leaner.

Creating LinkedCharts using Data URL method

As you already know from the first 3 articles, the Data URL method requires 3 things:

The parent chart (which we created in the 2nd article)
The correct path to the data provider in the link attribute (see below)
The data provider (see further below!)

Make a copy of FusionChartsXT_with_PHP_and_MySQL_DataString.php and save it as FusionChartsXT_LinkedCharts_DataURL.php. Edit the part where you create the dataplots as below:

// Append the names of the countries and their respective populations to the chart's XML string.
// Provide the path to the data provider in the 'link' attribute, along with the country's name in the querystring.
$strXML .= "]."' value='".$ors['Population']."' link='newchart-xmlurl-LinkedCharts_DataProvider.php?country=".$ors['Country']."' />";

Save this file. Let us now create the PHP script which will provide the data for the child charts:

// Set the content type in the header to text/xml.
header('Content-type: text/xml');

// Include the DBConn.php and FusionCharts.php files, so that we can access their variables and functions.
include('Includes/DBConn.php');
include('Includes/FusionCharts.php');

// Retrieve the name of the country passed from the parent chart's querystring.
$countryName = $_REQUEST['country'];

// Use the connectToDB() function provided in DBConn.php, and establish the connection between PHP and the World database in our MySQL setup.
$link = connectToDB();

// Form the SQL query which returns the Top 10 Most Populous Cities of the specified country.
$strQuery_cities = 'SELECT city.Name AS City, city.Population AS Population FROM city WHERE city.CountryCode = (SELECT country.Code FROM country WHERE country.Name = "'.$countryName.'") ORDER BY Population DESC LIMIT 10';

// Execute the query, or else return the error message.
$result_cities = mysql_query($strQuery_cities) or die(mysql_error());

// Form the chart data's XML string.
$strXML = "";

while($ors_cities = mysql_fetch_array($result_cities)) {
// Iterate through the result set and append the data plots to the XML string.
$strXML .= "]."' value='".$ors_cities['Population']."' />";
}

// Close the chart's XML string.
$strXML .= "";

// Return the valid XML string.
echo $strXML;
?>

Save this file as FusionChartsXT_LinkedCharts_DataProvider.php. Now navigate to the page which has the parent chart, and click on one of the columns. This is what you should see:

Creating LinkedCharts using Data String method

As we’ve seen above, when using the Data String method, the child charts’ data needs to be embedded within the parent chart’s data.
Therefore, we need to have a single file only. Make another copy of FusionChartsXT_with_PHP_and_MySQL_DataString.php and save it as FusionChartsXT_LinkedCharts_DataString.php.
New code needs to the written only within the while loop; but we’re showing the code for the entire file below:

// Include the DBConn.php and FusionCharts.php files, so that we can access their variables and functions.
include('Includes/DBConn.php');
include('Includes/FusionCharts.php');

// Use the connectToDB() function provided in DBConn.php, and establish the connection between PHP and the World database in our MySQL setup.
$link = connectToDB();

// Form the SQL query which will return the Top 10 Most Populous Countries.
$strQuery = 'SELECT Name AS Country, Population FROM country ORDER BY Population DESC LIMIT 10';

// Execute the query, or else return the error message.
$result = mysql_query($strQuery) or die(mysql_error());

// If we get a valid response -
if ($result) {

// Create the parent chart's XML string. We can add attributes here to customize our chart.
$strXML = "";

while($ors = mysql_fetch_array($result)) {
// Append the names of the countries and their respective populations to the chart's XML string.
// Provide the appropriate ID for the LinkedChart in the 'link' attribute.
$strXML .= "]."' value='".$ors['Population']."' link='newchart-xml-".$ors['Country']."' />";

// Form the SQL query which returns the Top 10 Most Populous Cities for the specified country.
$strQuery_cities = 'SELECT city.Name AS City, city.Population AS Population FROM city WHERE city.CountryCode = (SELECT country.Code FROM country WHERE country.Name = "'.$ors['Country'].'") ORDER BY Population DESC LIMIT 10';

// Execute the query, or else return the error message.
$result_cities = mysql_query($strQuery_cities) or die(mysql_error());

// Add the unique identifier for this particular child chart.
$strXML .= "]."'>";

// Create the child chart's XML. This chart can have all the attributes as any other regular chart.
$strXML .= "]."' showValues='0' useRoundEdges='1' palette='3'>";

while($ors_cities = mysql_fetch_array($result_cities)) {
// Append the names of the cities and their respective populations to the child chart's XML string.
$strXML .= "]."' value='".$ors_cities['Population']."' />";
}

// Close the child chart's XML string, and also close the unique identifier for this child chart.
$strXML .= "";
}
}
// Close the parent chart's XML string.
$strXML .= "";
?>

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Drill-down charts using FusionCharts XT with PHP and MySQL

// Set the rendering mode to JavaScript
FC_SetRenderer('javascript');

// Call the renderChart method, which would return the HTML and JavaScript required to generate the chart
echo renderChart('Charts/Column2D.swf', // Path to chart type
'', // Empty string when using Data String method
$strXML,// Variable which has the chart data
'top10_most_populous_countries', // Unique chart ID
'660', '400', // Width and height in pixels
false, // Disable debug mode
true // Enable 'Register with JavaScript' (Recommended)
);
?>

Save this file. Navigate to this page using your browser, and this is what you should see:

Configuring LinkedCharts

What we created above were standard LinkedCharts. The child charts used the same configuration and chart type as the parent chart.

Using the FusionCharts XT JavaScript API, you can configure every aspect of the child charts. For this, we’ve provided the configureLink() function. You can pass all the properties that a FusionCharts constructor accepts, as parameters to this function.

The syntax for the configureLink() is:

configureLink(objConfiguration: Object, level:Number)

As two separate parameters, the first parameter is an Object containing all configurations (chart and overlay-Button). The second parameter accepts a number which denotes the level being configured. The first drilldown level is 0 (zero).

Let us see how we can change the child chart we created above to a Area chart. In FusionChartsXT_DrillDown_DataString.php, write the following code after the echo renderChart(); line:

Save the file, navigate to this page, and click on one of the columns again. This is what you should see:

You can also render LinkedCharts in another container, or within a lightbox. Read more about such configurations in our documentation.

LinkedCharts Events

The FusionCharts XT JavaScript API provides a number of events when LinkedCharts are in action. Each parent chart can listen to the events and can add more functionality to the implementation. The events are as follows:

BeforeLinkedItemOpen: Fires before a child chart is created
LinkedItemOpened: Fires after a child chart is created
BeforeLinkItemClose: Fires before a child chart is closed
LinkedItemClosed: Fires after a child chart is closed

Download the source code

Next in the series

In the last part of the FusionCharts XT in PHP series, we will learn how to apply styles to our charts, export our charts, and debug our charts. Stay tuned!

Drill-down JavaScript charts in PHP and MySQL – Part 3

Hrishikesh Choudhari — Mon, 19 Mar 2012 13:40:03 +0000

In the 3rd part of FusionCharts XT in PHP series, we will create drill-down charts in PHP using data from a MySQL database. Drill-down charts are immensely useful when you want to plot the subset of an aggregate data set. A generic use case can be world-wide sales data >> by country >> by state >> by city. FusionCharts XT supports unlimited levels of drill-down, and the chart types and chart attributes can be configured for each level. To create drill-down charts in PHP, we will use the PHP script that is bundled with the FusionCharts Suite. This script automatically generates the HTML, JavaScript and XML required to plot your charts, so that you don’t need to.

FusionCharts XT in PHP Series
Part 1 – JavaScript charts in PHP using FusionCharts XT
Part 2 – JavaScript charts in PHP and MySQL using FusionCharts XT
Part 3 – Drill-down JavaScript charts in PHP and MySQL
Part 4 – JavaScript LinkedCharts in PHP and MySQL
Part 5 – Using Debugging Tools for JavaScript Charts

What we are going to visualize

In the 2nd part, we created a chart showing the Top 10 Most Populous Countries in the World. We will add drill-down functionality to it, such that upon clicking on one of the countries, it will show us the Top 10 Most Populous Cities of that particular country.

What we will need

PHP running on any server
MySQL
The latest version of FusionCharts XT
The sample World database provided by MySQL. Read more to understand the structure of this database and how to set it up.
The source code for the 2nd part of the series

Our installation process will be the same as we did in the previous article. You may use the same setup or create it as follows:

Within the root directory of your web server, create a folder named FusionCharts_XT_with_PHP. This will be our demo folder.
Copy the entire Charts folder from the FusionCharts XT Download Package and paste it within our demo folder. This completes the installation of FusionCharts XT in our web application.
Copy the Includes folder from FusionCharts XT Download Package > Code > PHP > Includes to our demo folder.
Copy the source files used in the previous article and paste them in our demo folder

Attributes of a Drill-down chart

To create a drill-down chart, you will require the following 3 things:

A parent chart (which we already have)
The link attribute added to the dataplots of the parent chart (see below how to add this attribute)
The child chart (we need to create this)

To create a dataplot (be it column, pie or line/area anchor) in XML, you would have to specify the label and the value attributes for the set element.

label='China' value='1277558000' />

Now to add drill-down to that dataplot, you will have to specify the link attribute.

label='China' value='1277558000' link='DrillDown_Child_Chart.php?country=China'/>

With the above XML, the dataplot, when clicked, will go to the page DrillDown_Child_Chart.php?country=China, which contains another chart to show some other data.

In FusionChartsXT_with_PHP_and_MySQL_DataString.php, edit the part where you create the dataplots as below:

$strXML .= "]."' value='".$ors['Population']."' link='DrillDown_Child_Chart.php?country=".$ors['Country']."' />";

Now that we have the first 2 things required for a drill-down chart, let us create the page that will show the child chart. This child chart needs to show a specific subset of the aggregate data; data related only to the parent dataplot.

Create a blank PHP file named DrillDown_Child_Chart.php in our demo folder and write the following code in it:

// Include the DBConn.php and FusionCharts.php files, so that we can access their variables and functions.
include('Includes/DBConn.php');
include('Includes/FusionCharts.php');

// Retrieve the name of the country from the $_REQUEST parameter
$countryName = $_REQUEST['country'];

// Use the connectToDB() function provided in DBConn.php, and establish the connection between PHP and the World database in our MySQL setup.
$link = connectToDB();

// Form the SQL query which will return the Top 10 Most Populous Cities according to the specified Country.
$strQuery = 'SELECT city.Name AS City, city.Population AS Population FROM city WHERE city.CountryCode = (SELECT country.Code FROM country WHERE country.Name = "'.$countryName.'") ORDER BY Population DESC LIMIT 10';

// Execute the query, or else return the error message.
$result = mysql_query($strQuery) or die(mysql_error());

// If we get a valid response -
if ($result) {

// Create the chart's XML string. We can add attributes here to customize our chart.
$strXML = "";

while($ors = mysql_fetch_array($result)) {
// Append the names of the cities and their respective populations to the chart's XML string.
$strXML .= "]."' value='".$ors['Population']."' />";
}
}
// Close the chart's XML string.
$strXML .= "";
?>

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

FusionCharts XT with PHP and MySQL

// Set the rendering mode to JavaScript
FC_SetRenderer('javascript');

// Call the renderChart method, which would return the HTML and JavaScript required to generate the chart
echo renderChart('Charts/Column2D.swf', // Path to chart type
'', // Empty string when using Data String method
$strXML,// Variable which has the chart data
'top10_most_populous_cities', // Unique chart ID
'660', '400', // Width and height in pixels
false, // Disable debug mode
true // Enable 'Register with JavaScript' (Recommended)
);
?>

Save this file. Navigate to parent chart first. On clicking one of the columns, it would load a new page with the child chart showing the relevant data.

Customizing the Drill-down chart

In FusionCharts XT, you can define the following types of links:

Links that open in the same tab
Links that open in a new tab
Links that open in a specified frame
Links that open in a new pop-up window
Links that invoke JavaScript functions
Use the whole chart as a hotspot to use the simple link types named above

You can read more about customizing drill-down charts in our documentation.

Another good read is our previous blog post where we talk about making your drill-down charts more intuitive.

Download source files for these samples

Next in the series

In the next part of this series, we are going to tackle LinkedCharts. It is a first-of-its-type concept using which you can create unlimited levels of drill-down charts. You may read more about LinkedCharts in our documentation.

JavaScript charts in PHP and MySQL with FusionCharts XT – Part 2

Hrishikesh Choudhari — Fri, 16 Mar 2012 18:02:54 +0000

This the second part of the FusionCharts XT with PHP series. We will create interactive JavaScript charts using data from a MySQL database with FusionCharts XT. We will make use of the PHP library that is bundled with the FusionCharts Suite.

To recap from the first article in this series, FusionCharts XT is essentially a JavaScript charting library, which renders highly interactive charts in the browser. It takes data in either XML or JSON. To plot a chart using PHP, you need to include the HTML and JavaScript code to embed a chart object and then provide the requisite parameters. To make things simpler for you, we have put all this functionality in a PHP script named FusionCharts.php. This script is bundled in FusionCharts XT Download Package > Code > PHP > Includes > FusionCharts.php. So, whenever you need to work with FusionCharts XT in PHP, just include this file in your page and you’re good to go.

FusionCharts XT in PHP Series
Part 1 – JavaScript charts in PHP using FusionCharts XT
Part 2 – JavaScript charts in PHP and MySQL using FusionCharts XT
Part 3 – Drill-down JavaScript charts in PHP and MySQL
Part 4 – JavaScript LinkedCharts in PHP and MySQL
Part 5 – Using Debugging Tools for JavaScript Charts

What we are going to visualize

We will make use of the sample World database provided by MySQL and plot the Top 10 Most Populous Countries.

What we will need

PHP running on any server
MySQL
The latest version of FusionCharts XT
The sample World database provided by MySQL. Read more to understand the structure of this database and how to set it up.

Our installation process will be the same as we did in the previous article. You may use the same setup or create it as follows:

Within the root directory of your web server, create a folder named FusionCharts_XT_with_PHP. This will be our demo folder.
Copy the entire Charts folder from the FusionCharts XT Download Package and paste it within our demo folder. This completes the installation of FusionCharts XT in our web application.
Copy the Includes folder from FusionCharts XT Download Package > Code > PHP > Includes to our demo folder.

Connecting to the MySQL database

In the Includes folder, we provide you with DBConn.php, which you can use to connect with your database. You may use this file to authenticate with your database if you aren’t using any other method. You would have to provide the relevant values to connect to your database. For instance, on our demo computer, we have the following values:

// These four parameters must be changed dependent on your MySQL settings
$hostdb = 'localhost'; // MySQl host
$userdb = 'root'; // MySQL username
$passdb = ''; // MySQL password
$namedb = $dbName ? $dbName : 'world'; // MySQL database name

There are two ways using which you can provide data to the PHP library – Data URL and Data String. Let us use both of them in detail.

Creating the chart using the Data URL method

In the Data URL method, you instruct FusionCharts to load XML or JSON data from a URL. This URL could refer to a static XML file that is already present on the server, or it could refer to a virtual data provider e.g., /path_to/DataProvider.php, which executes queries the database, builds the XML data as string and finally outputs this XML string to the output stream with content type set to text/xml, but without any HTML tags. We then need to create a second file, which would receive this XML string, pass it on to FusionCharts.php, and then render the chart.

Let us create the first file named FusionChartsXT_with_PHP_and_MySQL_using_DataURL_DataProvider.php. Write the following code in this file:

// Set the content type in the header to text/xml.
header('Content-type: text/xml');

// Include DBConn.php
include('Includes/DBConn.php');

// Use the connectToDB() function provided in DBConn.php, and establish the connection between PHP and the World database in our MySQL setup.
$link = connectToDB();

// Form the SQL query which will return the Top 10 Most Populous Countries.
$strQuery = 'SELECT Name AS Country, Population FROM country ORDER BY Population DESC LIMIT 10';

// Execute the query, or else return the error message.
$result = mysql_query($strQuery) or die(mysql_error());

// If we get a valid response -
if ($result) {

// Create the chart's XML string. We can add attributes here to customize our chart.
$strXML = "";

while($ors = mysql_fetch_array($result)) {
// Append the names of the countries and their respective populations to the chart's XML string.
$strXML .= "]."' value='".$ors['Population']."' />";
}
}
// Close the chart's XML string.
$strXML .= "";

// Return the valid XML string.
echo $strXML;
?>

Save this file and navigate to it using your web browser. You should see the following XML displayed:

caption="Top 10 Most Populous Countries" showValues="0" useRoundEdges="1" palette="3">
label="China" value="1277558000" />
label="India" value="1013662000" />
label="United States" value="278357000" />
label="Indonesia" value="212107000" />
label="Brazil" value="170115000" />
label="Pakistan" value="156483000" />
label="Russian Federation" value="146934000" />
label="Bangladesh" value="129155000" />
label="Japan" value="126714000" />
label="Nigeria" value="111506000" />
>

We now need to pass this XML data to FusionCharts.php, which will generate the required HTML and JavaScript code to display our chart. Let us create a PHP file FusionChartsXT_with_PHP_and_MySQL_using_DataURL.php. In this file, write the following code:

// It would generate the HTML and JavaScript code required to render the chart.
include('Includes/FusionCharts.php');
?>

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

FusionCharts XT with PHP and MySQL

// Set the rendering mode to JavaScript
FC_SetRenderer('javascript');

// Call the renderChart method, which would return the HTML and JavaScript required to generate the chart
echo renderChart('FusionCharts/Column2D.swf', // Path to chart type
'FusionChartsXT_with_PHP_and_MySQL_using_DataURL.php', // Path to the data provider
'', // Empty string when using Data URL Method
'top10_most_populous_countries', // Unique chart ID
'660', '400', // Width and height in pixels
false, // Disable debug mode
true // Enable 'Register with JavaScript' (Recommended)
);
?>

Save this file and navigate to it using your web browser. This is the JavaScript chart that you should get to see:

Creating the chart using Data String method

In the Data String method, the XML or JSON data is embedded within a single web page, along with the chart’s HTML and JavaScript code. This method doesn’t require a static data file or a virtual data provider. Moreover, once the chart has finished loading, the data is present locally within the page.

Create a blank PHP file named FusionChartsXT_with_PHP_and_MySQL_using_DataString.php. Write the following code in this file:

// Set the rendering mode to JavaScript
FC_SetRenderer('javascript');

// Call the renderChart method, which would return the HTML and JavaScript required to generate the chart
echo renderChart('FusionCharts/Column2D.swf', // Path to chart type
'', // Empty string when using Data String method
$strXML,// Variable which has the chart data
'top10_most_populous_countries', // Unique chart ID
'660', '400', // Width and height in pixels
false, // Disable debug mode
true // Enable 'Register with JavaScript' (Recommended)
);
?>

Save this file and navigate to it using your web browser. This is the JavaScript chart that you should get to see:

Download source files for these samples

Next in the series

In this article, the chart has top 10 countries by population. In the next article, we will see how to add drill-down capability to this MySQL data. So when you click on the column showing China’s population, you will be able to drill-down to the most populous cities in China.

JavaScript charts in PHP using FusionCharts XT – Part 1

Hrishikesh Choudhari — Thu, 15 Mar 2012 14:17:16 +0000

PHP developers often build applications that work on a diverse data spectrum like sales, marketing, finance, health care or government and beyond. For the end-users of such applications to be able to make sense and take the right actions, it is necessary to represent data in the right form as dashboards or reports. Dashboards, which are an inter-connected collection of charts, gauges and grids facilitate inference, insight and actions – the most critical aspects of any enterprise.

Many charting components are available for use in your PHP apps. While most of these are server side components that generate static images of charts and gauges, without any interactivity, a few are client-side solutions that use JavaScript or Flash to generate interactive charts, gauges and grids. Enter FusionCharts Suite, the industry’s leading enterprise-grade JavaScript charting solution. For PHP developers who wouldn’t want to dabble in JavaScript, it also provides server-side libraries which enable them to create delightful charts in JavaScript. These libraries help in connecting to data sources, producing the chart data, and generating the required HTML and JavaScript code, which can be easily embedded in any web page.

An example of a JavaScript chart generated by FusionCharts XT is shown below. Interact with it by hovering over a column to see the tool-tip, or use the scrollbar below the columns to see more data points, or click on the legend key to show/hide a data-series.

To plot a chart using PHP, you need to include the HTML and JavaScript code to embed a chart object and then provide the requisite parameters. To make things simpler for you, we have put all this functionality in a PHP script named FusionCharts.php. This script is bundled in FusionCharts XT Download Package > Code > PHP > Includes > FusionCharts.php. So, whenever you need to work with FusionCharts XT in PHP, just include this file in your page and you’re good to go.

In this series of blog posts, we will show you how to build interactive JavaScript charts using FusionCharts XT in your PHP applications. We will start with the basic charts and move on to advanced examples like powering the charts using databases, adding drill-down capabilities and more. Specifically, the series will be divided into the following posts:

So let’s get started!

What we are going to visualize

The JavaScript chart shown above is specific chart type a Scroll Combination chart with dual Y axes in FusionCharts parlance. The data provided to it visualizes the Top 25 Multilingual Countries versus their population.

We will re-create this chart using the Data URL and the Data String methods. You can use any of these methods you provide data to any chart created using FusionCharts XT.

FusionCharts XT understands data in either XML or JSON. Depending upon the chart type being used, the structure of the XML or JSON will differ. We will try out both the formats in this post.

What we will need

Within the root directory of your web server, create a folder named FusionCharts_XT_with_PHP. This will be our demo folder.
Copy the entire Charts folder from the FusionCharts XT Download Package and paste it within our demo folder. This completes the installation of FusionCharts XT in our web application.
Copy the Includes folder from FusionCharts XT Download Package > Code > PHP > Includes to our demo folder.

Why use the Scroll Column chart with Dual Y Axes?

Plotting 25 columns within this blog’s width would crunch them together. So we pick the well spaced Scroll Column charts over the regular Column charts. Secondly, the chart will have values in 2 different units – number of languages spoken and the population. Plotting values of different units on the same Y axis would lead to incorrect visualization; therefore we would use the Scroll Column 2D Dual Y axes chart.

Creating a chart from static XML

In the Data URL method, you tell FusionCharts XT to load data from an XML or JSON file URL. This URL could also point to a virtual data provider, e.g., /path_to/data_provider.php, which will execute queries on the database, construct the XML data and output it to the stream, with content type set to text/xml. For this example, we will point FusionCharts XT to an XML file’s URL.

Create a blank PHP file within the demo folder and save it as FusionCharts_XT_Data_URL.php.
Include the FusionCharts.php library, and create a simple HTML page. Include FusionCharts.js in the head tag.

include('Includes/FusionCharts.php');
?>

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Using FusionCharts XT with PHP</title>
<script type="text/javascript" src="Charts/FusionCharts.js"></script>
</head>
<body>
<div id="chartContainer">
</div>
</body>
</html>

Within the chartContainer div, we will call the renderChart() method. This method generates all the HTML and JavaScript code required to create a chart. We will write this generated code within the container div. Since we want to render the chart in JavaScript, we need to specify this before rendering the chart:

FC_SetRenderer('javascript');

echo renderChart('Charts/ScrollCombiDY2D.swf', 'Most_Multilingual_Countries_VS_Their_Population.xml', '', 'using_setXMLUrl', '660', '400', false, true);
?>

Save this page, and navigate to this page using your web browser. This is the JavaScript chart that you should get to see:

The renderChart() method takes parameters in the following order:

Chart SWF name: The first parameter contains the Path and file name of the chart SWF file. We have to use the relative path to SWF file, which is recommended. When plotting charts in JavaScript, FusionCharts XT uses the SWF name to internally map to the chart’s JavaScript alias.
URL to static XML file, if Data URL method is to be used. If you intend to use Data String method, leave this as blank.
Variable containing XML data string, if Data String method is to be used. If you have specified data as a URL, leave this parameter as blank.
ID of the chart – Each chart on the page needs a unique ID. This ID is different from the ID of the container DIV. As we will learn later, this ID is used to get a reference to the chart for manipulation using advanced JavaScript.
Width and height in pixels – Each chart needs to be initialized with width and height, specified either in pixels (specified in numeric format, without appending px) or percentage. In this example, we have used pixels. You can also set it to percentage values. The FusionCharts JavaScript class will automatically convert the percentage dimensions to pixel dimensions, with respect to the parent container element in HTML, DIV in this case, and pass it to the chart.
Boolean for Debug Mode – If you’re facing any issues while developing your charts, you can initialize them in debug mode by setting this parameter to true. The debug mode gives you behind-the-scenes information on where data is loaded from, errors etc. In our example, we are rendering the chart in normal mode, by setting this parameter to false.
Boolean for Registering with JavaScript – In earlier versions of FusionCharts, the last parameter let you configure whether charts could be controlled using JavaScript. Now that FusionCharts is very tightly integrated with FusionCharts, this parameter is a mandatory true.

Creating a chart from XML string

Create a blank PHP file within the demo folder and save it as FusionCharts_XT_Data_String.php.
Include the FusionCharts.php library. We will create a string variable which will hold the XML data for our chart. Let us make use of the same XML file we used before for the Data URL method. Copy the contents of the file and paste it as the content for the string variable.

include('Includes/FusionCharts.php');

$strXML = '

label="Canada" />
label="China" />
label="India" />
label="United States" />
label="Russian Federation" />
label="Tanzania" />
label="South Africa" />
label="Congo, The Democratic Republic of the" />
label="Kenya" />
label="Mozambique" />
label="Philippines" />
label="Uganda" />
label="Nigeria" />
label="Iran" />
label="Sudan" />
label="Angola" />
label="Vietnam" />
label="Indonesia" />
label="Czech Republic" />
label="Austria" />
label="Pakistan" />
label="Myanmar" />
label="Chad" />
label="Sierra Leone" />
label="Namibia" />
</categories>
="Languages Spoken" showValues="1">
value="12" />
value="12" />
value="12" />
value="12" />
value="12" />
value="11" />
value="11" />
value="10" />
value="10" />
value="10" />
value="10" />
value="10" />
value="10" />
value="10" />
value="10" />
value="9" />
value="9" />
value="9" />
value="8" />
value="8" />
value="8" />
value="8" />
value="8" />
value="8" />
value="8" />
</dataset>
="Population" parentYAxis="S">
value="31147000" />
value="1277558000" />
value="1013662000" />
value="278357000" />
value="146934000" />
value="33517000" />
value="40377000" />
value="51654000" />
value="30080000" />
value="19680000" />
value="75967000" />
value="21778000" />
value="111506000" />
value="67702000" />
value="29490000" />
value="12878000" />
value="79832000" />
value="212107000" />
value="10278100" />
value="8091800" />
value="156483000" />
value="45611000" />
value="7651000" />
value="4854000" />
value="1726000" />
</dataset>
</chart>';
?>

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Using FusionCharts XT with PHP</title>
<script type="text/javascript" src="Charts/FusionCharts.js"></script>
</head>
<body>
<div id="chartContainer">
FC_SetRenderer('javascript');

echo renderChart('Charts/ScrollCombiDY2D.swf', '', $strXML, 'using_setXMLData', '660', '400', false, true);
</div>
</body>
</html>

Again we will call the renderChart() method within the div container. However, we will leave the second parameter blank (which takes in the path to the URL) and make use of the third parameter to provide the variable that holds the XML data.

Save this page, and navigate to this page using your web browser. You should get to see the same JavaScript chart as before:

Providing data in JSON

To provide JSON data to the chart, instead of XML, you can call the following method before the renderChart() method of the specific chart:

FC_SetDataFormat("json");

We provide a tool with which you can convert chart data from XML to JSON. You can find it in the FusionCharts Download Package > Tools > FCDataConverter. You can paste in the XML provided above and get the chart data in JSON:

{
"chart": {
"caption": "Top 25 Multilingual Countries vs Their Population",
"pyaxisname": "Languages Spoken",
"syaxisname": "Population",
"showvalues": "0",
"useroundedges": "1",
"palette": "3",
"numvisibleplot": "5",
"sformatnumberscale": "1",
"linethickness": "5",
"anchorradius": "5"
},
"categories": [
{
"category": [
{
"label": "Canada"
},
{
"label": "China"
},
{
"label": "India"
},
{
"label": "United States"
},
{
"label": "Russian Federation"
},
{
"label": "Tanzania"
},
{
"label": "South Africa"
},
{
"label": "Congo, The Democratic Republic of the"
},
{
"label": "Kenya"
},
{
"label": "Mozambique"
},
{
"label": "Philippines"
},
{
"label": "Uganda"
},
{
"label": "Nigeria"
},
{
"label": "Iran"
},
{
"label": "Sudan"
},
{
"label": "Angola"
},
{
"label": "Vietnam"
},
{
"label": "Indonesia"
},
{
"label": "Czech Republic"
},
{
"label": "Austria"
},
{
"label": "Pakistan"
},
{
"label": "Myanmar"
},
{
"label": "Chad"
},
{
"label": "Sierra Leone"
},
{
"label": "Namibia"
}
]
}
],
"dataset": [
{
"seriesname": "Languages Spoken",
"showvalues": "1",
"data": [
{
"value": "12"
},
{
"value": "12"
},
{
"value": "12"
},
{
"value": "12"
},
{
"value": "12"
},
{
"value": "11"
},
{
"value": "11"
},
{
"value": "10"
},
{
"value": "10"
},
{
"value": "10"
},
{
"value": "10"
},
{
"value": "10"
},
{
"value": "10"
},
{
"value": "10"
},
{
"value": "10"
},
{
"value": "9"
},
{
"value": "9"
},
{
"value": "9"
},
{
"value": "8"
},
{
"value": "8"
},
{
"value": "8"
},
{
"value": "8"
},
{
"value": "8"
},
{
"value": "8"
},
{
"value": "8"
}
]
},
{
"seriesname": "Population",
"parentyaxis": "S",
"data": [
{
"value": "31147000"
},
{
"value": "1277558000"
},
{
"value": "1013662000"
},
{
"value": "278357000"
},
{
"value": "146934000"
},
{
"value": "33517000"
},
{
"value": "40377000"
},
{
"value": "51654000"
},
{
"value": "30080000"
},
{
"value": "19680000"
},
{
"value": "75967000"
},
{
"value": "21778000"
},
{
"value": "111506000"
},
{
"value": "67702000"
},
{
"value": "29490000"
},
{
"value": "12878000"
},
{
"value": "79832000"
},
{
"value": "212107000"
},
{
"value": "10278100"
},
{
"value": "8091800"
},
{
"value": "156483000"
},
{
"value": "45611000"
},
{
"value": "7651000"
},
{
"value": "4854000"
},
{
"value": "1726000"
}
]
}
]
}

If you change the chart’s data format to JSON and provide this JSON data, you would get the same chart as before. JSON can be provided using the Data URL and Data String method too, just like XML.

Download the source files for this demo

Next article in this series: Create a chart using data from a database

In the next article, we will create a chart using data from a database. If, however, you’re feeling impatient, you can head over to our documentation and read on how to use FusionCharts XT to create charts using data from a database. Stay tuned.

Create charts for iPhone and iPad apps using FusionCharts XT

Hrishikesh Choudhari — Wed, 29 Feb 2012 05:58:12 +0000

To provide executives with access to business data on the go, enterprises are adopting iPhones and iPads in droves. Many of these applications have need for smart data visualizations, but are currently restricted by the limited capabilities of available charting libraries for iOS. Some have limited chart types, whereas others lack the visual appeal and interactivity. Open source libraries are not backed by proper technical support either. So what are your options?

Enter FusionCharts XT, which addresses all these concerns. Being a JavaScript charting library, it can easily render charts and widgets within the UIWebView control of an iOS application. With over 90 chart types that are animated and interactive, it augments the visual appeal and functionality of your iOS applications. In addition, dedicated tech support is there to answer any or all of your queries.

You can either obtain the data from a remote web service, or access the local data stores on the device. This data needs to be provided in XML or JSON format that the FusionCharts JavaScript object understands. In this blog post, we will show you how to use FusionCharts XT in an iOS app and power it using data from a web service. We will create the necessary XML and HTML required for the UIWebView to display our chart.

Example – An iOS app to plot Twitter data using FusionCharts XT

We will be plotting the count of mentions of ‘HTML5′ for each of the last 7 days in a UIWebView control using FusionCharts XT. This is how your chart will finally look like in an iPhone:

Requirements

Xcode 3.2 and above
The latest version of FusionCharts XT
JSONKit library
You would need to have internet access too. We will be using the searchhistogram query from the Topsy API. The exact query is http://otter.topsy.com/searchhistogram.json?q=html5&slice=86400&period=7. You may run this query and see the JSON response, which returns the number of times ‘HTML5′ was mentioned everyday for the last 7 days.

How we will create the chart

To create the chart, we will go through the following steps:

Create a View-based project in Xcode
Use Topsy’s Otter API to get the count of mentions of ‘HTML5′ over the last 7 days
Use JSONKit to parse through the received JSON response
Create the XML data for the chart
Create the HTML required to show the chart
Enable rotation of the chart according to the device’s orientation, so that the chart will fit the screen whether the device is in landscape or portrait mode

Creating the Xcode project

Let us open Xcode and create a View-based project, and save it as FusionChartsXTiOSDemo.

We now need to add FusionCharts XT’s JavaScript files to our project. Copy the JavaScript files present in Download Package > Charts to the Xcode Resources project group. Make sure you select the Copy items into destination group’s folder (if needed) checkbox on the top. Doing so would ensure that you have a copy of all the JavaScript files local to your application. Click Add to add your files to your project.

We need to modify Xcode’s compilation step a little bit. Xcode considers JavaScript files as code (rightfully so) and tries to compile them. However, we want these files to render charts inside our UIWebView and not compiled. Expand the Targets group and your project target. Our target is called FusionChartsXTiOSDemo. Also expand the Copy Bundle Resources and Compile Sources build phases. Select all the JavaScript filesand drag them from the compile stage to the copy bundle build phase.

Add the JSONKit files, namely JSONKit.h and JSONKit.m to your project too. We have now prepared Xcode with all the files necessary. Let us begin designing and coding!

Designing and coding

In FusionChartsXTiOSDemo.h, add an IBOutlet for the WebView.
@property (nonatomic, retain) IBOutlet UIWebView *webView;

Also @synthesize, and release this accordingly.

Open your project’s main view controller Interface Builder file (inside the Resources group). For our project this file is called FusionChartsXTiOSDemoViewController.xib. To add a WebView control to your app, drag a UIWebView from Interface Builder’s library to our view.

We now need to connect the UIWebView outlet to this UIWebView. From the Document Window in Interface Builder, Ctrl+Drag from File’s Owner to the UIWebView. You should get a popup bubble, click webView . Save your work and close Interface Builder.

Next, we will add the required properties needed to create the chart data and its configuration. We will write the following code in FusionChartsXTiOSDemo.h:

// Chart properties.
@property (nonatomic, retain) NSMutableString *htmlContent;
@property (nonatomic, retain) NSMutableString *javascriptPath;
@property (nonatomic, retain) NSMutableString *chartData;
@property (nonatomic, retain) NSMutableString *chartType;
@property (nonatomic, assign) UIInterfaceOrientation currentOrientation;
@property (nonatomic, assign) CGFloat chartWidth;
@property (nonatomic, assign) CGFloat chartHeight;
@property (nonatomic, retain) NSMutableString *debugMode;
@property (nonatomic, retain) NSMutableString *registerWithJavaScript;

Let us also add the properties we require to perform the HTTP request and to handle the response data:

// Twitter data.
@property (nonatomic, retain) NSMutableString *twitterQuery;
@property (nonatomic, retain) NSMutableData *twitterData;
@property (nonatomic, retain) NSDictionary *twitterDataDictionary;
@property (nonatomic, assign) BOOL twitterDataError;

Remember to @synthesize and release the above properties correctly.

Declare the following 4 methods here; we will define them later.

- (void)displayDataError;
- (void)createChartData:(UIInterfaceOrientation)interfaceOrientation;
- (void)plotChart;
- (void)removeChart;

As a best practice, let us keep our first task to handle any error that might crop up because of connectivity issues. For this, we need define the displayDataError method. We need to create the HTML that displays the error in plain English to the user in his WebView.

- (void)displayDataError
{
NSMutableString *displayErrorHTML = [NSMutableString stringWithString:@""];
[displayErrorHTML appendString:@"Chart Error"];
[displayErrorHTML appendString:@""];
[displayErrorHTML appendString:@"
Unable to plot chart.
Error receiving data from Twitter.
"];
[displayErrorHTML appendString:@""];
[self.webView loadHTMLString:displayErrorHTML baseURL:nil];
}

We have created the HTML content to be shown in the WebView in case of a network error, or in case the Topsy API is unable to respond. For testing this method, we could simulate a network error either by unplugging the LAN cable or turning off the WiFi. When you’ve done either of these, run the project, and this is the error that you should see:

After this, let us concern ourselves with the HTTP query and handling it’s JSON response.

Uncomment the viewDidLoad method, and create and execute the query to Topsy’s API:

// Setting up the Twitter query.
self.twitterQuery = [NSMutableString stringWithFormat:@"%@", @"http://otter.topsy.com/searchhistogram.json?q=html5&slice=86400&period=7"];
NSURLRequest *request = [NSURLRequest requestWithURL:[NSURL URLWithString:self.twitterQuery]];
NSURLConnection *connection = [[NSURLConnection alloc] initWithRequest:request delegate:self];
// Check whether we have a valid connection.
if (connection) {
// Create the NSMutableData to hold the received data.
self.twitterData = [NSMutableData data];
} else {
// Error in receiving data.
self.twitterDataError = YES;
}
// Done using the connection.
[connection release];

Now that we have made the connection, we need to prepare the 4 delegates of NSURLConnection.

We should reset all previous data each time we receive a message at connection:didReceiveResponse.

- (void)connection:(NSURLConnection *)connection didReceiveResponse:(NSURLResponse *)response
{
// This method is called when the server has determined that it
// has enough information to create the NSURLResponse.
// It can be called multiple times, for example in the case of a
// redirect, so each time we reset the data.
// (Re)Initialize the Twitter data store.
[self.twitterData setLength:0];
}

Let us implement the delegate that stores the newly sent data.

- (void)connection:(NSURLConnection *)connection didReceiveData:(NSData *)data
{
// Store received data.
[self.twitterData appendData:data];
}

If NSURLConnection returns an error while loading the data, let us explain it in plain English to the user using our own method displayDataError.

- (void)connection:(NSURLConnection *)connection didFailWithError:(NSError *)error
{
// Display an error on connection failure.
[self displayDataError];
}

Finally, using JSONKit, let us convert the data stored in self.twitterData to a dictionary. Once the data has been converted, we call the createChartData::(UIInterfaceOrientation)interfaceOrientation method.

- (void)connectionDidFinishLoading:(NSURLConnection *)connection
{
// Convert received JSON data to an Objective-C dictionary.
self.twitterDataDictionary = [self.twitterData objectFromJSONData];
// Create chart as per current orientation.
self.currentOrientation = self.interfaceOrientation;
[self createChartData:self.currentOrientation];
}

In the createChartData::(UIInterfaceOrientation)interfaceOrientation method, we need to parse through the dictionary and form our XML. Note that the dictionary has two keys named request and response. Within response, there is an array named histogram, which holds the count of mentions of ‘HTML5′ for the last 7 days. We need to get hold of this array in NSArray.

- (void)createChartData:(UIInterfaceOrientation)interfaceOrientation
{
// Check whether we have valid data.
if (self.twitterDataError) {
[self displayDataError];
} else {
// Valid data.
self.chartWidth = 300;
self.chartHeight = 440;
// Setup chart XML.
NSDictionary *responseData = [self.twitterDataDictionary objectForKey:@"response"];
NSArray *histogramData = [responseData objectForKey:@"histogram"];

We continue the same code block to iterate through histogramData and form the chart data in XML. Since the numbers in the array are for the previous 7 days, starting from yesterday, we need to calculate and format the date accordingly.

self.chartData = [NSMutableString string];
[self.chartData appendFormat:@""];
NSDateFormatter *dateFormatter = [[NSDateFormatter alloc] init];
[dateFormatter setDateStyle:NSDateFormatterShortStyle];
for (int i = 0; i < [histogramData count]; i++) {
[self.chartData appendFormat:@"", [dateFormatter stringFromDate:[NSDate dateWithTimeIntervalSinceNow:-(i+1)*86400]], [histogramData objectAtIndex:i]];
}
[self.chartData appendFormat:@""];
[dateFormatter release];

In the same code block, we create the HTML required to show the chart. Note the path of FusionCharts.js in the <script> tag. We will provide the base URL when we actually load the HTML in the WebView.

// Setup chart HTML.
self.htmlContent = [NSMutableString stringWithFormat:@"%@", @""];
[self.htmlContent appendString:@""];
[self.htmlContent appendString:@"
Chart will render here.
"];
[self.htmlContent appendString:@""];

Finally, we send the plotChart message to self.

// Draw the actual chart.
[self plotChart];
}
}

Thereafter, we will define the plotChart method. In this method we will provide the baseURL, and load the HTML string we created.

- (void)plotChart
{
NSURL *baseURL = [NSURL fileURLWithPath:[NSString stringWithFormat:@"%@", [[NSBundle mainBundle] bundlePath]]];
[self.webView loadHTMLString:self.htmlContent baseURL:baseURL];
}

Run this project in the iPhone Simulator, you would get the following chart:

Making FusionCharts aware of the orientation

However, our work here is not done yet. We still need to add orientation support to this project.

Let us override the default value to allow autorotation according to the orientation.

// Override to allow orientations other than the default portrait orientation.
- (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation {
// Return YES since we support all orientations.
return YES;
}

We need to dispose of the chart before we render it again according to the new orientation. To do this, we can can empty chart_container of all the HTML. Let us write the removeChart method to do this.

- (void)removeChart
{
NSString *emptyChartContainer = [NSString stringWithString:@""];
[self.webView stringByEvaluatingJavaScriptFromString:emptyChartContainer];
}

Next, we need to know exactly when the device begins to rotate. For this, we have the )willRotateToInterfaceOrientation:(UIInterfaceOrientation)toInterfaceOrientation duration:(NSTimeInterval)duration class method. In this method, we will first check if the data is valid; so that an error message will be displayed even upon rotation. Next, we store the orientation to which the device is rotating to. Then we remove the chart and render it again according to the new orientation.

// Handle interface rotation.
- (void)willRotateToInterfaceOrientation:(UIInterfaceOrientation)toInterfaceOrientation duration:(NSTimeInterval)duration
{
// Check whether we have valid data.
if (self.twitterDataError) {
[self displayDataError];
} else {
// Valid data.
// Store new orientation.
self.currentOrientation = toInterfaceOrientation;
// Remove existing chart and recreating it
// as per the new orientation.
[self removeChart];
[self createChartData:self.currentOrientation];
}
}

In the createChart method, we need to supply the new chart dimensions to the FusionCharts object according to the orientation. So let us add the following code just before the block where we create the chart XML:

// Set chart width and height depending on the screen's orientation.
if (interfaceOrientation == UIInterfaceOrientationPortrait || interfaceOrientation == UIInterfaceOrientationPortraitUpsideDown) {
self.chartWidth = 300;
self.chartHeight = 440;
} else if (interfaceOrientation == UIInterfaceOrientationLandscapeLeft || interfaceOrientation == UIInterfaceOrientationLandscapeRight) {
self.chartWidth = 440;
self.chartHeight = 280;
}

Let us now run this project. Rotate your iPhone Simulator by ⌘+Left Arrow or ⌘+Right Arrow.

Download sample project

The sample project that we created is available for download. We used Xcode 3.2 and the target was iOS 4.2.

Taking it further

You can expand on this project by using the other chart types provided by FusionCharts. You can interface with a database on the backend, and provide a UI to create the SQL queries in the WebView itself. You could make use of the Spark Line charts provided in FusionWidgets XT and create a dashboard for your iPhone and iPad users. Drill-down charts are also super easy to create. The field is open for experimentation. Do share your implementations with us.

Generate chart images on the server using FusionCharts

Hrishikesh Choudhari — Fri, 03 Feb 2012 10:38:03 +0000

FusionCharts helps you make kick-ass dashboards that can be viewed on a PC, Mac, iPad, iPhone or a majority of mobile devices. To view these dashboards, you open your favorite browser, go to the URL of the dashboard either by typing in or clicking through, the browser loads the content and FusionCharts, and you finally get to see your interactive dashboards. It all works fine! But, what if your management asks you to deliver the dashboard through email at the end of each day, so that they do not have to remember to visit the dashboard?

While you try and explain them that they’ll lose all the interactivity in the dashboard like drill-down, slicing and tool-tips, which they’re used to in the web version, they still want to be able to see elements like tables and charts in their email. This lands you into another problem. While tables and other HTML elements can be easily rendered in an email, the charts in that are rendered through JavaScript in a browser would not render in an email client, owing to security reasons. So, the only option you have is to convert these charts to images, server-side, before the email is composed. In this post, we will explore how to achieve this using a community plugin – FCImg.

What is FCImg?

FCImg is a free PHP library that allows you to generate PNG and JPEG images of your charts on the server, without even rendering the chart in a browser. It renders the JavaScript version of FusionCharts at the server and and then internally uses the open-source wkhtmltoimage shell utility to convert the charts to images. See live generation of chart images at FCimg gallery.

The chart images generated by FCImg could be used in the following scenarios:

When you need to email dashboards or reports containing FusionCharts
When you need to build PDFs of reports or dashboards and embed FusionCharts
When you need to render images of charts on devices that do not support both Flash or JavaScript

Setting up FCImg

To get FCImg for your server, choose the right variant from the list below:

Windows (32 Bit & 64 Bit) [8.9 MB] [ZIP]
Linux (32 Bit) [10 MB] [tar.gz]
Linux (64 Bit) [10 MB] [tar.gz]

The system requirements to run FCImg are:

Linux or Windows operating systems. Shared hosts are also supported. safe_mode should not be enabled. (Note that safe_mode is deprecated and disabling it is highly recommended. Most hosts disable safe_mode by default).
PHP 5.2 or above.

After downloading the appropriate variant, extract the package to a path on your server that is accessible by your PHP Scripts. You will find that there is only one folder – fcimg. Inside this folder, you will find a /bin sub-folder, fcimg.php and template.txt. Next, you will need to set the right permission for the /bin folder contained within this folder. On Linux systems, the contents of /bin needs to be executable. If you downloaded and extract the files directly on the server, the file permissions are already set. However, if you transferred the files using FTP, then you need to set the permissions manually using this command from the directory where you extracted fcimg:

chmod +x fcimg/bin/*

Using FCImg

Using FCImg is fairly simple. You include the fcimg.php file and invoke fusioncharts_to_image function with a bunch of parameters, as listed and explained below.

require "fcimg/fcimg.php";
fusioncharts_to_image (
"/var/www/report.png", // Full path to output image, including name.
"Column3D.swf", // SWF Alias of chart. Note: SWF File is NOT required.
// It's just a pointer to which chart type to render.
$inputString, // The input XML data string for the chart
400, 500, // Height and width of the chart
array( // Additional options for conversion
'imageType' => 'jpg', // Setting image type as JPG
'quality' => 75 // Increase output quality
)
);

The fusioncharts_to_image method takes the following arguments, listed in order:

outputFilePath: The full path to the output image. If this file already exists, it will be overwritten.
swfName: The FusionCharts SWF filename which will be used to determine which type of chart to render.
inputString: The Data String in XML or JSON format. Note that the converter will automatically determine whether the input is XML or JSON.
height: The height of the chart in pixels.
width: The width of the chart in pixels.
options: This is an array to configure optional parameters. This is treated as a key-value set.
- $options["imageType"]: Specifies the type of the image (png/jpg). Default: png.
- $options["quality"]: The Image quality (0-100). Note that a higher quality might take longer to render. Default: 70.

When you now run this script on your server, you will find the output chart image file report.png under /var/www folder of your server.

What happened behind the scenes?

When this script executed, the following actions happened behind the scenes:

FCImg created a HTML file, which included the FusionCharts XT JavaScript files (the evaluation version is stored in template.txt), and the data in XML or JSON. If you opened this file in a regular browser, you would see this chart.
It created a virtual Webkit browser and opened the generated HTML file inside that browser.
It waited 1500 milliseconds for the animations to complete.
It captured the image on this virtual Webkit browser, converted that into image using wkhtmltoimage, and saved it at the path provided.

FCImg takes a couple of seconds to export a single chart on a basic server. This delay is intended because the default animations of FusionCharts take up to 1.5 seconds to complete on certain charts. The fusioncharts_to_image function is a blocking call. It means that the PHP script will not continue until the rendering process is complete (unlike event based callback systems). It is best to call this method in PHP scripts that run on the server directly and do not serve output to browsers e.g., in a script that generates emailed reports, or a script that is executed through a cron-job.

Changing the FusionCharts JavaScript library used in FCImg

By default, FCImg ships with an evaluation copy of FusionCharts JavaScript version, which is not the latest as well. To update to the latest, or even point to your licensed copy of FusionCharts JavaScript, you will need to do the following changes:

Remove the contents of template.txt found in the fcimg directory
Add all the code from jquery.min.js to template.txt
Add all the code from FusionCharts.js to template.txt
Add all the code from FusionCharts.HC.js to template.txt
Add all the code from FusionCharts.HC.Charts.js to template.txt

Note that the order of files added is important.

Getting on with it

Do give FCImg a spin. It’s useful. It’s free. And if you encounter some painful situations, give a shout to the developer at contact@fcimg.org. It will help if you include details like the XML/JSON data.

Export your charts as images or PDFs

FusionBrew - The official FusionCharts blog

How boring charts in Microsoft Excel and a craving for pocket money gave birth to FusionCharts

JavaScript charts using SQL Server data with FusionCharts XT – Part 2

FusionCharts XT with ASP.NET

What we are going to visualize

.NET library bundled with FusionCharts XT

What we will need

Preparing the project

Creating charts using Data String method

Creating charts using Data URL method

Download Source Project

Next in the series: Creating Drill-down JavaScript charts with ASP.NET(C#)

Related posts:

JavaScript charts with ASP.NET (C#) using FusionCharts XT – Part 1

FusionCharts XT with ASP.NET

What we are going to visualize

.NET library bundled with FusionCharts XT

What we will need

Preparing the project

Creating a JavaScript chart using Data URL method

Understanding the RenderChart() method

Creating a JavaScript chart using Data String method

Providing chart data in JSON

Download the project source

Next article in this series: Create a chart using data from SQL Server

Related posts:

Debugging JavaScript charts with FusionCharts XT – Part 5

FusionCharts XT in PHP Series

Understanding Debug Messages

FusionCharts XT JavaScript Debug Mode

Using Advanced Error and Warning Events

Concluding the series

JavaScript LinkedCharts in PHP and MySQL using FusionCharts XT – Part 4

FusionCharts XT in PHP Series

What we are going to visualize

What we will need

Attributes of LinkedCharts

LinkedCharts using Data URL

LinkedCharts using Data String

Data URL or Data String?

Creating LinkedCharts using Data URL method

Creating LinkedCharts using Data String method

Configuring LinkedCharts

LinkedCharts Events

Download the source code

Next in the series

Related posts:

Drill-down JavaScript charts in PHP and MySQL – Part 3

FusionCharts XT in PHP Series

What we are going to visualize

What we will need

Attributes of a Drill-down chart

Customizing the Drill-down chart

Download source files for these samples

Next in the series

Related posts:

JavaScript charts in PHP and MySQL with FusionCharts XT – Part 2

FusionCharts XT in PHP Series

What we are going to visualize

What we will need

Connecting to the MySQL database

Creating the chart using the Data URL method

Creating the chart using Data String method

Download source files for these samples

Next in the series

Related posts:

JavaScript charts in PHP using FusionCharts XT – Part 1

What we are going to visualize

What we will need

Why use the Scroll Column chart with Dual Y Axes?

Creating a chart from static XML

Creating a chart from XML string

Providing data in JSON

Download the source files for this demo

Next article in this series: Create a chart using data from a database

Related posts:

Create charts for iPhone and iPad apps using FusionCharts XT

Example – An iOS app to plot Twitter data using FusionCharts XT

Requirements

How we will create the chart