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.

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.

Last quarter, we released FusionCharts XT with enhanced JavaScript charts to bring a delightful and homogeneous charting experience across PCs, Macs, iOS and Android devices. Continuing our quest to bring rich visualizations to users across platforms and devices, we now present to you FusionWidgets XT.

All the gauges, funnel and pyramid charts, sparklines and bullet graphs that you have been relishing till now in Flash are now available for your use in JavaScript, enabling you to build dashboards that now work seamlessly on iPads and iPhones as well.

Funnel, Pyramid, Column Charts and Cylinder Gauge used in a KPI Dashboard

The best of both worlds

The JavaScript version of the widgets are similar to the ones in Flash, both functionally and visually. On top of that, the long awaited capabilities like dynamic resize of gauges, support for JSON data, powerful JavaScript API and enhanced options for background images have been added as part of the new XT framework of FusionCharts Suite.

Like the Flash version, the gauges support real-time update that allow them to fetch new data from server automatically at pre-configured intervals. This is useful in monitoring applications where you need to show latest values without refreshing the page.

Click on the gauge to see it in action

Click on the gauge to see it in action

The bullet graphs, used for creating compact executive dashboards, also have a JavaScript avatar now.

Compact Executive Dashboard

Spark charts, compact forms of line and column charts, work great when you need to display a lot of charts in a page that has limited space.

Compact dashboard with Spark Column Charts

Know more about the new features of XT framework here, or see them in action here.

Get your copy of FusionWidgets XT trial from our download center here. Or, if you are an existing FusionCharts customer and have an active Support & Upgrade Subscription, you can download the free upgrade here.

We are just back from the NASSCOM Product Conclave and the whole two days have been a lot of fun. Meeting up with customers, showcasing our product and getting a round of “wow” every time, and just enjoying the high energy level with young and upcoming entrepreneurs made the whole experience even more fun.

As we promised, our booth at the expo turned out to be really refreshing. So much so that a couple of people asked us if we were into gaming! Here are a few pictures to help you get a glimpse of what I mean…

Even as we started, we made it a point to go the extra mile and make our booth look as stunning as our product. The “Chart Forest” theme was refreshing, and we decided to put the dude up front and center.

We had two plain-vanilla booths this year...

...that we turned into a visually delightful experience.

The result? Everybody loved our booth. Enterprises, entrepreneurs and students alike…

Our booth got a lot of raves... (In picture: Pallav Nadhani, CEO at FusionCharts, with Vivek Wadhwa, Tech Entrepreneur and Academic at the FusionCharts booth)

The response was just awesome. (A couple of young entrepreneurs delighted with our demo)

Check out our Facebook page to get the whole story and more pictures.

We are exhibiting at the NASSCOM Product Conclave 2011, Bangalore on 9th and 10th November. If you are there, do drop by at our booths. We would love to talk to you and showcase some of the cool stuff that we have been working on, like FusionCharts for SharePoint that lets you create stunning dashboards in SharePoint without writing a single line of code, in under 15 minutes.

We will be also be showcasing FusionCharts Suite with a focus on FusionCharts XT, which is now JavaScript (HTML5) ready . You can experience all the charts on Macs, PCs, iPads and other devices. Plus we will be sharing tips and tricks to make the dashboards and reports in your applications more stunning and power-packed.

Our CEO also has a couple of speaking sessions on product idea validation and differentiation strategy. If you are an Indian startup in the early stages of creating refreshing products, we have a few free licenses for you.

As always, our booth will be colorful and unique. If you are looking to build stunning products, or would like to get to know the team and see what we have been up to, do meet us at the NASSCOM Product Conclave. And let’s celebrate with a cookie!

9th Birthday Easter Egg

Noticed the little dude in the picture? In so many ways he is what FusionCharts is. Peek below to know him better!

The Doer

The Thinker

The Master Chef

Our Personal Superhero

But our dude is currently nameless, and the way we’ve come to love him we can’t let that continue, can we? ‘Dude’ is good but then it isn’t nice calling a fellow being just ‘Dude’, right?

We tried Bubu- the awesomest guy on the internet, but he didn’t like the sound of it. We then tried Chikna, you know, the looker dude appeal, but got some blank stares when we passed it around. No one liked it.

And now we’ve ended up with as little hair as him, scratching our heads for the right nick. Care to help us save what’s left of our hairline? All you got to do is head over to our Facebook page and suggest or vote on some options.

Oh, and since it’s serious business with us we ‘re also giving away some really nice dude-cool t-shirts to 9 lucky winners this week. You don’t turn 9 every year, do you?

We’re kicked to know what you guys will come up with and so is the Dude (you bet!). See you on Facebook then.

Oh, and yes, happy birthday to us and thanks for your wishes too!

So let’s say you have to analyze a company’s daily stock performance over the past 25 years. Quite a likely scenario when you are considering a serious investment or acquisition. But that’s 20,000 data points to analyze- fewer than the number of parts in most space stations!

The trouble is, often the only way to visualize both the overall trends and the underlying details is to juggle around with a dozen charts and scrolling back and forth to decipher any meaningful insight. But what if you could get an overview across all your data and zoom right in to the details when you see an interesting trend?

Introducing, the Zoom Line chart! In this post we will walk you through the zoom line chart, and show you how you can harness it to the best.

To quote Shneiderman’s mantra

Overview first, zoom and filter, then details-on-demand.

The zoom line chart is probably the best application of this mantra. First off, this chart can handle a larger amount of data points than any other chart. The example below has around 18 thousand data points of stock prices across 25 years.

The entire data is compressed to fit the chart’s width, providing a quick overview . The zoom line chart also features information-packed tooltips. When you hover over a particular point on the overview, you can get the values and tips from all the data sets in that x-axis.

To zoom into the details, you just have to select the range in the chart.

Notice that the date range shown in the tooltips below the scroll bar. This shows you the data range that is currently selected. By default, the selection snaps to the nearest vertical divisional line for easy interaction. Once you release the mouse button, the chart zooms to show the selected range in the available space.

To see data beyond the currently selected range, you can simply scroll left or right using the scrollbar. The Zoom Out button would take you to the previous zoom level. If you want to jump back to the default chart view, click Reset Chart.

That’s the beauty of the zoom line chart – you can zoom down all the way to view fluctuations by the day, or even minutes..

And snap right back to see the overall trends for a 25 year – instantly…

Pretty nifty, wouldn’t you say?

But there’s more depth to the zoom line chart than just zooming. Lets say you want to compare the  daily trends during September 2009 with that during September 2010. Since they’re far apart, you would have to compare them with your naked eye.

The zoom line chart brings in an innovative feature called Pinning. Pinning literally enables you to pin one range of points over another, making trend-comparisons a lot more visual. To do Pin a range, click Switch to Pin Mode. You will now see that the mouse pointer has changed from a magnifying glass to a cross-hair.

Now you just need to select the target range- September 2009, in this case. The mouse pointer will turn to another icon upon releasing the mouse button. A ghost of the selected line segment gets imprinted on the canvas, thus letting you compare the pinned segment with the rest of the chart by just scrolling through.

The pinned segment can be dragged to any part of the chart canvas.

Once you’re done pinning the data points, you can switch back to the zoom mode from the Switch to Zoom Mode button.

As you can see, the Zoom Line chart proves very useful in making sense of large datasets, especially when you want to see the overall trends and the minute patterns simultaneously. While the Zoom Line chart will not be able to handle data in the realm of Big Data that is about a few gigabytes, it can handle about 20,000 data points quite easily.

Creating a zoom line chart is similar to creating other multi-series charts. Let us walk through the process of creating a zoom line chart which plots the daily stock prices of Adobe (ADBE), Apple Inc. (AAPL) and Microsoft (MSFT) for the last 25 years.

First you need to have the <chart> element.

Then specify the <categories> for the chart, which in this case are the dates.

And then you specify each of the datasets. For this example, we have one dataset each for ADBE, AAPL and MSFT. Within each datasets you <set> the value of the stock price for that date.

With so many data labels on the X-axis, it gets difficult to see which data point lies on which date. To solve this problem, we’ve come up with Vertical divisional lines. These lines can be displayed on the chart canvas, above each data label. Enable them by declaring the showVDivLines="1" attribute of the <chart>element.

This readies your XML data for the chart.

The zoom line chart also supports an alternative compact XML/JSON format, which simplifies the XMLization/JSONization of large quantities of data. In compact XML/JSON format categories and datasets are defined in the following manner:

If you use the compact XML/JSON format, then don’t forget to include the compactDataMode="1" and dataSeparator="|" attributes in the <chart> element.

In your HTML file, copy the following to get the zoom line chart:

Download the sample zoom line chart we’ve showcased in this post. Dive into the massive but simple XML document to see its structure.

The next time you encounter a situation where a large data set needs to be visualized, the zoom line chart would be a great fit. Your users will be delighted to interact with the data. And both of you could save time and effort of juggling between multiple charts.

See more samples of the zoom line chart and go through the documentation. If you have some thoughts about the zoom line chart, or have an interesting use case where you’ve already used it, please let us know in the comments below.

Let’s say you want to go out for an expensive dinner. But since it is expensive, you want to make an informed decision about where to go. So you pick up a set of magazines that review such restaurants. And to help you decide, you plot the ratings in a visual format, say a separate column chart for each magazine.

The column charts do a great job of bringing out the highs and the lows in the ratings. You can easily see that Noma and The Fat Duck come highly recommended by Gourmet News, and Le Benardin is best avoided. But knowing how subjective these ratings are, which the column charts clearly show, wouldn’t you like to consider all the ratings at once to make your decision?

Bring in the Heat Map Chart

The Heat Map Chart represents data in a tabular format with user-defined color ranges like low, average and high. So putting together all the ratings from different magazines, here’s the heat map chart you will come to:

As you can see, the condensed color-coded format of the Heat Map chart makes the data much more easy to understand. You have your ratings for each restaurant effectively categorized under the Poor, Average, Good and Best ranges.

You can also selectively hide or show any range as well. For example, you can see values only in the Best range by “switching off” all other ranges from the legend.

Now how about taking it a step further? Rather than having predefined ranges, how about choosing your own range on the chart itself?

Bring in the gradient legend

The gradient legend is a continuous range, instead of being broken into three discrete ranges. This affects the rest of the chart as well since the data sets pick their color from where their value falls in the gradient range instead of one of the three discrete values.

You just have to drag the pointers to select whatever range you want.

Isn’t it much easier to choose a restaurant using the Heat Map chart? Of course, you wouldn’t be creating a Heat Map chart every time you need to choose a restaurant. So let’s take a look at some of the more business uses of the chart.

Applications of the Heat Map Chart

A heat map chart can be used to visualize complex data like performance comparison of different companies, market response, stock market investments, and lots more.

In the chart below, we are visualizing the weekly CPU utilization of 23 computers in a network. Here you can easily know which computers have logged extreme values. If it were not for the heat map chart, the data would have been visualized using separate column or line charts which would’ve been very cumbersome.

It is a similar case with a huge marketing data set. From the heat map chart below, you can easily point out the best performing mediums versus the loss-making mediums. Instantaneous understanding is where the heat map chart scores highly.

In the Weekly Performance chart below, it is very easy to distinguish the high performers from the laggards because of the color gradations.

This was all about the heat map chart. You can use it to visualize large amounts of data, and your analysis will be much quicker because of the color gradations. You can see more examples, read more about the heat map chart and download it from here.

Creating a Twitter dashboard is not an easy task. With Twitter analytics being the cynosure of every web marketer, creating a dashboard that fulfills all their needs is a deeply involving task. A media outlet, generally being a one-way broadcast, would really like to understand whether it is having a meaningful conversation on Twitter. A literary reviewer would like to know how many times his beautiful quote has been favorited or retweeted. With all of these in mind, we decided to take the plunge ourselves and create a Twitter dashboard of our own – FusionTweet! We’ve managed to keep it intuitive and informative, and are very happy about the delicate balance we’ve achieved. Let us walk you through the process of how we created FusionTweet.

Metrics that make sense

To start with, we needed to narrow down the metrics to the ones that really make sense and are useful in making Twitter-related decisions. We figured that having the tweet count of a particular Twitter user, say @barackobama for a particular period of time is very useful. It gives a clear idea of how engaging he has been with his followers during that time period. And so is the number of times that other users mention him on Twitter, which gives an idea of how much his followers engage with him.

We also wanted users to compare their Twitter activity with friends and competitors. So we decided to bring in a competitive analysis of the tweets, replies and followers for different Twitter handles.

Twitter API wasn’t enough

Up next, we were faced with the task of getting the data we wanted without having to authenticate the user. We faced a few roadblocks while gathering the data – a big one being unable to get historical data using Twitter’s API. So we turned to other API services like Topsy and Twittercounter. Out of these, Topsy has the most exhaustive data, and is rightfully called as Twitter search without an expiration date. However, even in a marketplace buzzing with Twitter APIs, we could not get our hands on the historical follower count of a Twitter user for more than the last 2 weeks (if anyone could help us out here, we’d be grateful).

Topsy has been cataloging all kinds of Twitter data on its servers, and they are reported to have over a petabyte of Twitter data on their servers. Topsy provided us with most of the data we wanted. Their otter API has many useful queries, and constructing each query was a breeze. Their /searchhistogram API call was especially useful, and it allowed us to easily slice up the returned data in intervals. We used it to get data on tweets from:barackobama, and tweets @barackobama. It can be used to do a lot more, just browse through their docs to learn more.

We began poking around the Twitter API with the help of Apigee.com. It has a wonderful console where you can run queries and experiment with the Twitter API. And we also loved the part where we could switch the API response from XML to JSON, so understanding the API’s response gets much easier by just reading it.

Apigee was very useful for managing Twitter’s rate limiting. Using Apigee, you can create a proxy to query the regular Twitter API. We created a simple query using their services, and all it took was a minute. We used this method to query the basic profile summary for FusionTweet – screen name, profile image URL, followers, following and listed counts.

So there we are! After a couple of days of coding, we finally got the dashboard up and running. If you go through the source, you’ll find that most of the code here is to “get” the data, than to create the charts themselves.

Design and development thoughts

Comparing your Twitter handle with friends and competitors visually was the main priority while designing FusionTweet. We decided to have a default of 3 handles to compare, and a maximum of 6.

Default text boxes

3 more text boxes on clicking +

We faced an interesting visualization problem when Twitter handles of completely different scales were compared. For example, if you compare @techcrunch to someone that has really low Twitter usage, then the lines in the chart would just be stuck to the ceiling and the floor. For situations exactly like these, we have the Logarithmic Line Chart. So we put in the log line chart to plot the tweets, replies and follower count. While the log scale represents the wide variation in data very easily, not everyone will have the exactitude to read through the scale and will end up misinterpreting the data. Since we want everyone to use the dashboard, not just the scientifically-inclined, we decided to stick to the simple line chart itself.

And finally, we had to find a way to show that the drop-down menu with time periods is applicable to only the first 2 charts, not the third one. We tried a variety of solutions, ranging from a drop-down for each of the first 2 charts to having tabs. But none of them were tasteful enough, and we finally added two horizontal lines enclosing the drop-down and the first 2 charts.

A few best practices that we used on the FusionCharts chart object is to escape the data URL passed in the setXMLUrl function. If we don’t, the FusionCharts Visual Debugger would throw a warning. And on the backend, in our <chart> element, we would like to highlight a really useful attribute.

connectnulldata='1' – If a user has not tweeted at all on some day, then the line chart would be totally disconnected for that day. Setting this attribute to 1 ensures that the line dips down to the X-axis, and doesn’t show a disconnect between the data.

Scaling FusionTweet

We spoke to the wonderful guys at Topsy and TwitterCounter, and asked them for higher grade access to their APIs. The current free limit is 10,000 calls in 1 day for Topsy and 100 calls per hour for TwitterCounter, we were sure to cross them once the dashboard goes live. TwitterCounter has increased our limit to 500 counts per hour with some kind words (we’ll bug you soon for more), and Topsy would require us to buy higher grade access, which would give us 1 million calls in a day.

Fun!

This was our first hand at the omnipresent Twitter. It was a lot of fun developing it, and comparing our follower counts with the rest of the team. Do check out FusionTweet and let us know how you like it.

Cognos is a Business Intelligence platform that allows authors to connect to almost any database, design a metadata model, and build reports and dashboards. These reports can be viewed in a number of formats, HTML, PDF, Excel, CSV and XML. While Cognos has its own portal system, these reports can also be attached to Sharepoint (MOSS). This post will detail how to embed FusionCharts v3 into Cognos reports using standard Report Studio objects. It assumes a basic level of understanding of Cognos Report Studio and HTML.

While Cognos has a suite of charts, they are often impossible to format exactly to the specifications desired. FusionCharts, while needing more effort to create than Cognos reports, allows for significantly more adjustments in the appearance to allow the user to generate the chart exactly as he wants it.

Data String Method

FusionCharts allow authors to embed the source XML directly into the page. This will allow Cognos authors to use HTML Objects to programmatically generate the expected XML.

To start, drag an HTML object to the Page Header. Paste in the reference to the FusionCharts.js file:
<script type="text/javascript" src=".. /FusionCharts/Charts/FusionCharts.js"></script>
Set the description of the HTML Object to FusionCharts.js so you know what it is in the future.

Next, drag another HTML object to wherever you want the chart to appear:

<div id="chartContainer">FusionCharts will load here</div>

Set the description of the HTML Object to chartContainer.

Now the parameters for the chart need to be set. Ultimately the full HTML on the page needs to appear similar to the following:

This can be achieved by combining HTML objects with repeaters.

Drag in an HTML item, and paste everything from <script type to inThousandSeparator=','>

The inThousandSeparator flag is important as Cognos will automatically add the thousands separator to numeric fields.

Set the description of this HTML item to ChartStart.

Drag another HTML item to the right, description is Chart End, and paste from  "</chart>" to </script>

Now we have to HTML items, ChartStart and ChartEnd next to each other. When the report is run, it will have all of the settings for the chart, except for the data itself.

Now for the values of the chart. Create a query for your chart. In this example, the chart should show revenue by years.

The results of this query are:

Revenue is formatted in the cube, so we’ll need to get rid of the dollar sign in the report.

Drag a repeater between the ChartStart and ChartEnd HTML items. Set the query to the one you made previously, and put both items into the properties of the repeater.

Drag 5 HTML items into the repeater. The following list explains each item:

1. Text: <set label='
2. Data Item Value: Year
3. Text: ' value='
4. Report Expression: [Query1].[Revenue]*1 This is to remove the $ from the string. If it weren’t for the dollar sign you could have left it as a data item value.
5. Text: '/>

Name the HTML items appropriately, so you can reference them later if needed.

Your page should now look like this:

Now try running it. If every step was completed correctly, the report should look like this:

By simply changing the Column2d.swf to Pie2d.swf your chart would look like:

And as Line:

That is how you can embed FusionCharts v3 into your Cognos reports. Do you like what you see?

Note: Cognos saves the metadata of the reports as XML inside the Cognos database. This makes it very easy to share reports via email.

Authors can simply download the XML and copy it into the clipboard and use the authoring tool to load it.

This is a guest post written by Paul Mendelson. Paul has worked in the Business Intelligence field for 8 years. He currently works for Opisoft Ltd as a Cognos expert. He works at a number of client sites including the Road Safety Authority, Menora Insurance, Teva Pharmaceuticals, and a number of other companies. Paul also maintains a Cognos blog.

We like talking to our customers. Over email, phone calls and face-to-face meetings at tradeshows, we discuss how they are using FusionCharts, the problems they are facing and new capabilities they would like to see added to it. They are generous with their feedback and often have nice words to say about us. Over the last couple of quarters, we noticed something interesting. Shocking, actually. A lot of our customers were asking for features that were already there in the product. At times, they sent us 4-5 feature requests only to know that all of them were there already. And then we thought to ourselves – if our customers don’t know everything they can do with the product after they have paid money to buy a license, what about the first-time visitors? What about people who are just looking around trying to find a charting component to meet their requirements? Even though we have a vast product literature with real-life demos, chart galleries, extensive documentation and more, something was missing. What we didn’t have was something that covered FusionCharts in an all-round manner. Something that talked about everything FusionCharts can do. And that’s when we decided to create our shining new product tour.

Creating the product tour was a long journey but we are very proud of what we have come up with. In this post, I will take you through this complete journey and talk about all the phases involved in great details – inspiration, conceptualization, content structure, design, development and the usability aspects we worked on throughout. I will also talk about all the challenges we faced and how we overcame them to finally develop the product tour.

First, a little history

Ever since FusionCharts was born, we have always believed that a product without accompanying product literature is only half complete. And I am not talking about literature that tells you how to implement the product. That is a given for any good product. I am talking about literature that tells the user what is in it for him, gets him thinking about things he can do with it and helps jumpstart his development.

Right from day one, we have had real-life demos and a chart gallery to show users exactly what they can do with FusionCharts. Over time, we have added other things like a 3-min video overview as well for people who are too busy to go through the demos and gallery.

As you would have guessed, it takes a lot of time, planning and effort to create such elaborate product literature. But we feel the time and effort is well justified. We don’t want visitors to come to our website, look at our product, read through the feature list and then map them one-by-one to their requirements to see if it suits them well. We want them to come to the website, take a look at a demo (we have demos for different domains and roles) and scream – This is EXACTLY what I am looking for! This is not to say that having a list of features is bad, but that a list of features by itself is incomplete literature for most products out there. In fact, we had a half-assed feature tour ourselves that we retired recently.

Our philosophy also stems from the fact that when we started in 2002, we pioneered the very concept of Flash charting (and interactive charting in turn). Most people just couldn’t visualize how a charting component could improve the user experience of their entire application. We had to educate them on how it helps them replace their boring data and give their users a more powerful reporting experience. To do this, we had to show them how their apps could look better with better charting. Now nine years down the line, charting has become an industry in itself and most people understand the importance of a good charting component.

Why the need for a product tour?

Good question. So while we had a lot of product literature, none of them served the purpose of talking about FusionCharts in a well-rounded, yet concise manner. The demos are great for the this-is-exactly-what-I-want moment and later on, to help jumpstart development (both for inspiration and learning best practices), but we don’t want to push features in them just for the sake of it. We want to keep them as true to the domain as we can. The chart gallery is good for understanding everything possible with the charts individually, but not with the product as a whole. Also, the demos and the gallery give us a chance to bring out only the end user side of things. They don’t talk about the implementation side of things. The 3-min video is what came the closest to it but there’s only so much a video can cover – and you can’t have call-to-action links in them as neatly as in a web page. The feature tour was too text-based, and it was a “feature” tour.

We started getting serious about our product tour first when we saw Basecamp’s tour. Coming from 37signals, known for their great copywriting and no-nonsense approach to business, it clearly explains everything Basecamp can do for you. No buzzwords, no feature lists, only benefits.

Once we saw that, we had a good picture of what the FusionCharts product tour could be like. Then we came across Apple’s Why Mac section and that was it. Our inspiration was all sorted out.

Starting out

To start the project, we had to figure out the structure of the tour. Now FusionCharts is a comprehensive charting suite containing multiple products and a lot of different features. To give you an idea of what we are talking about, let me quickly throw some facts at you. Don’t worry it they don’t make sense. The charts are animated, they are interactive and they can be in 2D and 3D. They are available in Flash & JavaScript and work on PCs, Macs, iPads, iPhones and a majority of other mobile devices. There are over 90 chart types each with their different use. Then there are things about drill-down, image export, number formatting options, data highlighting and ninety five other things FusionCharts can do for you. And then things about the extensive documentation and knowledge base, the wonderful community and the customer base side of things. Quite clearly, simply listing all of these out was not going to work. It would make it another feature tour. We had to group them under meaningful heads so that they were easy to find and remember.

Now the thing is we don’t sell features, we sell benefits. That is one of the reasons our feature tour always remained half-assed and wasn’t updated with new releases. I mean, will you care about everything a product can do? No. You will only care about what it can do for you. So when we had to categorize all the features of FusionCharts under headers, they had to be benefit-driven. Some of the headings chose themselves – stunning looks, powerful reporting, comprehensive range of charts and trusted solution. For the others, we had to think of ways to encapsulate all the features (let’s call them features for the sake of a smooth read) grouped under them. After much deliberation, we finally came to six headers (easy to use and easy data analysis being the other two) and put them in the order of priority.

With everything put under headers, we decided that the tour would be like a slideshow with a slide for every header. Each slide will have a description to accompany the header and summarize all the features in that slide. This makes it easier for the user to understand which slides are of interest to him before he clicks on them.

With the headers done, we moved on to the content for the features. For the content, we were pretty clear on what we wanted right from the start. We wanted it to be like tweets – short, crisp, one idea at a time.

On to the layout and design

For the layout, we went back to Basecamp. We really liked their layout, and decided a similar one would work perfectly for us too.

The Basecamp layout had three things going very right for us:

1. It had a structure very similar to ours. Five headers, each having a short description, clubbing features under them.
2. When you select a header, a slightly more detailed description comes up with an accompanying image.
3. The description of the features were very similar to the length we had.

It also had a couple of things going not so right for us:

1. The web and design team thought that the images accompanying the features weren’t getting enough space. They thought we needed a more open layout (since charting is not as easy to relate to as project management) and that the content section could be more modern.
2. The tour had more of a website feel than a slideshow or a guided tour. With PPTs, we are used to navigating horizontally, not vertically.

After a lot of discussion, we decided that these two points weren’t going to be much of a concern. We decided to move ahead to the design phase. A mistake, in hindsight. Typically, we draw wireframes for every new page we are designing but for this we were pretty clear on what we wanted. So we did a quick paper sketch and got started.

However, as soon as we started designing it, we hit a roadblock. We realized that with six headers and their descriptions (even though short), the vertical navigation was taking up too much space. It might even introduce a vertical scroll bar on smaller screens and lower resolutions.

We had to get back to the drawing board again. Quite clearly, vertical navigation was not going to work for us. We don’t use horizontal navigation a lot, so we took some time to condition our brains to that. Our main concern was whether we will be able to fit the six headers side-by-side, and what happens when a seventh one comes in? To try out our concept, we quickly created a simple horizontal navigation bar.

Whoops…this could accommodate only five headers. Even if we decided to break down comprehensive range of charts into two lines, it would still be very tight for six headers. Lowering the font size would reduce readability. No matter what we did, putting all the headers side-by-side wasn’t going to work.

What if we could create some sort of navigation in which all the headers did not have to be next to each other? The design team then came up with a circle-based “irregular” navigation style.

This was unlike any navigation we have seen before, and we found it very interesting. However, after some discussion, we realized that this would not be the best solution either. Since the circles have to be in different sizes, the headers in the bigger circles seem like they are more important than the smaller ones. This interferes with the left-to-right prioritization we had already set. Also, when we tried visualizing the design for the rest of the section, we did not think this would be the ideal solution. It would be too unstructured.

Then we thought if we can do an irregular navigation, why not just make it more structured with some sort of a layered navigation? The design team got back to work and came up with a two-level navigation.

This was it! As soon as we saw it, we knew this was the navigation we were looking for. All the headers fit in well, they got enough breathing space, so did the descriptions and the priority was maintained too. Just to make sure that the user knows where exactly in the slideshow he is, we added some more tweaks to finally come to:

So we had the navigation that worked perfectly for us. As to our concern about what happens if another header comes in, we realized that a seventh header in a product tour would anyway be an overkill. New capabilities are most likely going to find a place under one of the existing headers. And if they don’t, we would restructure the content than change the design.

The vertical navigation not working out turned out to a blessing in disguise. It meant that we would  now have an open layout giving more space to the images accompanying the features. The design team was very happy. It also meant that the tour will have a more slideshow feel with the horizontal navigation, instead of a mix of both.

Time to decide on the navigation bar at the bottom now. Again we wanted to give it a slideshow feel but not restrict the visitor to just the next and previous slide. So we decided to have a paginator-style navigation for jumping to any slide with a click.

The Previous and Next is also clickable. While it looked very neat, the user will be left guessing what the next slide is when you click on Next, and dependent on his memory when he clicks on Previous.

How about adding the slide names as a tooltip when the user hovers over Previous or Next? That would put an end to the guesssing games.

Sweet, don’t you think? But wait a minute. Why should someone spend time to hover over Previous/Next for the slide name? Why can’t we just put the slide name instead of Next and Previous?

Finally, we decided to have the paginator in the middle for quick navigation and the previous/next slide names at the opposite ends of the bar.

When the user needs to jump to a slide other than the previous or next one, he can just hover over the paginator buttons and he will get a tooltip with the name of the slide it takes him to.

So with this navigation bar, everything we were looking for was covered in a very user-friendly manner.

Time to move on to the most important thing – the content area. We had to conceptualize and design the images to accompany the features. Our aim with the images was to make them so clear that just looking at the images gives a clear idea of what the feature is. Only if you want more in-depth details, you would have to read the text.

We put together our pointers on what the images should be to explain the feature the best, and passed it on to the design team. Design then went into hiding, but when they finally came out of it, we saw the most stunning images we have ever seen in our product literature.

Each and every feature was explained clearly with the minutest attention to details.

Also with an open layout, we could play around with the shape and size of the image the way we needed. The way the feature needed, to put more aptly. So we had images small enough to be sitting pretty next to the text, images big enough to occupy the entire horizontal space and then there were those that pretty much engulfed the text.

The marketing stuff and some further tweaks

When we were conceptualizing the tour, we were thinking of it as a guided tour that a first-time visitor to the website takes and nothing else. Once the design was complete and we were able to see what it actually looked like, we thought it would make for a great landing page as well. Sending people from our marketing campaigns to a page which summarized everything the product did in a nice graphical way would be great. However, they might feel lost if they are directly sent to a page with six headers being thrown at them. We had to warm them up by telling them what FusionCharts is and how it helps them before we get into details. And we had to do this quick. So we added a two-line description of FusionCharts right at the top of the tour. Anyone new would feel at home, anyone returning can comfortably skip it.

The only thing we needed to add now was a way to get out once the tour was over. The visitors would either like to see the charts in action in online demos or chart galleries, download an unlimited trial of it or if the the tour did a good job, they might want to check out the licensing. So we added these four call-to-action buttons on the last slide.

The reason we did not add the call-to-action buttons in the intermediate slides was that it would distract the viewers during the guided tour, and they might end up in unintended places. But what if for someone, one set of features (say comprehensive range of charts) was all they were looking for and they want to download a trial copy right after that? To strike a balance between the two, we decided to put the links in text instead of the bold buttons in all the other slides, in a font smaller than the slide names.

Moving on to development

On the development side, our main objective was to make the pages load fast given the number of images and make sure it worked on a majority of browsers and operating systems just like our products

Since the product tour is like a slideshow, every page in it has to be preloaded. For that, we used AJAX to fetch the page content. This not only made the initial load fast, but also enabled the pages to load in the background while the user is viewing one section.

The images had to be preloaded as well. We incorporated a common CSS where images were sprited and arranged in such a way that they load in the order the tour is viewed. Just like the page content, even when a particular section is not being viewed, its images continue to load in the background.

During development as well, we have put in a lot of effort to make the tour as usable as possible. We have added animated scrolling to help users navigate from one slide to another. So when the user clicks on a slide name, either using the navigation at the top or bottom, the page automatically scrolls to the place where the content of the slide starts with some cool animation.

Also within the slideshow, the user can use the browser’s back and next button to move back and forth. So he isn’t restricted only to the navigation we provide.

Beyond everything else, we wanted to make the tour compatible on a wide range of browsers and OS. And for that, we ensured that everything had a graceful degradation. Even the lack of AJAX (for browsers without JavaScript) has an alternative viewing method.

Has the tour helped?

That has been a long journey, hasn’t it? Time to reap the fruits.

As soon as we got done with the tour, we showed it to the whole team who absolutely loved it. Everyone was excited about showing it off to people wanting to know more about FusionCharts.

On the external side, while it’s been a short time since we have released the tour, the intial feedback has been good. New visitors like the tour and are able to get a clear understanding of FusionCharts using it. Customers now have a clear idea of everything they can do with their copy of FusionCharts and use it as a reference material of sorts.

The numbers look good too. The exit rates from the tour have been one-fourth of what they are from what the rest of the website. Time spent on the website has almost doubled with our marketing campaigns now leading to the tour. All in all, we are happy and proud of the product tour we have created.

Okay, I am tired of all the talking. It’s your turn to talk. Tell us what you like about the tour and what you don’t. How do you think we can improve it? Would you like to see more behind-the-scenes posts in the future? We have our ears glued to the comments section.