The FusionCharts Blog

FusionCharts for Flex v1.1 released

FusionCharts for Flex v1.1 is here. This release is special, as gauges and charts from FusionWidgets have been introduced in FusionCharts for Flex. Built on FusionCharts v3.1 framework, the new version is packed with a wide range of new and exciting features. Here’s a brief overview of the new features in FusionCharts for Flex v1.1.

Exciting Gauges and Charts from FusionWidgets

In addition to the 45 chart types it already provided, FusionCharts for Flex v1.1 now also provides 12 charts from FusionWidgets - 7 gauges including angular gauge, linear gauge, LED gauge and the like; spark charts and bullet graphs. All gauges support real-time update and can even display live messages streamed from a server. Gauges are extensively used in financial applications, instrument panels and executive dashboards.

 
Angular Gauge

Linear Gauge

Horizontal LED Gauge

Bullet charts and spark charts have also been introduced for implementation on complex dashboards where space is a major concern. Bullet graphs are smaller information-intensive forms of bar and column charts meant for visualizing a single parameter. Spark charts are minuscule charts that can be embedded in-line with text. Essentially, spark charts are miniaturized versions of conventional column and line charts and can be positioned strategically to create maximum impact.

Bullet Graph

 

Multiple Sparklines

New Features in FusionCharts for Flex v1.1

Apart from new gauges and charts, FusionCharts for Flex v1.1 offers an exhaustive range of new and exciting features. Thanks to FusionCharts v3.1 framework, all charts now have a native support for client-side export to image (JPEG & PNG) or PDF. Export of plotted data to CSV format is also supported.

In this release of FusionCharts for Flex, further improvements have been made to features which had been introduced in the earlier version. For instance the previous version of FusionCharts for Flex allowed incorporation of foreign language text on charts – however, rotation of such text was not possible. This limitation has now been removed.

A whole host of dedicated features have been provided for enhancing customizability. A significant enhancement in this respect is support for branding - company logo can now be incorporated on charts. Custom positioning of the logo is possible and it can even be turned into a hotspot. Another exciting enhancement is the option to substitute the default content of data plot value labels with custom text.

Custom label for data sets

Following is a list of other features that have been introduced in FusionCharts for Flex v1.1:

• Customizable context menu: FusionCharts for Flex now allows customization of the chart’s context menu (right click menu). You can put in your own menu items which may even include an external link.


• Text wrapping: In the earlier version, text wrapping was not supported, this led to inconveniences especially if the caption, sub-caption or the tooltips comprised of long text. FusionCharts for Flex v1.1 makes things smoother by allowing text wrapping of caption, sub caption and tooltip text.


• Interactive trendlines: You now have the option of making trendlines more interactive as you can now define a tooltip for each trendline.


• Custom Palette: FusionCharts for Flex now allows you to globally define a palette of custom colors, which are then applied to the data plot. Earlier this could only be done by manually inserting the color code in the XML definition of each data plot.


• Flex Events and APIs: FusionCharts for Flex v1.1 gives you increased control over charts by exposing a large number of events which can be trapped using codes. Furthermore, an extensive library of APIs has been provided to allow better control and greater flexibility.

Check out FusionCharts for Flex at www.fusioncharts.com/flex, and please let us know your feedback on it.

USASpending.gov uses FusionCharts

Americans can see where their money goes using FusionCharts - quite literally. Vivek Kundra, the US national CIO unveiled the new Federal IT dashboard at http://it.usaspending.gov on Tuesday. The dashboards are designed to help Vivek and the CIOs of individual government agencies get a handle on the effectiveness of government IT spending. They also intend to give the public a look at thousands of IT projects underway around the federal government.

And now for our moment of pride – FusionCharts Suite has been used extensively in the dashboard for data visualization purposes (Thanks to Tim O'Reilly for pointing it out).

This is what the dashboard looks like first up:

While the usefulness of the dashboard and the transparency that it will bring about are best left to the experts (here and here), we will take a look at the charting aspects of the dashboard.

The first look at the dashboard shows the agencies of the federal IT government and then you can drill down to individual project overviews - descriptions, details on contracts signed, schedule meltdowns, performance metrics and the like.

The dashboard as you might appreciate has been really aesthetically done. Some of the things that we particularly like about it are:

• Correct usage of charts: While using a simple column chart to show agency-wise investment,  an angular gauge to show rating on a scale of 10 and the like are no Eureka moments – but with the wide variety of charts available at a user's disposal nowadays, people do tend to use a maximum number of chart types just for the heck of it. So the choice of chart types has to be commended here. The only choice which will forever remain debatable is the use of the pie chart, which has been used for displaying the overall ranking.


• Drill-down capabilities: You can drill-down right from the agency name to the individual projects under the agency and more details like evaluation and spending on them. This allows the user to see details at the level he wishes to. So while Vivek and the CIOs of individual government agencies might be looking more at the overall picture, members of the public would be more interested in individual projects which directly affect them.


• Effective use of tooltips: Let's accept it. Not many people would be interested in all the agencies shown in the chart all at once. So extra information regarding agencies and their investments & spending are neatly delegated to the tooltips. When someone wants more information about a particular agency, he can hover over it for more info and then drill-down into it for even greater details.


• Meaningful captions: All the charts in the dashboard have meaningful captions which do a good job of summarizing what the chart comprises of as a whole. For example, the first screen of the dashboard clearly talks about the number of investments for a particular agency and the total spending on all of them, which fits the data better in context.

One feature that we would have loved to see if there was a way to pause the automatic playing of data and then start it again from the same point. For example, if you wanted to take a look at the break-up of investments for DOT and click on it, its details would be displayed but pretty soon the details of some other agency would be automatically shown. An option to pause the playback at this point would have been really handy.

The dashboard so far tracks over $539 billion budgeted dollars in 781 "investments" comprising over 7,000 projects. It is indeed a matter or pride for us at FusionCharts to be associated with a project of such a big magnitude and importance to the American people.

In Vivek's words, “Data is powerful. It enables monitoring, reporting, and meaningful analysis that leads to better decisions....giving us the ability to turn around poorly performing projects and to divest from those which no longer make sense.” All the best Vivek – we hope the dashboards are a success.

FusionCharts Team has a blast at Silicon India Startup City

We are back from Silicon India Startup City in Bangalore and it was so much fun to interact with the Bangalore Tech Community this time around ! This was the first time we were participating in a trade fair in India, and we were naturally very excited. A lot of work went into planning and executing the stall set-up, including the designs and the logistics, the details of which are best left for another post. Thankfully, the hard work paid off and the stall looked...how does one put this mildly...absolutely stunning! :) 

The FusionCharts stall and the demos was an instant hit with the visitors. We also met some of our existing clients from Bangalore.  And once the contests started rolling out there was no stopping the fun and the goodies. One of the contests was called 'Make a chart Get a cookie' where hundreds of visitors saw how beautiful flash charts can be made in a wink and got rewarded in delicious Australian cookies.

Then we had 'Write a Slogan Win a Pen Drive' contest where the winners went home with a free flash drive. Like the winner Ganesh (picture below) who went home ecstatic with the pen drive he won!

If you are already wishing you were there, there was more. We thought we would leave the best for the last. We gave out free FusionCharts License worth $100,000 . Yes, you read that right. One hundred thousand US dollar worth of dazzling flash charts for your data, FREE!

We had a busy day meeting some enthusiastic corporates who were really inquisitive about integration of our flash charts in their business applications.What was really special for us in this event was the fact that we came face to face with our loved customers first time in a startup event in India and met some really promising developers who were willing to take that leap, to add that extra edge to their data. Of course, it was greatly inspiring to meet the best of the IT entrepreneurs from India. 

The response to the event has quite honestly overwhelmed us here at FusionCharts. We are now eagerly looking forward to similar events in the coming months. In case you missed out this time, watch out. For all you know, the FusionCharts bus might in your town with the goodies some day!

Come and meet us at Startup City, Bangalore on 6th June

We will be exhibiting at SiliconIndia Startup City on 6th June in Nimhans Convention Center, Bangalore. So if you happen to be around, come meet us.

Over there, you can see some cool demos of our products which we have made specifically for the event, meet our team and get the most up-to-date news on what's going on in the FusionCharts camp. Also, we will be having some fun competitions with lots of goodies on offer and we will be giving out discount coupons of our products.

You can register for the event for free over here and know more about it here. Just drop in a comment below to let us know you are coming - and we will be on the lookout for you.

Looking forward to seeing you there.

Multi-lingual Charts with FusionCharts

Do you have a website or a web application that caters to an international audience? Then you would like to offer your product information and sales copy in the language of their choice. Let’s assume you already do so. But what about your charts? Wouldn’t you like your charts in reports, dashboards, surveys or any other part of the application to be multi-lingual too? Wouldn’t that further increase your credibility? 

FusionCharts Suite v3.1 now allows your charts and maps to go international too. While FusionCharts Suite v3 allowed you to use multi-lingual characters horizontally, v3.1 allows you to use them vertically too. So with v3.1, you can render your charts like this:

Yes, we do agree that you would not ideally like to have a chart with such a motley assortment of languages. But then you get the point, don’t you? 

How to use multi-lingual characters? 

Before we talk about how exactly can you have multi-lingual characters in your charts, let's briefly talk about the two ways in which FusionCharts takes its input XML data: 

1. dataURL method: In this method, you provide the URL of XML Data Document to FusionCharts. This URL can be a physical XML document (like Data.xml) or relayed by a URL (like ReturnXMLData.asp). The chart now sends a request for XML data to the specified URL, reads it, parses it and then renders the charts accordingly. Click here for more details on this method.  


2. dataXML method: In this method, you send the XML data along with the HTML Content and chart SWF file to the browser. The SWF loads, reads this data (present in same page) and then renders the chart. Click here for more details on this method.

To use multi-lingual characters on the chart, you need to use UTF-8 encoded XML and the XML file/stream requires a BOM stamp to be present as the very first 3 Bytes of the file. BOM stands for Byte Order Mark and is an indicator that the file is containing UTF-8 encoded strings.

How to add BOM? 

Adding the BOM stamp is a very simple process and can be done as follows depending on which method you are using: 

dataURL

In case you are using a static XML file, you can manually insert the BOM stamp to the XML data file following these 3 steps:

1. Open the file in question in a text-editor that supports UTF-8 encoding with BOM stamp (Example – Windows Notepad).
2. Open the save menu and specify file name, file type, encoding and BOM mark (if the option is available).
3. Save the file.

In Windows Notepad, the process would look like this:

But in most of the cases, you would not really be using a static XML file. You would rather be having server side scripts virtually relaying the XML data document to the chart. In that case, you could use either of the following methods:

1. Manually add BOM to the XML relayer script file - just like adding BOM stamp to the static XML files you can also add the BOM stamp to the server side file which would be relaying the dynamically generated XML. This needs to be done when the script file is created for the first time before you start coding in it.


2. Write BOM using script - In most cases the XML relayer script file might be created with ANSI encoded format. In this case, one needs to add the BOM using script at the very beginning of the output stream. Moreover, when a server side script creates an XML file, it should add the BOM stamp as the very first 3 bytes of the file. As an example, you can append BOM for PHP script as under:

header ( 'Content-type: text/xml' );
echo pack ( "C3" , 0xef, 0xbb, 0xbf ); 

To implement BOM stamp with other server-side technologies, please visit our online documentation on this here. 

dataXML

Just like adding BOM stamp to a static XML files, in this case as well you would need to save the file containing the chart SWF and XML with BOM stamp. This needs to be done when the script/HTML file is created for the first time before you start coding in it.

Custom string labels (annotations) for data sets

Continuing with the series on how to get the most out of the new features of FusionCharts v3.1, here’s our latest – custom string labels (annotations) for individual data sets. In case you tuned into the series just now, here’s what we have already covered: 

• Branding your Charts
• Exporting your Charts as Images/PDFs 

Back to the topic at hand – custom string labels. Let’s call them annotations for the sake of brevity. Annotations make a chart more information-intensive, thus enhancing decision-making. Let’s look at an example before we dive into the details:

See how neatly we have appended the labels “Birthday Discount – 30%” and “New Website” to explain the increase in sales for March and May respectively. And the XML going behind this is no rocket science either:

<chart caption="Monthly Sales for Jan-Jun 2008" useRoundEdges="1" numberPrefix="$" bgColor=”FFFFFF” decimals="0">
     <set label="Jan" value="42300"/>
     <set label="Feb" value="45600"/>
     <set label="Mar" value="62300" displayValue="$60K: Birthday Discount - 30%”/>
     <set label="Apr" value="49400"/>
     <set label="May" value="58100" displayValue="$58K: New Website”/>
     <set label="Jun" value="50000"/>
</chart> 

All of what you need to do is just over-write the default display value with your own text, using the displayValue attribute. And because we over-wrote the default display value for the data sets, we had to put in the figures $60K and $58K manually. 

Without annotations, you would have a chart with only the sales figures plotted in it and every time you wanted to know why a particular month showed an increase or decrease in sales, you would have probably referred an Excel file which had all these details. But with annotations, all of the information that you need for your decision-making comes neatly packed as a whole – so not only can you make decisions backed with concrete numbers, you can make them much faster now. 

While the example shown above is a very clichéd one, there are a multitude of other places that you can use it too – website stats with annotations like “Increased Page Rank” or “System Maintenance”, company expenditures with annotations like “Pizza Day” or “The Big Party” or even in your personal weight chart with “The 10K Run” or “The Free Booze Night.”

Branding your Charts

Your charts are yours. That’s not exactly the best of ways to start off but then that’s exactly what we are going to talk about right now – branding your charts. So let’s get started.

Why should you brand your charts?

1. You put in a lot of hard work to make the chart, so why wouldn’t you want people to know who the man behind the scenes is?
2. You work for a company and putting in the company name and logo increases the “brand” visibility, or so they say.
3. What the heck? The logo looks cool.

 So what would you ideally like to do to brand a chart?

• Place the company logo in a prominent position.  
• Place the company name in well, a prominent position.
• Lastly and most importantly as well, placing a link somewhere to the company website 

Everything that you would like to do can be done with FusionCharts v3.1 now. 

Here’s what a chart, company-stamped by FusionCharts v3.1 looks like:

XML data source:

<chart yAxisName="Sales Figure" caption="Top 5 Sales Person" numberPrefix="$" useRoundEdges="1" showBorder="0" logoURL="../Images/InfosoftGlobal_logo.gif" logoPosition="TL" logoLink="http://www.infosoftglobal.com">
      <set label="Alex" value="25000"/>
      <set label="Mark" value="35000"/>
      ...
</chart>

In case you are wondering why are we branding our charts, it’s 3) – “What the heck? The logo looks cool.” 

You can position the logo anywhere you want, set its alpha, scale it or even link it to your website. To position the logo, you can simply choose from a set of 5 pre-specified positions – we were just simple plain lazy and hence, the default position

Want to still add more to the branding? How about having the company-name in the right-click menu with a link to the company website?

XML data source:

<chart yAxisName="Sales Figure" caption="Top 5 Sales Person" numberPrefix="$" useRoundEdges="1" showBorder="0" showAboutMenuItem="1" aboutMenuItemLabel="About My Company" aboutMenuItemLink="http://www.mycompany.com">
      <set label="Alex" value="25000"/>
      <set label="Mark" value="35000"/>
      ...
</chart>

As you can see in the XML examples above, all of what you need to do to brand your charts is fuel some simple attributes in the XML data source. To see more details on how to add a logo to your charts, click here. And to see more details on how to add your company name to the right-click menu, click here.

So with all the marketing props required at your disposal, go ahead and let people know - your charts are yours.

Export your charts as images or PDFs

How often does this happen to you – you create a stunning information-intensive chart after a lot of hard work for your web page and then intend to embed the same in your annual report? Or mail it to one of your colleagues? But since you have no easy way to export the chart from the web page, you have to create the chart all over again.

What if all of that could be done as simply as in the screenshot below?

Yes, with FusionCharts v3.1, you can do it with one single click.

Any chart in FusionCharts v3.1 can be configured to be exported as an image (JPEG or PNG) or a PDF file by the end user. This can be done either on the server-side or on the client-side. Before we get into slightly technical details of the same, here’s a live demo of the same that you might want to see to get a better grasp of things.

Now, FusionCharts by itself cannot directly export the charts as images. It needs help either from server-side scripts, or other client side Flash movies (coded in Flash 10) to accept the bitmap snapshot sent by FusionCharts, and to convert that into an image or PDF. These are called FusionCharts Export Handlers.

The export handlers come in 2 flavors: Server-side Handlers & Client-side Handlers. Let's look into each of them in details.

Server-side Export Handlers

The server-side export handlers help you export FusionCharts as images/PDF with the help of scripts that are placed on your servers. We provide ready-to-use scripts for ASP.NET, PHP (uses GD and GZIP library), Ruby on Rails (uses RMagick and zlib) and Java in our Download pack itself.

These scripts accept compressed bitmap data from FusionCharts (over HTTP or HTTPS) and convert the same into images/PDFs. Post conversion, you've two options:

• Save the generated output (image/PDF) on the server’s disk. This allows you to use these images later for embedding in your emails/reports.
• Or, send it back to the browser so that your user can download it.

Client-side Export Handlers

The client-side FusionCharts Export Component, as the name suggests, helps you bypass all server scripts and save the charts as images/PDFs at the client side itself. You would typically use client-side export when your server doesn’t support any of the technologies mentioned in server-side exporting or you don’t want to transfer data between your client and server (which in turn will make the export process faster).

Client-side exporting is done using FusionCharts Export Component SWF file (which is coded in Flash 10) and FusionCharts Export Javascript class, both of which are available in the Download pack.

In both client and server side exports, you can configure the output formats(PDF/JPEG/PNG) that you wish to make available from your context menu and the cosmetics of the export dialog box itself. You can also make your own custom export panels (with custom buttons, look & feel) somewhere near the chart in a <DIV> and then connect the same to the export handlers of the charts.

Batch Export

Let’s say you have multiple charts on a page and you want to export all of them with a single click. In comes batch export. You can make use of batch export when you are exporting charts on the client-side. The exported files for each chart can either be saved individually, or all the exported charts can be saved as a single file:

Batch Export can thus be made use of extensively in reporting purposes and dashboards, where the user can save any chart and use it later in reports/emails.

To get details on how to implement either server or client side (including Batch export) exporting for your charts, please check out the Exporting as Image/PDF section in our online documentation.

In this post, we talked about the feature in FusionCharts v3.1 specifically, but it applies equally well to FusionWidgets, FusionMaps and PowerCharts v3.1 as well.

With this blog post, we start our promised series of an in-depth look at the new features of v3.1. Once you know the features inside out, you can use them to render a powerful charting experience. So keep coming back for more...

FusionCharts, FusionWidgets and PowerCharts v3.1 Released

FusionCharts, FusionWidgets and PowerCharts are now more powerful than ever before! v3.1 is here for all of them and it continues our unending endeavor to make numbers more glamorous and exciting.

In this post, we will take a run-through view of the new features that have been incorporated in v3.1. In later posts, we intend to detail each of these features in greater detail, so that you can reap their full benefits to render a never-before charting experience.

So, what's new in v3.1?

v3.1 unravels an entire spectrum of new features – some first-of-its-kind and some badly needed by the charting community. Some of our users will see that the features requested by them have been incorporated – aren’t we wonderful people?

Enough of bland talk; let’s get down to the features themselves now.

Enhanced Export Options

v3.1 offers a multitude of export options which allow client-side conversion of charts to image/PDF and conversion of chart data into CSV/TSV.    

Exporting Charts

Charts can now be exported to PNG, JPEG and PDF formats either at client-side or server-side. This can be done very easily using the export option in the right-click menu. Also, a batch export mechanism has been devised at client side, which allows you to export all the charts in a page as a single image/PDF using one-click.

You can see a live demo of FusionCharts Export Implementation here . To know more about the implementation details, please visit our Online Docs here and check out the “Exporting as Image/PDF” section.

Exporting Data

Your chart data can now be exported to either CSV or TSV format. This can be done from the context menu of the chart.

See more details in the Feature Tour here.

JavaScript Events

v3.1 exposes some important events which enable you to programmatically handle chart events and client-side errors, should they occur. All the charts and widgets in v3.1 can raise events in the following cases:

• When XML Data has loaded
• When an error is encountered while loading data
• When the loaded XML data is invalid
• When the loaded XML contains no data that can be displayed on chart

To know more about how to go about implementing it, see more info in the Online Docs here.

Other Exciting Features in v3.1

• FusionCharts now fully supports UTF-8 (multi-lingual characters). Irrespective of whether you're using horizontal or vertical text, FusionCharts can display all your characters correctly. Read more on this here .
• You can now show your company logo on the chart and configure the position, scale and alpha of it. Heck, you can even link it to your website. Read more on this.
• Tool-tips can now be split to any number of lines. With support for automatic wrapping and easier forced line breaks (using {br} pseudo code), you've complete control over them. Show as much information you want on your chart now. Read more on this.
• The vertical lines on your chart can now have their very own labels. You can also configure the position of lines and labels. More on this here .
• Each data point on the chart can now have a custom string label (call it annotation if you so very much want to). This is especially helpful if you want to convey more information for a data point. See an example here .
• Have you ever wished you could change "About FusionCharts" in the context menu of chart to your company name and link? We just heard you and granted your wishes. You can now personalize the chart by adding an "About your company" item to the chart's context menu and link it to your URL. See how to do it here.

As we said earlier, we intend to do posts on some of these individual features in greater details shortly. So do check them out to get the most out of these power-packed features.

Also, it’s been great fun working on v3.1 and we hope you will like it too. As always, we await your feedback on this; be it bouquets or brickbats, we will take all of it constructively.

Oh, and we just forgot to tell the most important part about this upgrade - it's free for all existing license holders. Just log onto FusionCharts Product Update Center and download your free upgrade.

Happy Charting!

Spice up your Flex applications with FusionCharts now!

FusionCharts for Flex v1 has been released. After 2 Beta releases and extensive feedback from our wonderful beta testers and users, FusionCharts for Flex is now commercially available to add the "wow" factor to your Flex solutions.

If you weren't tuned into our Beta releases, here's reiterating some of the major highlights of FusionCharts for Flex:

• 45 chart types spanning both 2D & 3D - In addition to the general charts comprising of single-series, multi-series, stacked and combination charts, it also offers unique charts like Scroll Charts, True 3D Chart, Spline Charts, Funnel & Pyramid Charts and the newly added Scatter & Bubble Charts. So as we like to put it, your data will always have the right face - and a beautiful one at that.
• Improved drag & drop support in Flex Builder IDE - Just dragging the FusionCharts for Flex component from the toolbar into your project gives you your first chart which has been provided with default data.
• No learning curve involved - FusionCharts for Flex smartly abstracts the internals of FusionCharts, thereby exposing Flex APIs and events that are already familiar to you. Using the numerous data connection APIs, you can natively connect to data stored in Flex structures like Array, XMLList, Model etc. and even other data sources like Blaze DS and webservices to fuel your charts.
• Extensive documentation and code samples to glide you through all the integration aspects.

So why FusionCharts for Flex when the world is already bestowed with Adobe Flex charts? When it comes to your really elementary charting needs, then the Flex charts have you covered. But when you are talking serious charting, the Flex charts fall short of what you would really desire. And that's where we come in either fully or partially. Apart from the highlights we already talked about, here's why you would like to use FusionCharts for Flex :

• More chart types, including Funnel, Pyramid, Scatter, Bubble and true-3D charts. And yes, we're soon coming with gauges as well.
• File size issues? Are you worried about your file size increasing with all the swfs being packed into one when using Flex charts? Worry not, because FusionCharts for Flex allows you to load the charts as and when you need. The charts are present as external SWF files that can be loaded on-demand.
• Unique interactivity options - FusionCharts for Flex offers interactivity options like the slicing/rotation in pie and doughnut charts, 3D capabilities in True 3D charts, 2D to 3D and vice versa, view-state change in Funnel, Pyramid and Pie charts etc.
• Lots of configuration options for each chart that help you configure both the functional and cosmetic aspects of each chart to your eternal satisfaction.

The licensing and pricing have also been finalized and this is how it stands:

• Developer License for $299 per developer. This license allows a developer to use FusionCharts for Flex in all the projects that he develops.
• Enterprise License for $1,499. This license allows a business with multiple developers located in a single physical building to use FusionCharts for Flex in all their Flex projects.
• OEM License for $2,499. This license allows an ISV to embed FusionCharts for Flex in their Flex product for distribution to unlimited clients.

 You can get more details about the product, download a no-restriction evaluation copy and purchase it from www.fusioncharts.com/flex

We would like to thank all our Beta testers and while this may sound straight out of the Oscars but you guys are awesome. We look forward to hearing what you think about FusionCharts for Flex v1.