Customizing charts using Dojo

Jazz up your column, bar, line, and area charts

In the world of Web 2.0, web pages are becoming more like applications, and web development libraries (such as Dojo and jQuery) are playing an increasingly important role. The Dojo charting module provides a quick and easy way to add great-looking and functional dynamic charts and graphs to your web pages. In this article, learn about the dojox.charting component to customize your charts. Explore plot and axis customization and advanced parameters such as ticks, gradient, and zooming.

Xiang Zhou (xiangxz@cn.ibm.com), Software Engineer, <a href="http://www.ibm.com/developerWorks">IBM</a>

Zhou Xiang photoZhou Xiang is a software engineer on the ORIA Dev team at the IBM China Development Lab in Shanghai. He previously worked in Lotus Mashups and UT/ClickTrack. Zhou now focuses on Dojo library development, including dijit claro theme development and new features for dojox charting. You can contact him at xiangxz@cn.ibm.com.



Qi Ruan (rqruanqi@cn.ibm.com), Software Engineer, IBM

Qi Ruan photoRuan Qi is a software engineer at IBM China Development Lab in Shanghai. He works on the ORIA team. His expertise includes web visualization development. You can contact Ruan Qi at rqruanqi@cn.ibm.com.



Qiang Wang (wangqsh@cn.ibm.com), Software Engineer, IBM

Qiang Wang photoWang Qiang is a software engineer on the Dojo development team at IBM China Development Lab in Shanghai. He is currently focusing on Dojo Grid development work. You can contact Wang Qiang at wangqsh@cn.ibm.com.



16 November 2010

Also available in Japanese

Introduction

With data visualization you can go beyond statistical data and show a lot of information in a small visual space to indicate a conclusion. A chart is one of the most important forms of data visualization. Charts are often used to help people understand a large amount of data and the relationship between parts of data.

This article builds upon "Create dynamic graphs and charts using Dojo," which provided an introduction to using the dojox.charting feature of the Dojo library.

In this article, learn to customize the Dojo 1.5 (see Resources) data visualization library called dojox.charting. Explore the basic customizations of Dojo charting, such as plot customization and axis customization. This article also covers the advanced parameters used for chart customization, such as ticks, gradient, and zooming.


The Dojo chart library

Dojo comes with an amazing charting library called dojox.charting. It supports many features, and new features are added constantly. Dojo's charting module provides a way to quickly and easily add attractive and functional dynamic charts and graphs to your web pages. All you need are some basic JavaScript skills and a copy of Dojo.

As with configuring any chart, you'll need to define plots, axes, and series data. Plots describe how data is to be visualized. Axes describe the dimensions of data that are being visualized and include things like specifying labels. A series describes the data itself that the chart will visualize. Figure 1 shows an overview of the Dojo charting library.

Figure 1. Dojo chart library
An image showing the nine chart types available in the Dojo chart library

The Dojo chart library supports many charting types, including: column, bar, area, line, pie, bubble, candlestick, and scatter. This article focuses on customizing the four most popular charts: column, bar, area, and line.


Axis customization

Axis is a very flexible object with numerous parameters for customization. At first it can be confusing, so we'll group the parameters as follows:

  • Ticks
  • Scaler
  • Position
  • Labels
  • Zooming

Ticks

Ticks primarily include major, minor, and micro ticks. Labels are available on major and minor ticks. The code below creates an axis with full features.

chart.addAxis("x",{ 
    majorLabels: true, majorTicks: true, majorTick: {length:10},
    minorLabels: true, minorTicks:true, minorTick:{length:6},
    microTicks: true, microTick:{length:3},
    majorTickStep:100,
    minorTickStep:20,
    microTickStep:2
})

The axis structure in Figure 2 helps explain the code above.

Figure 2. Axis structure
An image showing the distance and difference between ticks

Scaler

Scaler for axis is used to identify the numeric range of the axis. The range identifier has the following priorities:

  • From-to is higher than includeZero. From-to is used to define the visible range of axis.
  • includeZero is higher than min or max
  • Min and max are used to define the visible range of the plot.

The code below shows an example.

chart.addAxis("x",{
includeZero: false, 
from: 10,to: 140,
min: 20, max: 120
})

Figure 3 shows a chart with From-To and Min-Max ranges.

Figure 3. From-To range and Min-Max range
Bar chart showing From-to range and Min-max range. From-to range is greater than min-max range

Position

Axis position refers to its place in relation to the plot area. In the code below, a horizontal axis Y is on the left, starting from the bottom.

chart.addAxis("y",{
    vertical:true, 
    leftBottom: true
})

Figure 4 shows an example with the Y axis on the right.

Figure 4. Y axis on the right
A stacked area chart showing the Y axis on the right

Labels

Customizing labels is a very popular action. You can manually define the labels, or use a function to create a new label based on an original. The code below shows an example of manually defining labels.

chart.addAxis("y", {
    vertical: true,
	labels: [
        {value: 0, text: ""},
		{value: 1, text: "Jan"}, 
        {value: 2, text: "Feb"},
		{value: 3, text: "Mar"}, 
        {value: 4, text: "Apr"},
		{value: 5, text: "May"}, 
        {value: 6, text: "Jun"}
]
});

Figure 5 shows the chart resulting from the code above.

Figure 5. Manually define labels on Y axis
A bar chart showing labels along the Y axis for abbreviated months of the year

Or, you can create labels by using the function parameter, as shown below.

chart.addAxis("x", {
	labelFunc:function(value){return value+" cm";}
});

Figure 6 shows the resulting chart.

Figure 6. Create labels by given function
A bar chart showing labels along the X axis for centimeter measurements

Rotation is a new feature of labels in Dojo 1.5. Rotation can be useful to avoid labels overlapping. You can rotate the label with a certain angle in degrees. The code below will rotate the labels clockwise on the X axis at 30 degrees and counter-clockwise on the Y axis at 30 degrees. Figure 7 shows the results.

chart.addAxis("x", {
	labels: [
		{value: 0, text: "zero"},
		{value: 2, text: "two"},
		{value: 4, text: "four"}
	],
	rotation: 30
}).addAxis("y", {
		vertical: true,
        labels: [
            {value: 0, text: ""},
			{value: 1, text: "January"},
            {value: 2, text: "February"},
			{value: 3, text: "March"}, 
            {value: 4, text: "April"},
			{value: 5, text: "May"}, 
            {value: 6, text: "June"}
		],
		rotation: -30
})
Figure 7. Label rotation
A bar chart showing lables on both the X and Y axes rotated so none overlap

Zooming

Axis zooming is another new feature in Dojo 1.5. You can zoom in to an axis to see part of a chart more clearly. Axis zooming is a method of chart.

The following code describes a chart that will show the plots between 50 to 80 on the X axis.

chart.zoomIn("x",[50,80]);

You can view a Dojo demonstration of axis zoom control (see Resources).


Customizing columns and bars

A column chart is also called a histogram. It uses columns to show the quantities of each category with a vertical ruler to mark quantity. You can think of a bar chart as a horizontal histogram. Customizing column and bar charts involves gaps, animation, and types.

Gap

When customizing the gap between columns or bars in pixels, the default is 0px. The code below shows an example. Figure 8 shows the resulting gap between the columns.

new dojox.charting.Chart2D("chart").addPlot("default",{
        type: "Columns",
        gap:8
})
Figure 8. Gap between columns
A column chart showing a gap of 8 between columns

Animation

You can animate columns or bars in a specific place after a certain duration. Animation is not triggered by default. With the example code below, the columns will animate to place after 1000ms.

new dojox.charting.Chart2D("chart").addPlot("default",{
        type: "Columns",
        animate:{duration: 1000}
})

You can view a Dojo animation of clustered columns with positive and negative values, a readable theme, and a one-second animate-in (see Resources).

Plot type

There are three major types of column and bar charts: default, clustered, and stacked. More detailed types include: Columns, Bars, ClusteredColumns, ClusteredBars, StackedColumns, and StackedBars.

  • Default: Contains only one data series. The following code shows an example.
    chart.addPlot("default",{type:"Columns"})
    chart.addPlot("default",{type:"Bars"})

    Figure 9 shows the resulting default column and bar charts.

    Figure 9a. Default type columns and bars
    A default bar chart, showing ticks and labels on both axes
    Figure 9b. Default type columns and bars (continued)
    A default column chart, showing ticks and lables on both axes
  • Clustered: Allows you to add more than one data series. The columns and bars will be grouped side by side and usually separated by gaps. The following code indicates clustered bars containing three data categories.
    chart.addPlot("default",{type:"ClusteredBars", gap: 2}).
    addSeries("A",[1,3,5,7,2,4,6]).
    addSeries("B",[2,4,6,8,3,5,7]).
    addSeries("C",[6,4,2,7,5,3,1])
    Figure 10a. Clustered columns and bars
    A clustered bar chart, showing clustered bars of various colors and ticks and labels
    Figure 10b. Clustered columns and bars (continued)
    A clustered column chart, showing clustered columns of various colors and ticks and labels
  • Stacked: Contains multiple data series (similar to clustered columns and bars). However, in the stacked type, clustered columns are grouped as a singe column or bar. The following code is for stacked columns with three data series.
    chart.addPlot("default", {type:"StackedColumns",gap:2}).
    addSeries("A",[1,3,5,7,2,4,6]).
    addSeries("B",[2,4,6,8,3,5,7]).
    addSeries("C",[6,4,2,7,5,3,1])
    Figure 11a. Stacked columns and bars
    A stacked bar chart showing stacked bars of various colors and ticks and labels
    Figure 11b. Stacked columns and bars (continued)
    A stacked column chart showing stacked columns of various colors and ticks and labels

Customizing area and lines

Area and lines are commonly used when charting, and they have many similarities. You can think of area as "filled" lines. Any customization you do for lines can also be used with area.

Area and lines support the stacked and default plot types. The stacked plot type is very similar to columns and bars. Figure 12 shows an example of stacked areas.

Figure 12. Stacked areas
A stacked areas chart that looks like waves in the ocean with various colors

Customization of area and lines is largely focused on the style of line and marker.

Line style

Area and line charts apply "tensioning" for smoothing the lines. There are two ways to apply the tensioning: specified number and flags of "X", "x", and "S".

Using flags is the recommended method because it provides a more accurate smoothing algorithm (rather than a simple bezier curve with the given number).

chart.addPlot("default", { type: "Area", tension:"S" })

Figure 13 shows the area with a smoothing line.

Figure 13. Area with smoothing line
An area chart with a smoothing line

Marker style

An area and line chart let you draw markers on the line to point out the data series items. Usually you'd just set markers to true, as shown in the code below .

chart.addPlot("default", {
type: "Lines",
markers: true,
tension:"S",
})

Figure 14 shows a line chart with markers.

Figure 14. Line chart with markers
A line chart showing three lines with markers on each

Area and line charting supports a shadow feature that can specify the orientation and color of a shadow. The code snippet below uses the shadow feature.

chart.addPlot("default", {
	type: "StackedLines",
	markers: true,
	shadow:  {dx: 1, dy: 1, width: 2}
})

Figure 15 shows a line chart with the shadow effect.

Figure 15. Line chart with shadow effect
A line chart showing three lines with markers and a pink shadow as the background

Summary

In this article you learned about customizing the axis in Dojo charting. You learned to customize the four most commonly used charting types: column, bar, area, and line.

Stay tuned for an upcoming article on advanced Dojo charting customization, which will delve into other common charting types and themes.

Resources

Learn

Get products and technologies

Discuss

Comments

developerWorks: Sign in

Required fields are indicated with an asterisk (*).


Need an IBM ID?
Forgot your IBM ID?


Forgot your password?
Change your password

By clicking Submit, you agree to the developerWorks terms of use.

 


The first time you sign into developerWorks, a profile is created for you. Information in your profile (your name, country/region, and company name) is displayed to the public and will accompany any content you post, unless you opt to hide your company name. You may update your IBM account at any time.

All information submitted is secure.

Choose your display name



The first time you sign in to developerWorks, a profile is created for you, so you need to choose a display name. Your display name accompanies the content you post on developerWorks.

Please choose a display name between 3-31 characters. Your display name must be unique in the developerWorks community and should not be your email address for privacy reasons.

Required fields are indicated with an asterisk (*).

(Must be between 3 – 31 characters.)

By clicking Submit, you agree to the developerWorks terms of use.

 


All information submitted is secure.

Dig deeper into Web development on developerWorks


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=1
Zone=Web development
ArticleID=587668
ArticleTitle=Customizing charts using Dojo
publish-date=11162010