Dojo Charting

This tutorial is for Dojo 1.8 and may be out of date.

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!)

Configuring dojox/charting

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

As with any Dojo Toolkit resource, use require to load dependencies. Two dependencies that the developer will always need are the chart resource and the desired theme:

require([
	 // Require the basic 2d chart resource
	"dojox/charting/Chart",

	// Require the theme of our choosing
	"dojox/charting/themes/Claro",

], function(Chart, theme){
	// ....
}

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>

Note that in 1.7+, the Chart2D "catch-all" module which loads all axis and plot types is deprecated. It is still available for use, but the preferred approach is to use Chart and include just the axis and plot modules you need.

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
	data-dojo-type="dojox/charting/widget/Chart"
	data-dojo-props="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 programmatically. dojox/charting does not yet fully support the data-dojo attributes introduced in Dojo 1.6+.

Programmatically

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

<script>
	require([
		 // load modules...
	], function(Chart, theme, PiePlot){

		// Create the chart within it's "holding" node
		var pieChart = new Chart("chartNode");

		// Set the theme
		pieChart.setTheme(theme);

		// Add the only/default plot
		pieChart.addPlot("default", {
			type: PiePlot, // our plot2d/Pie module reference as type value
			radius: 200,
			fontColor: "black",
			labelOffset: -20
		});

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

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

	});
</script>

<!-- create the chart -->
<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 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:

define([
	// Require the SimpleTheme class which is used by all non-gradient based themes
	"../SimpleTheme",
	"./common"
], function(Theme, themes){

	themes.MiamiNice=new Theme({
		colors: [
			"#7f9599",
			"#45b8cc",
			"#8ecfb0",
			"#f8acac",
			"#cc4482"
		]
	});

	return themes.MiamiNice;
});

More complex themes are also available, by requiring dojox/charting/themes/Theme. One example would be the "Claro" theme which uses gradients and customized font settings:

define(["../Theme", "dojox/gfx/gradutils", "./common"], function(Theme, gradutils, themes){
	// created by Tom Trenka

	var g = Theme.generateGradient,
		defaultFill = {type: "linear", space: "shape", x1: 0, y1: 0, x2: 0, y2: 100};

	themes.Claro = new 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 = gradutils.reverse(theme.series.fill);
		}
		return theme;
	};

	return themes.Claro;
});

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([
	 // Require the basic 2d chart resource: Chart2D
	"dojox/charting/Chart",

	// Require the theme of our choosing
	"dojox/charting/themes/Claro",

], function(Chart, theme){

	// Create the chart within it's "holding" node
	var pieChart = new Chart("chartNode");

	// Set the theme
	pieChart.setTheme(theme);

	// ...
});

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"
});

When using dojox/charting/Chart, you need to require each plot-type module you wish to use.

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 in the Dojo reference guide.

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([
	 // Require the basic chart class
	"dojox/charting/Chart",

	// Require the theme of our choosing
	"dojox/charting/themes/Tom",

	// Charting plugins:

	// 	We want to plot Lines
	"dojox/charting/plot2d/Lines",

	//	We want to use Markers
	"dojox/charting/plot2d/Markers",

	//	We'll use default x/y axes
	"dojox/charting/axis2d/Default",

	// Wait until the DOM is ready
	"dojo/domReady!"
], function(Chart, theme) {
	// When the DOM is ready and resources are loaded...

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

	// Create the chart within it's "holding" node
	var chart = new Chart("chartNode");

	// Set the theme
	chart.setTheme(theme);

	// 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>

<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([
	 // Require the basic 2d chart resource: Chart2D
	"dojox/charting/Chart",

	// Require the theme of our choosing
	"dojox/charting/themes/Dollar",

	// Charting plugins:

	// 	We want to plot StackedAreas
	"dojox/charting/plot2d/StackedAreas",

	//	We want to use Markers
	"dojox/charting/plot2d/Markers",

	//	We'll use default x/y axes
	"dojox/charting/axis2d/Default",

	// Wait until the DOM is ready
	"dojo/domReady!"
], function(Chart, theme) {

	// 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];

	// Create the chart within it's "holding" node
	var chart = new Chart("chartNode");

	// Set the theme
	chart.setTheme(theme);

	// 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>

<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([
	 // Require the basic chart class
	"dojox/charting/Chart",

	// Require the theme of our choosing
	"dojox/charting/themes/MiamiNice",

	// Charting plugins:

	// 	We want to plot Columns
	"dojox/charting/plot2d/Columns",

	//	We want to use Markers
	"dojox/charting/plot2d/Markers",

	//	We'll use default x/y axes
	"dojox/charting/axis2d/Default",

	// Wait until the DOM is ready
	"dojo/domReady!"
], function(Chart, theme) {

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

	// Create the chart within it's "holding" node
	var chart = new Chart("chartNode");

	// Set the theme
	chart.setTheme(theme);

	// 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>

<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>
require([
	// Require the basic chart class
	"dojox/charting/Chart",

	// Load the Legend widget class
	"dojox/charting/widget/Legend"
], function(Chart, Legend) {
	// Create the chart within it's "holding" node
	var chart = new Chart("chartNode");

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

<script>
require([
	// Require the basic chart class
	"dojox/charting/Chart",

	// Load the Tooltip class
	"dojox/charting/action2d/Tooltip"
], function(Chart, Tooltip) {
	// Create the chart within it's "holding" node
	var chart = new Chart("chartNode");

	var tip = new Tooltip(chart, "default");
});
</script>

Include the Dijit theme 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 MoveSlice(pieChart, "default");

// Magnifies a marker: use the "chart" chart, and "default" plot
var magnify = new 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 highlight = new Highlight(chart, "default");

Monthly Sales with Legend, Tooltips, and Magnify

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

<link rel="stylesheet" href="/path/to/dijit/themes/claro/claro.css" media="screen">
<script>
require([
	 // Require the basic chart class
	"dojox/charting/Chart",

	// Require the theme of our choosing
	"dojox/charting/themes/Claro",

	// 	We want to plot Lines
	"dojox/charting/plot2d/Lines",

	// Load the Legend, Tooltip, and Magnify classes
	"dojox/charting/widget/Legend",
	"dojox/charting/action2d/Tooltip",
	"dojox/charting/action2d/Magnify",

	//	We want to use Markers
	"dojox/charting/plot2d/Markers",

	//	We'll use default x/y axes
	"dojox/charting/axis2d/Default",

	// Wait until the DOM is ready
	"dojo/domReady!"
], function(Chart, theme, LinesPlot, Legend, Tooltip, Magnify) {

	// 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();

	// Create the chart within it's "holding" node
	var chart = new Chart("chartNode");

	// Set the theme
	chart.setTheme(theme);

	// Add the only/default plot
	chart.addPlot("default", {
		type: LinesPlot,
		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 Tooltip(chart,"default");

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

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

	// Create the legend
	var legend = new Legend({ chart: chart }, "legend");
});</script>

<div id="chartNode" style="width:800px;height:400px;"></div>
<div id="legend"></div>

View Demo

We are using Tooltips which are based on the Dijit Tooltip, therefore we need to make sure we load a Dijit theme stylesheet. In this example we loaded Claro.

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:

<link rel="stylesheet" href="/path/to/dijit/themes/claro/claro.css" media="screen">
<script>
require([
	 // Require the basic chart class
	"dojox/charting/Chart",

	// Require the theme of our choosing
	"dojox/charting/themes/Claro",

	// Charting plugins:

	// 	We want to plot a Pie chart
	"dojox/charting/plot2d/Pie",

	// Retrieve the Legend, Tooltip, and MoveSlice classes
	"dojox/charting/action2d/Tooltip",
	"dojox/charting/action2d/MoveSlice",

	//	We want to use Markers
	"dojox/charting/plot2d/Markers",

	//	We'll use default x/y axes
	"dojox/charting/axis2d/Default",

	// Wait until the DOM is ready
	"dojo/domReady!"
], function(Chart, theme, Pie, Tooltip, MoveSlice) {

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

	// Create the chart within it's "holding" node
	var chart = new Chart("chartNode");

	// Set the theme
	chart.setTheme(theme);

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

	// 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 Tooltip(chart,"default");

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

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

});
</script>

<div id="chartNode" style="width:800px;height:400px;"></div>

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:

<script>
require([
	 // Require the basic chart class
	"dojox/charting/Chart",

	// Require the theme of our choosing
	"dojox/charting/themes/MiamiNice",

	// 	We want to plot Columns
	"dojox/charting/plot2d/Columns",

	// Require the highlighter
	"dojox/charting/action2d/Highlight",

	//	We want to use Markers
	"dojox/charting/plot2d/Markers",

	//	We'll use default x/y axes
	"dojox/charting/axis2d/Default",

	// Wait until the DOM is ready
	"dojo/domReady!"
], function(Chart, theme, ColumnsPlot, Highlight) {

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

	// Create the chart within it's "holding" node
	var chart = new Chart("chartNode");

	// Set the theme
	chart.setTheme(theme);

	// Add the only/default plot
	chart.addPlot("default", {
		type: ColumnsPlot,
		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 Highlight(chart,"default");

	// Render the chart!
	chart.render();
});</script>
<div id="chartNode" style="width:800px;height:400px;"></div>

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: