Chapter 2. Customizing your Chart

Now that you have created your first couple of charts, you must be curious to customize them both aesthetically and functionally. As charts are typically part of a larger application such as an internal reporting system or a CRM dashboard, it becomes necessary to bring the overall look and feel of the application to the charts as well. Also, the users of different applications vary widely bringing in the need for functional customization, while some of them can interpret complex figures in seconds, others need visual cues to understand their data better.

In this chapter, you will learn how to:

Customize visuals of the chart including border, background, and font
Control how numbers appear on the chart
Add visual context to data such as target sales on a monthly sales chart using trend lines
Personalize the chart by adding your logo and URL
Make your charts cater to an international audience by using multilingual characters

Let's get started.

Know thy chart

Before...

Know thy chart

Before we get down to customizing the charts, you need to know your charts a little better. We will look at the important elements of the chart to start with, and dive into the finer aspects as we go along.

The following screenshot shows how the chart background and canvas look in a 3D Column chart:

The following screenshot shows how it looks in a 2D Column chart:

As you can see, the chart background refers to the entire background of the chart and the canvas refers to the area the chart is plotted in. The columns in a column chart, the lines in a line chart and the wedges (slices) in a pie chart are called data plots.

Now that we have got the basics in place, let's get started. Shall we?

Customizing the chart background

The chart background is the most prominent aesthetic element of the chart, and goes a long way in keeping the look of the chart in sync with the complete application. The 3D charts have a white background by default, and the 2D ones have a light gray one.

Just like you had set the chart caption using<chart caption='Harry's SuperMart' ...>, the background color is also customized using XML/JSON attributes of the<chart> element. We will be using XML examples throughout the chapter as they are more human-readable, and implementing them in JSON should be no rocket science.

Time for action — customizing the chart background

1. Create a folder called CustomizingCharts under LearningFusionCharts. This is the folder where we are going to store all the HTML and XML files for everything we learn in this chapter.
2. Copy the files FirstChart.html and Data.xml from the FirstChart folder, and rename them as ChartBackground.html and ChartBackground.xml respectively.
3. In ChartBackground.html, update the URL of the XML data file from Data.xml to ChartBackground.xml by setting the following parameter:
```
myChart.setXMLUrl("ChartBackground.xml");
```

4. In ChartBackground.xml, add the attribute bgColor='CCCCCC' to the<chart> element as shown in the following lines of code:

<chart bgColor='CCCCCC' caption='Harry&apos;s SuperMart' subcaption='Revenue by Year' xAxisName='Year' yAxisName='Amount' numberPrefix='$'>

5. When you open FirstChart.html in a browser, you will see the same 3D Column chart you had created earlier but with a dark gray background instead of the...

Time for action — setting currency notes as the chart background

1. Create a copy of ChartBackground.html and ChartBackground.xml, and rename them to ImageBackground.html and ImageBackground.xml respectively. Also make the change in XML data URL.

2. Change the chart type to Column2D.swf in ImageBackground.html using the following line of code:

var myChart = new FusionCharts("../FusionCharts/Column2D.swf", "myChartId", "400", "300", "0", "1" );

3. Find a nice background image with currency notes. You can either search for an image shared under the Creative Commons license at http://search.creativecommons.org/ or use the beautiful image at http://www.flickr.com/photos/amagill/3367543296/sizes/z/in/photostream/. Save it as money.jpg in the CustomizingCharts folder.
4. Add the attribute canvasbgAlpha='0' to the<chart> element, and remove bgColor='CCCCCC'.
5. Add the attributes bgImage='money.jpg' bgImageAlpha='30' bgImageDisplayMode='fit'.
6. Open ImageBackground.html in a browser to see...

Customizing the chart border

By default, the 2D charts have a border around them and the 3D ones do not. To enable the border in a 3D chart, you just need to set<chart showBorder='1'...>. The border's color and thickness can then be customized using the borderColor and borderThickness attributes respectively.

The 2D charts have a border around the canvas too, which can be customized using the same attributes, just that you need to prefix the word canvas before them.

Customizing the data plot

Data plots, as we talked about earlier, are the columns in a column chart, the lines in a line chart, the wedges in a pie chart and similar. These data plots come with a lot of customization options and you can use them to highlight individual data points as well.

Customizing the color of the data plot

Each of the columns pick a different color by default in the column chart, and the same behavior is exhibited by the bar and the pie chart as well. The line and the area chart are drawn in the same color throughout. However, you can specify the color you want for each of the data plots in any of these charts by using the color attribute of the<set> element.

<set label='2009' value='1487500' color='FFFFDD'/>

You can use the data plot color to highlight a specific data point as well, say the highest revenue in a month, or the lowest, for that matter. It is one of the most commonly used data highlighting techniques wherein the data to be highlighted is given...

Customizing the font properties

You can also customize the font face, size and color of all the text in the chart captions, data labels, values, and so on. This is done using the baseFont, baseFontSize, and baseFontColor attributes all of which are self-explanatory.

All the text on the chart can be classified into two the values and the tooltips inside the canvas, and all the labels and the captions outside it. There are times when you want to increase the font size of all the text on the chart but the chart can get a little cluttered when the size of the data values next to the data plots are increased as well. In such cases, you can selectively control only the text outside the canvas using the outCnvBaseFont, outCnvBaseFontSize, and outCnvBaseFontColor attributes. The outside canvas font properties override the base font properties for text outside the chart.

Configuring the y-axis and divisional lines

In all the charts that we have created until now, we just supplied the data and the chart automatically calculated the lower and upper limits. It also added divisional lines to help us in analyzing data the horizontal lines that run through the chart at $500K, $1M, $1.5M, and the like, in all our charts. While the defaults work well in most cases, there are times when you would want to set the axis limits by hand and also the number of divisional lines.

Time for action — customizing the chart limits and the number of divisional lines

1. Create a copy of ChartBackground.html and ChartBackground.xml, and rename them to ChartLimitCustomization.html and ChartLimitCustomization.xml respectively. Make the change in XML data URL and remove the background attribute for all the forthcoming examples, wherever we make a copy of the chart background files, let's assume this step by default to keep our focus on the new stuff.
2. Add the attributes adjustDiv='0' yAxisMaxvalue='3000000' numDivLines='2' to the<chart> element.
3. Check out ChartLimitCustomization.html in a browser to see how the chart limits and the divisional lines are under your control now.

What just happened?

First up, as we wanted to explicitly specify the y-axis upper limit and the number of divisional lines, we had to disable automatic adjustment of divisional lines using adjustDiv='0'. It is pretty simple after that, we just set the y-axis upper limit using yAxisMaxValue='3000000...

Formatting the numbers on the chart

If you have noticed the numbers on the chart carefully, you would see 1490000 and 2100000 have been neatly converted to 1.49M and 2.1M respectively, thus making them much easier to read.

FusionCharts automatically formats the number scaling to convert to K (Thousands) and M (Millions). So if the values on your chart are 13300, 14500, and 10000, the chart will automatically convert them to 13.3K, 14.5K and 10K respectively. In case you don't want the numbers getting formatted this way, you can set formatNumberScale='0'. Once you do that, the numbers are displayed as 13,300, 14,500, and 10,000. Commas have been added to make the numbers easier to read. In case you don't want the commas either, you need to set formatNumber='0' as well.

Adding a prefix or suffix to the numbers

Throughout the examples in the book, we have been adding the $ prefix to all the numbers on the chart using numberPrefix='$'. Mostly, currency signs are prefixed to all the numbers on...

Time for action — setting up a number scale to understand billions as well

1. Create a copy of ChartBackground.html and ChartBackground.xml, and rename them to CustomNumScale.html and CustomNumScale.xml respectively.
2. Add the attributes numberScaleValue='1000,1000,1000' numberScaleUnit='K,M,B' to the<chart> element.
3. Add three zeroes to each of the three revenue figures so that the new number scale consisting of billions can kick in.

What just happened?

We just created a number scale to convert all the numbers in the chart to K, M, and B. Here's how the conversion works in simpler terms:

1000 = 1K

1000 K=1M

1000 M=1B

The same has been explained to the chart using numberScaleValue='1000,1000,1000' numberScaleUnit='K,M,B'. Essentially, what it means for the chart is, convert any number on the scale of 1000 to K, any number on the scale of 1000x1000 to M (the next value in numberScaleUnit), and any number on the scale of 1000x1000x1000 to B (the last value in numberScaleUnit). The only...

Customizing data labels and values on the chart

Data labels are the names of data points that appear on the x-axis, and data values are the values themselves that are displayed alongside the data plot. In case you don't want to display them, you can hide them using showLabels='0' and showValues='0' respectively. Both the label and the value will be displayed in the tooltip of the data plot even if you have hidden them. You can also opt to show the label of only selective data points to highlight it first hide all of them and then display only the ones you want to, using<set showLabel='1' ...> for the respective data point. This can be done for data values as well using<set showValue='1' ...>.

Different modes to display data labels.

Quite often, the length of the labels is more than what can be accommodated in the space available to the chart. But don't you worry, all the charts come with intelligent label management to accommodate the labels in the smartest possible way. The...

Configuring the tooltips

Every time you hover over a data plot, a tooltip with the name and the value of that point will come up. In case you don't want to have tooltips on your chart, you can switch it off using showToolTip='0'.

On the other hand, you can use the tooltip to show added details about the data points, which if present on the chart can add a lot of clutter to it. To have a custom tooltip instead of the default name and value, you need to use<set tooltext='Detailed explanation comes here' ...>. You can also break down the tooltip into multiple lines using {br}. So if we wanted to add more details to Harry's revenue chart, the tooltip could be:

<set label='2009' value='1487500' toolText='Apparels: 27%{br}Household: 37%{br}Electronic Goods: 19%{br}Sports and Fitness: 17%'/>

Configuring the legend in multi-series charts

When you created your first multi-series chart, you must have seen that the legend at the bottom of the chart helps identify the series name. The legend comes up in all multi-series and combination charts by default.

The user can click on the icon for a data series to hide it and focus on the other series. To bring it back, the user just needs to click on the icon again. The interactivity comes in really handy when you have a number of series plotted on the chart, and the user just wants to focus on a particular series.

Similar to the other chart elements, even the legend is highly customizable, both aesthetically and functionally. By default, the legend is shown at the bottom of the chart. However, if you prefer it on the right, you need to set<chart legendPosition='RIGHT'...>. To learn more about how to customize the legend aesthetically, please check out www.fusioncharts.com/docs | Quick Chart Configuration | Legend.

Note

Pie and doughnut...

Adding a trendline to the chart

Trendlines help you add more meaning to the chart, by helping the user view the data in context to some pre-determined value. For example, trendlines can be used to show the target in a monthly revenue chart or mark out the critical zone for a chart monitoring the temperature of a nuclear reactor.

Time for action — adding a trendline to show target revenue

1. Create a copy of ChartBackground.html and ChartBackground.xml, and rename them to Trendline.html and Trendline.xml respectively.

2. Add the following code to Trendline.xml right after the chart data:

<trendLines>
<line startValue='430000' color='009933' displayvalue='Target' />
</trendLines>

3. Open Trendline.html in a browser.

What just happened?

Your chart can have multiple trendlines on a chart, so they need to be enclosed within the<trendlines></trendlines> tags. For each trendline, you need a<line> element. We then defined its start value, color and the label to be displayed alongside the trendline. In case your trendline needs to have a different end value, you can define that as well using the endValue attribute that would result in a slanted trendline.

Have a go hero — add a trendzone to the chart

Trendzones are similar to trendlines, except that they mark out a range, and hence, necessarily...

Personalizing the chart

Personalizing your charts helps add credibility especially when you are packaging them to an external audience. With FusionCharts Suite, you can add your logo to the chart and have your own link in the context menu (right-click menu).

Time for action — adding a logo and link to the chart

1. Create a copy of ChartBackground.html and ChartBackground.xml, and rename them to PersonalizedChart.html and PersonalizedChart.xml respectively.
2. Get a logo that you think works well for Harry's SuperMart and place it under CustomizingCharts as logo.jpg. You could also have the logo in GIF/PNG/SWF format. The logo has to reside on the same subdomain as the chart files. In case you can't find a suitable logo, pick up this H sign from http://www.flickr.com/photos/hansdorsch/2759771921/sizes/o/in/photostream/ shared under the Creative Commons license.
3. Add the following attributes to the<chart> element: logoURL='logo.jpg' logoPosition='TL' logoScale='10' logoAlpha='60' logoLink='http://www.harryssupermart.com'.
4. Also add aboutMenuItemLabel='About Harry's SuperMart' aboutMenuItemLink='http://www.harryssupermart.com'.
5. Open the page in a browser to check out the new personalized chart. Right-click on it to see the about...

Using multilingual characters on the chart

If you cater to an international audience, wouldn't you like your charts in the reports and dashboards to be in the language of your audience? FusionCharts Suite allows you to use multilingual (UTF-8) characters on the charts, so your charts can go international too.

To use multilingual characters on the chart, you need to use UTF-8 encoded XML and the XML file/stream requires a Byte Order Mark (BOM) stamp to be present as the very first 3 bytes of the file. BOM is an indicator that the file contains UTF-8 encoded strings. Adding the BOM stamp is simple, and it depends upon the method you are using to provide data to the chart.

Adding the BOM stamp in the Data URL method

As we learned in the Chapter 1, Introducing FusionCharts, the method by which we provide a URL to the chart to get data from (either a static XML file or data relayed by a stream) is called the Data URL method. This is the method we have been using throughout this chapter to pass...

Changing chart messages

Having created so many charts, by now you must have seen the Loading Chart or Retrieving Data message at least once. Or maybe the Invalid data message when you missed something in the XML. All of these messages are customizable too and you can have anything you want, to keep the messaging style the same throughout your application, or to add your own touch to them. All the messages are controlled by the attributes that you need to set in the page that renders the chart.

Attribute name	What does it set a message for?	Default value
`PBarLoadingText`	When the chart is loading	Loading Chart. Please Wait.
`XMLLoadingText`	When the data is loading	Retrieving Data. Please Wait.
`ParsingDataText`	When the data is being parsed	Retrieving Data. Please Wait.
`ChartNoDataText`	When there is no data for the chart to display or the chart hasn't got data in the structure it expects, for example sending multi-series data to a single-series chart	No data to...

Time for action — changing the Invalid data message

1. Create a copy of ChartBackground.html and ChartBackground.xml, and rename them to CustomChartMessage.html and CustomChartMessage.xml respectively.

2. Open CustomChartMessage.html and add the following highlighted line of code in it:

<div id="chartContainer">FusionCharts will load here!</div>
<script type="text/javascript"><!-- var myChart = new FusionCharts("../FusionCharts/Column3D.swf", "myChartId", "400", "300", "0", "1" );
myChart.setXMLUrl("ChartBackground.xml");
myChart.configure("InvalidXMLText", "The world has a new order. This chart shall not render.");
myChart.render("chartContainer");// -->
</script>

3. Open CustomChartMessage.xml and mess up the XML. Don't be too destructive, removing a closing> will do the trick too.
4. Open CustomChartMessage.html in a browser and see how the world has a new order.

What just happened?

We modified the default message of the InvalidXMLText attribute. After the...

Summary

In this chapter, we took a deep dive into the massive customization possibilities FusionCharts Suite offers. Specifically, we learned how to:

Customize the visuals of the chart such as background, border, and the data plots themselves
Highlight data points using the customization properties available for individual data points
Format numbers on the chart and define our own number scales
Add context to the chart using trendlines and trendzones
Add multilingual characters to the chart by adding the BOM stamp
Customizing the chart messages by calling configure() before rendering the chart

In the next chapter, we will look at the tight integration between FusionCharts Suite and JavaScript, how that can be used to manipulate charts at client-side, and add better printing support.