Customizing charts using Dojo

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

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 Related topics) 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

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

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.

- is higher than . - is used to define the visible range of axis. includeZero is higher than min or max

is higher than or 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

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

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

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

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

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 Related topics).

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

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 Related topics).

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 Figure 9b. Default type columns and bars (continued)

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 Figure 10b. Clustered columns and bars (continued)

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 Figure 11b. Stacked columns and bars (continued)

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

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

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

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

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.

Downloadable resources

Related topics