Dojo Charting

Presenting statistical data in a readable, eye-catching manner is important, but it can also be difficult. The dojox.charting system was created to alleviate those pains by allowing developers to create dynamic, unique, and functional charts from varying sets of data. In addition, dojox.charting provides numerous themes and chart types to allow developers to display their data any way they'd like. This tutorial will show you how to create basic charts with varying data, plots, axes, and themes.

Getting Started

Dojo's charting library lives within the dojox.charting resource. The dojox.charting collection is very unique in that it:

• Allows charts to be created with HTML (declaratively) or with JavaScript (programmatically)
• Works on almost all devices
• Can render charts in SVG, VML, Silverlight, and Canvas. An effort to allow SVGWeb rendering is also under way.
• Allows for the developer to decide which renderer to use
• Evaluates the client and uses an appropriate renderer based on what the client supports
• Creates charts with dojox.gfx, a powerful vector graphic library capable of making your charts animate in a wide variety of ways
• Comes packaged with dozens of attractive, diverse themes
• Allows for linear and radial gradients within chart themes (and even works in Internet Explorer!)

Before creating these wonderful charts, it's important to make chart resources available within the page.

Configuring dojox.charting

As with using any Dojo Toolkit resource, it's important that you use dojo.require to load any dependencies. Two dependencies that the developer will always need will be the chart resource and the desired theme:

// Require the basic 2d chart resource: Chart2D
dojo.require("dojox.charting.widget.Chart2D");

// Require the theme of our choosing
//"Claro", new in Dojo 1.6, will be used
dojo.require("dojox.charting.themes.Claro");

// Any plugins we choose to use would be required here as well...

If a specific rendering priority is preferred, it may be added to the dojoConfig object that's created before loading Dojo:

<script>
	dojoConfig = {
		parseOnLoad: true, //enables declarative chart creation
		gfxRenderer: "svg,silverlight,vml" // svg is first priority
	};
</script>
<script src="/path/to/dojo/dojo/dojo.js"></script>

With these minimal dependencies loaded, your application is now empowered to create charts!

Creating a Basic Chart

Declaratively

There are two ways to create a basic chart: declaratively and programmatically. Before creating the chart, however, it's important to first create/access data. The following data sample will be used for creating the basic chart:

// x and y coordinates used for easy understanding of where they should display
// Data represents website visits over a week period
chartData = [
	{ x: "1", y: "19021" },
	{ x: "1", y: "12837" },
	{ x: "1", y: "12378" },
	{ x: "1", y: "21882" },
	{ x: "1", y: "17654" },
	{ x: "1", y: "15833" },
	{ x: "1", y: "16122" }
];

With data properly formatted and available, a chart created declaratively would look like:

<!-- create the chart -->
<div dojoType="dojox.charting.widget.Chart2D" theme="dojox.charting.themes.Claro" id="viewsChart" style="width: 550px; height: 550px;">

	<!-- Pie Chart: add the plot -->
	<div class="plot" name="default" type="Pie" radius="200" fontColor="#000" labelOffset="-20"></div>

	<!-- pieData is the data source -->
	<div class="series" name="Last Week's Visits" array="chartData"></div>

</div>

View Demo

A pie chart using the Claro theme

With declarative chart creation, the main chart settings go within the container node. Plots and series get their own nodes with custom attributes containing chart settings, as would plugins and other chart pieces.

Important note: while it's certainly possible to create charts declaratively, it's highly recommended that developers create them programatically. dojox.charting does not yet fully support Dojo 1.6's new data-dojo attributes.

Programmatically

Programmatic chart creation requires a bit more code but provides more stability and control. The same chart would be created programmatically with the following code:

<script>
	// When the DOM is ready and resources are loaded...
	dojo.ready(function() {

		// Create the chart within it's "holding" node
		var pieChart = new dojox.charting.Chart2D("chartNode");

		// Set the theme
		pieChart.setTheme(dojox.charting.themes.Claro);

		// Add the only/default plot
		pieChart.addPlot("default", {
			type: "Pie",
			radius: 200,
			fontColor: "black",
			labelOffset: "-20"
		});

		// Add the series of data
		pieChart.addSeries("January",chartData);

		// Render the chart!
		pieChart.render();

	});
</script>

<!-- chart will go here -->
<div id="chartNode" style="width: 550px; height: 550px;"></div>

View Demo

The code above should give you a basic example of dojox.charting, but there's much more to chart creation than that. Let's dig deeper into dojox.charting and its capabilities.

Chart Themes

The Dojo charting library provides numerous themes for developers to choose from. Themes vary in visual complexity; some themes use solid hex colors while more complex chart themes use advanced logic to calculate linear and even radial gradients to enhance the their look. Themes can be found within the dojox.charting.themes resource. Themes are simply one JavaScript file with theme-specific data. The following is the code which creates the "Miami Nice" theme:

// "Provide" the resource
dojo.provide("dojox.charting.themes.MiamiNice");

// Require the Theme class which is used by all themes
dojo.require("dojox.charting.Theme");

// Create a basic new theme with a list of solid colors
(function(){
	var dxc=dojox.charting;
	dxc.themes.MiamiNice=new dxc.Theme({
		colors: [
			"#7f9599",
			"#45b8cc",
			"#8ecfb0",
			"#f8acac",
			"#cc4482"
		]
	});
})();

More complex themes are also available. One example would be the "Claro" theme which uses gradients and customized font settings:

dojo.provide("dojox.charting.themes.Claro");
dojo.require("dojox.gfx.gradutils");
dojo.require("dojox.charting.Theme");

// created by Tom Trenka
(function(){
	var dc = dojox.charting, themes = dc.themes, Theme = dc.Theme, g = Theme.generateGradient,
		defaultFill = {type: "linear", space: "shape", x1: 0, y1: 0, x2: 0, y2: 100};

	themes.Claro = new dc.Theme({
		chart: {
			fill:	   {
				type: "linear",
				x1: 0, x2: 0, y1: 0, y2: 100,
				colors: [
					{ offset: 0, color: "#dbdbdb" },
					{ offset: 1, color: "#efefef" }
				]
			},
			stroke:    {color: "#b5bcc7"}
		},
		plotarea: {
			fill:	   {
				type: "linear",
				x1: 0, x2: 0, y1: 0, y2: 100,
				colors: [
					{ offset: 0, color: "#dbdbdb" },
					{ offset: 1, color: "#efefef" }
				]
			}
		},
		axis:{
			stroke:	{ // the axis itself
				color: "#888c76",
				width: 1
			},
			tick: {	// used as a foundation for all ticks
				color:     "#888c76",
				position:  "center",
				font:      "normal normal normal 7pt Verdana, Arial, sans-serif", // labels on axis
				fontColor: "#888c76" // color of labels
			}
		},
		series: {
			stroke:  {width: 2.5, color: "#fff"},
			outline: null,
			font: "normal normal normal 7pt Verdana, Arial, sans-serif",
			fontColor: "#131313"
		},
		marker: {
			stroke:  {width: 1.25, color: "#131313"},
			outline: {width: 1.25, color: "#131313"},
			font: "normal normal normal 8pt Verdana, Arial, sans-serif",
			fontColor: "#131313"
		},
		seriesThemes: [
			{fill: g(defaultFill, "#2a6ead", "#3a99f2")},
			{fill: g(defaultFill, "#613e04", "#996106")},
			{fill: g(defaultFill, "#0e3961", "#155896")},
			{fill: g(defaultFill, "#55aafa", "#3f7fba")},
			{fill: g(defaultFill, "#ad7b2a", "#db9b35")}
		],
		markerThemes: [
			{fill: "#2a6ead", stroke: {color: "#fff"}},
			{fill: "#613e04", stroke: {color: "#fff"}},
			{fill: "#0e3961", stroke: {color: "#fff"}},
			{fill: "#55aafa", stroke: {color: "#fff"}},
			{fill: "#ad7b2a", stroke: {color: "#fff"}}
		]
	});

	themes.Claro.next = function(elementType, mixin, doPost){
		var isLine = elementType == "line";
		if(isLine || elementType == "area"){
			// custom processing for lines: substitute colors
			var s = this.seriesThemes[this._current % this.seriesThemes.length],
				m = this.markerThemes[this._current % this.markerThemes.length];
			s.fill.space = "plot";
			if(isLine){
				s.stroke  = { width: 4, color: s.fill.colors[0].color};
			}
			m.outline = { width: 1.25, color: m.fill };
			var theme = Theme.prototype.next.apply(this, arguments);
			// cleanup
			delete s.outline;
			delete s.stroke;
			s.fill.space = "shape";
			return theme;
		}
		else if(elementType == "candlestick"){
			var s = this.seriesThemes[this._current % this.seriesThemes.length];
			s.fill.space = "plot";
			s.stroke  = { width: 1, color: s.fill.colors[0].color};
			var theme = Theme.prototype.next.apply(this, arguments);
			return theme;
		}
		return Theme.prototype.next.apply(this, arguments);
	};

	themes.Claro.post = function(theme, elementType){
		theme = Theme.prototype.post.apply(this, arguments);
		if((elementType == "slice" || elementType == "circle") && theme.series.fill && theme.series.fill.type == "radial"){
			theme.series.fill = dojox.gfx.gradutils.reverse(theme.series.fill);
		}
		return theme;
	};
})();

Whether the theme you implement (or create) is basic or complex, implementing the theme within your chart couldn't be easier. Simply require the resource and call "setTheme" on the chart:

// Require the theme of our choosing
dojo.require("dojox.charting.themes.Claro");

// Create a chart
var chart = new dojox.charting.Chart2D("chartNode");

// Set the theme
chart.setTheme(dojox.charting.themes.Claro);

You may use any number of themes on a given page. Want to learn how to create a custom chart theme for your web application? Read Dive Into Dojo Chart Theming.

Chart Components: Plots, Axes, Series

Defining a basic chart and implementing its theme is quite simple. The real work comes in when defining plots, axes, and series. Each piece serves its own distinct, important purpose.

Plots

One of the main focuses of plots within dojox.charting is defining the type of chart to be added and providing values for the specific chart type's settings. dojox.charting features numerous 2D charts including:

• Default - Universal line chart capable of rendering lines, fill areas under those lines, and placing markers at data points. This plot type is used if no plot type was specified when adding it to a chart.
• Lines - Basic line chart. Uses Default.
• Areas - Area under data line(s) will be filled. Uses Default.
• Markers - Lines with markers. Uses Default.
• MarkersOnly - Markers, sans lines. Uses Default.
• Stacked - Data sets charted in relation to the previous data set. Extension of Default.
• StackedLines - Stacked data sets using lines. Uses Stacked.
• StackedAreas - Stacked data sets with filled areas under chart lines. Uses Stacked.
• Bars - Horizontal bars.
• ClusteredBars - Horizontal bars with clustered data sets. Uses Bars.
• StackedBars - Stacked data sets with horizontal bars. Uses Bars.
• Columns - Vertical bars.
• ClusteredColumns - Vertical bars with clustered data sets. Uses Columns.
• StackedColumns - Stacked data sets with vertical bars. Uses Columns.
• Pie - The traditional pie chart.
• Scatter - Similar to MarkerOnly, yet capable of charting using gradient fields.
• Grid - For adding a grid layer to your chart.

You can see each chart type in action by visiting Dojo's nightly charting tests.

Plots are added to a chart with the chart's addPlot method, passing it the chart's name (usually "default") and plot-specific options:

// Add the default plot
chart.addPlot("default",{
	// Add the chart type
	type: "Pie"
});

Some of the standard plot options include:

• type - The chart type (Pie, Bars, Scatter, etc.)
• lines - Represents if lines should be added within the chart
• markers - Represents if markers should be added to data points within the chart
• areas - Represents if areas within the chart should be shaded
• shadows - Represents if shadows should be added to lines within the plot (ex: {dx:4, dy:4})
• tension - Adds curves to lines within plots for added smoothness. Values can be:
  • X - Cubic bezier lines
  • x - Similar to "X" but assumes that the point set is closed (a loop). It can be used when plotting true XY data.
  • S - Quadratic bezier lines.
• gap - Represents the number of pixels between bars

Each chart type may have its own custom options. The Pie plot type, for example, has a radius setting which defines the size of the chart's radius:

// Add the default plot
chart.addPlot("default",{
	// Add the chart type
	type: "Pie",
	// Add the radius size because it's a pie chart
	radius: 200 //pixels
});

Before creating your chart, take the time to visit the dojox.charting Reference Guide to see what special settings and customizations are available for the chart type you'd prefer.

Axes

Most charts feature axes and many of those are the traditional x and y setup. An axis may be horizontal (the default) or vertical. Axes are added to charts with addAxis method. The following code snippet adds x and y axes to a chart:

// Add the X axis
chart.addAxis("x");
// Ad the Y axis
chart.addAxis("y",{
	vertical: true // y is vertical!
});

You may also create custom axes on your chart:

// Add a custom "dw" axis
chart.addAxis("dw",{
	vertical: true,
	leftBottom: false
});

Some of the standard axis options include:

• fixUpper - Aligns chart ticks (can be "major", "minor", "micro", and "none")
• fixLower - Aligns chart ticks (can be "major", "minor", "micro", and "none")
• leftBottom - Determines the side of the chart the axis is placed (default is true)
• min - The minimum number an axis can start at
• max - The maximum number an axis can end at

You can learn more about an axis' settings including customization of colors, fonts, stepping, and precision here.

Series

This element is simply a series of data to be rendered to the chart. A series is added to the chart with the addSeries method. The addSeries method accepts three arguments:

• name - The name of the series. Also represents the series label when the Legend plugin is used.
• data - The array of data
• options An object containing series options, which may include:
  • stroke - Color and width of lines (ex: { color:"red", width: 2 })
  • fill - Fill color of bar / line / pie piece

Adding a series can be as easy as:

// Add a simple axis to the chart
chart.addSeries("Visits",[10,20,30,40,50],{
	stroke: {
		color: "blue",
		width: 3
	},
	fill: "#123456"
});

A multi-axes series of data would look like:

// Add a multi-axes data series to the chart
chart.addSeries("Visits",[
	{ x: 1, y: 200 },
	{ x: 2, y: 185 },
	// and so on...
],{
	stroke: {
		color: "blue",
		width: 3
	},
	fill: "#123456"
});

A chart can have any number of overlapping series as the developer would like.

dojox.charting Examples

With the pieces of dojox.charting defined, it's time to create some basic charts.

Line Chart: Monthly Sales

The Monthly Sales chart is a lines chart which features multiple axes and the "Tom" theme.

<script>
// Require the basic 2d chart resource: Chart2D
dojo.require("dojox.charting.Chart2D");

// Require the theme of our choosing
//"Claro", new in Dojo 1.6, will be used
dojo.require("dojox.charting.themes.Tom");

// Define the data
var chartData = [10000,9200,11811,12000,7662,13887,14200,12222,12000,10009,11288,12099];

// When the DOM is ready and resources are loaded...
dojo.ready(function() {

	// Create the chart within it's "holding" node
	var chart = new dojox.charting.Chart2D("chartNode");

	// Set the theme
	chart.setTheme(dojox.charting.themes.Tom);

	// Add the only/default plot
	chart.addPlot("default", {
		type: "Lines",
		markers: true
	});

	// Add axes
	chart.addAxis("x");
	chart.addAxis("y", { min: 5000, max: 15000, vertical: true, fixLower: "major", fixUpper: "major" });

	// Add the series of data
	chart.addSeries("SalesThisDecade",chartData);

	// Render the chart!
	chart.render();

});
</script>
<!-- create the DOM node for the chart -->
<div id="chartNode" style="width:800px;height:400px;"></div>

View Demo

A line chart using the Tom theme

Stacked Areas Chart: Monthly Sales

This chart builds on the first chart but adds a second axes to show multiple data sets. This chart also uses the Dollar theme.

<script>

	// Require the basic 2d chart resource: Chart2D
	dojo.require("dojox.charting.Chart2D");

	// Require the theme of our choosing
	//"Claro", new in Dojo 1.6, will be used
	dojo.require("dojox.charting.themes.Dollar");

	// Define the data
	var chartData = [10000,9200,11811,12000,7662,13887,14200,12222,12000,10009,11288,12099];
	var chartData2 = [3000,12000,17733,9876,12783,12899,13888,13277,14299,12345,12345,15763];

	// When the DOM is ready and resources are loaded...
	dojo.ready(function() {

		// Create the chart within it's "holding" node
		var chart = new dojox.charting.Chart2D("chartNode");

		// Set the theme
		chart.setTheme(dojox.charting.themes.Dollar);

		// Add the only/default plot
		chart.addPlot("default", {
			type: "StackedAreas",
			markers: true
		});

		// Add axes
		chart.addAxis("x");
		chart.addAxis("y", { min: 5000, max: 30000, vertical: true, fixLower: "major", fixUpper: "major" });

		// Add the series of data
		chart.addSeries("Monthly Sales - 2010",chartData);
		chart.addSeries("Monthly Sales - 2009",chartData2);

		// Render the chart!
		chart.render();

	});
</script>
<!-- create the DOM node for the chart -->
<div id="chartNode" style="width:800px;height:400px;"></div>

View Demo

A stacked areas chart using the Dollar theme

Columns Chart: Monthly Sales

This chart builds on the original Line chart but instead uses columns. A 5-pixel gap is placed between columns; the MiamiNice theme is used.

<script>

	// Require the basic 2d chart resource: Chart2D
	dojo.require("dojox.charting.Chart2D");

	// Require the theme of our choosing
	//"Claro", new in Dojo 1.6, will be used
	dojo.require("dojox.charting.themes.MiamiNice");

	// Define the data
	var chartData = [10000,9200,11811,12000,7662,13887,14200,12222,12000,10009,11288,12099];

	// When the DOM is ready and resources are loaded...
	dojo.ready(function() {

		// Create the chart within it's "holding" node
		var chart = new dojox.charting.Chart2D("chartNode");

		// Set the theme
		chart.setTheme(dojox.charting.themes.MiamiNice);

		// Add the only/default plot
		chart.addPlot("default", {
			type: "Columns",
			markers: true,
			gap: 5
		});

		// Add axes
		chart.addAxis("x");
		chart.addAxis("y", { vertical: true, fixLower: "major", fixUpper: "major" });

		// Add the series of data
		chart.addSeries("Monthly Sales",chartData);

		// Render the chart!
		chart.render();

	});

</script>
<!-- create the DOM node for the chart -->
<div id="chartNode" style="width:800px;height:400px;"></div>

View Demo

A column chart using the MiamiNice theme

Charting Plugins

The dojox.charting library provides functional and aesthetically pleasing plugins to enhance your forms.

Legend

Charts often include legends to further clarify the data provided within the chart. Using the dojox.charting.widget.Legend is easy: require the resource and create an instance, assigning it a chart:

<script>
//this legend is created within an element with a "legend1" ID.
var legend1 = new dojox.charting.widget.Legend({ chart: chart }, "legend");
</script>
<!-- create the DOM node for the chart -->
<div id="chartNode" style="width:800px;height:400px;"></div>
<!-- create the DOM node for the legend -->
<div id="legend"></div>

Tooltip

The Tooltip plugin sheds light on values when hovering over marks and chart pieces, depending on the chart type. Using the Tooltip plugin is just as easy as using the Legend plugin; simply include the plugin resource and assign a new instance to the chart and plot:

var tip = new dojox.charting.action2d.Tooltip(chart1, "default");

Include the Dijit them of your choice to style your tooltips. Also note that the Tooltip plugin must be assigned to the chart before the render method is called on the chart.

MoveSlice and Magnify

The MoveSlice and Magnify plugins use a touch of animation to react to the mouse's mouseover event. MoveSlice moves a pie chart piece and Magnify slightly enlarges chart markers. Both are implemented by creating a new instance and passing the chart and plot to it:

// Moves a pie slice: use the "pieChart" chart, and "default" plot
var slice = new dojox.charting.action2d.MoveSlice(pieChart, "default");

// Magnifies a marker: use the "chart" chart, and "default" plot
var magnify = new dojox.charting.action2d.Magnify(chart, "default");

Like the Tooltip plugin, the MoveSlice and Magnify plugins must be assigned to the chart before the render method is called on the chart.

Highlight

The Highlight plugin changes the color of an area when the mouse enters the area:

// Highlights an area: use the "chart" chart, and "default" plot
var magnify = new dojox.charting.action2d.Highlight(chart, "default");

Monthly Sales with Legend, Tooltips, and Magnify

Let's add the Legend, Tooltip, and Magnify plugin to a line chart:

// Require the basic 2d chart resource: Chart2D
dojo.require("dojox.charting.Chart2D");

// Retrieve the Legend, Tooltip, and Magnify classes
dojo.require("dojox.charting.widget.Legend");
dojo.require("dojox.charting.action2d.Tooltip");
dojo.require("dojox.charting.action2d.Magnify");

// Require the theme of our choosing
//"Claro", new in Dojo 1.6, will be used
dojo.require("dojox.charting.themes.Claro");

// Define the data
var chartData = [10000,9200,11811,12000,7662,13887,14200,12222,12000,10009,11288,12099];
var chartData2 = [3000,12000,17733,9876,12783,12899,13888,13277,14299,12345,12345,15763];
var chartData3 = [3000,12000,17733,9876,12783,12899,13888,13277,14299,12345,12345,15763].reverse();

// When the DOM is ready and resources are loaded...
dojo.ready(function() {

	// Create the chart within it's "holding" node
	var chart = new dojox.charting.Chart2D("chartNode");

	// Set the theme
	chart.setTheme(dojox.charting.themes.Claro);

	// Add the only/default plot
	chart.addPlot("default", {
		type: "Lines",
		markers: true
	});

	// Add axes
	chart.addAxis("x");
	chart.addAxis("y", { min: 5000, max: 30000, vertical: true, fixLower: "major", fixUpper: "major" });

	// Add the series of data
	chart.addSeries("Monthly Sales - 2010",chartData);
	chart.addSeries("Monthly Sales - 2009",chartData2);
	chart.addSeries("Monthly Sales - 2008",chartData3);

	// Create the tooltip
	var tip = new dojox.charting.action2d.Tooltip(chart,"default");

	// Create the magnifier
	var mag = new dojox.charting.action2d.Magnify(chart,"default");

	// Render the chart!
	chart.render();

	// Create the legend
	var legend = new dojox.charting.widget.Legend({ chart: chart }, "legend");
});

View Demo

A line chart with a legend, tooltips, and magify enabled, using the Claro theme

Monthly Sales Pie Chart with MoveSlice

Add a bit of dynamism to your Pie Chart with MoveSlice:

// Require the basic 2d chart resource: Chart2D
dojo.require("dojox.charting.Chart2D");

// Retrieve the Legend, Tooltip, and MoveSlice classes
dojo.require("dojox.charting.action2d.Tooltip");
dojo.require("dojox.charting.action2d.MoveSlice");

// Require the theme of our choosing
//"Claro", new in Dojo 1.6, will be used
dojo.require("dojox.charting.themes.Claro");

// Define the data
var chartData = [10000,9200,11811,12000,7662,13887,14200,12222,12000,10009,11288,12099];

// When the DOM is ready and resources are loaded...
dojo.ready(function() {

	// Create the chart within it's "holding" node
	var chart = new dojox.charting.Chart2D("chartNode");

	// Set the theme
	chart.setTheme(dojox.charting.themes.Claro);

	// Add the only/default plot
	chart.addPlot("default", {
		type: "Pie",
		markers: true
	});

	// Add axes
	chart.addAxis("x");
	chart.addAxis("y", { min: 5000, max: 30000, vertical: true, fixLower: "major", fixUpper: "major" });

	// Add the series of data
	chart.addSeries("Monthly Sales - 2010",chartData);

	// Create the tooltip
	var tip = new dojox.charting.action2d.Tooltip(chart,"default");

	// Create the slice mover
	var mag = new dojox.charting.action2d.MoveSlice(chart,"default");

	// Render the chart!
	chart.render();
});

View Demo

A pie chart with MoveSlice, using the Claro theme

Monthly Sales with Highlights

The Highlight plugin would look great with the Columns chart:

// Require the basic 2d chart resource: Chart2D
dojo.require("dojox.charting.Chart2D");

// Require the highlighter
dojo.require("dojox.charting.action2d.Highlight");

// Require the theme of our choosing
dojo.require("dojox.charting.themes.MiamiNice");

// Define the data
var chartData = [10000,9200,11811,12000,7662,13887,14200,12222,12000,10009,11288,12099];

// When the DOM is ready and resources are loaded...
dojo.ready(function() {

	// Create the chart within it's "holding" node
	var chart = new dojox.charting.Chart2D("chartNode");

	// Set the theme
	chart.setTheme(dojox.charting.themes.MiamiNice);

	// Add the only/default plot
	chart.addPlot("default", {
		type: "Columns",
		markers: true,
		gap: 5
	});

	// Add axes
	chart.addAxis("x");
	chart.addAxis("y", { vertical: true, fixLower: "major", fixUpper: "major" });

	// Add the series of data
	chart.addSeries("Monthly Sales",chartData);

	// Highlight!
	new dojox.charting.action2d.Highlight(chart,"default");

	// Render the chart!
	chart.render();

});

View Demo

A column chart with highlight, using the MiamiNice theme

Conclusion

The Dojo Toolkit provides a complete charting library capable of creating elegant, eye-catching, and dynamic charts of various types. dojox.charting is unmatched by other charting libraries in flexibility, functionality, and extendability. Don't serve your data to users in a boring way -- dress up your data with dojox.charting!

dojox.charting Resources

Looking for more detail about Dojo's charting library? Check out these great resources:

• Advanced Charting with Dojo
• dojox.charting Reference Guide
• Theme Preview
• Dive Into Dojo Charting
• Dive Into Dojo Chart Theming
• A Beginner’s Guide to Dojo Charting, Part 1 of 2
• A Beginner’s Guide to Dojo Charting, Part 2 of 2