Blog

Nov 9

Dojo Charting: Dive Into Theming

By on November 9, 2012 2:00 am

The previous installment of the Dive Into Dojo series shows how easy it is to Dive Into Dojo Charting. It comes with dozens of stylish themes you can effortlessly plug into any chart. But what if you want your charts to match your website’s design or business’ branding? No worries: Dojo’s charting library allows you to create custom themes!

dojo-chart-creation

Dive Into Dojo Charting Again

By on November 9, 2012 2:00 am

header

One of the most powerful pieces of Dojo is also one of the most underutilized: Charting.  The Dojo Charting library lives within the DojoX (extensions) branch of Dojo, and features numerous chart types, options, and a variety of themes. This post introduce you to the charting library and show you how you can take a mundane data collection and make it a beautiful visual chart in any modern web browser.

Dojo Charting: Actions and Tooltips

By on November 9, 2012 2:00 am

Actions are self-contained objects, which use events to implement certain effects when a user interact with a chart. In general they are designed to attract attention and indicate which charting element is selected, or to show additional information.

Dojo Charting: Legends

By on November 9, 2012 2:00 am

Legend

The Legend widget is one of the most popular features in Dojo charting. This widget was contributed by Chris Mitchell of IBM. It can handle all existing chart and plot types and supports horizontal and vertical modes.

legend

By default it uses the “legend” parameter of a series. It reverts to the “name” parameter if legend is not specified.

For a pie chart, the behavior is different: if the chart was specified with an array of numbers, it will use numbers. Otherwise it will check object properties in the following order: “legend”, “text”, and the numeric value.

legend2

The legend icons will change if you have more than one series. This is especially evident in Marker charts:

markers

Legends can be created programmatically as well. Just pass in the chart object instead of the chart id. The following code makes the Marker chart shown above:

require([
	"dojox/charting/Chart",
	"dojox/charting/widget/Legend",
	"dojox/charting/plot2d/Markers",
	"dojox/charting/themes/PlotKit/green"
], function(Chart, Legend, Markers, PlotKitGreen){

	var chart = new Chart("chartNode");
	chart.setTheme(PlotKitGreen);
	chart.addPlot("default", {type: "Markers"});
	chart.addSeries("Series A", [2.6, 1.8, 2, 1, 1.4, 0.7, 2]);
	chart.addSeries("Series B", [5.6, 1, 9, 11, 4.4, 8.7, 2]);
	chart.addSeries("Series C", [8.6, 6, 3, 6, 8, 6, 6]);
	chart.render();

	new Legend({chartRef:chart}, 'legendNode');
});

Further Reading

A Beginner’s Guide to Dojo Charting with AMD, Part 1 of 2

By on November 9, 2012 2:00 am

Welcome! If you are looking for a way to quickly and easily add great looking and functional charts and graphs to your web pages, you’ve found the right place. All you need is a tiny bit of JavaScript skills and a copy of Dojo.

In this two part guide, we look at how easy it is to get Dojo Charting up and running with version 1.8, and then examine in greater detail the options available for different looks for your charts. Today in Part 1, we start with a basic example and then examine all the options available in defining your plot type. Part 2 will cover the options available in defining the axes and data sets for your charts.

Jul 26

Dive Into Dojo Chart Theming

By on July 26, 2010 12:31 pm
This entry is part 2 of 4 in the series Dive Into Dojo
Notice: There is a newer version of this post available

The previous installment of the Dive Into Dojo series shows how easy it is to Dive Into Dojo Charting to get started with Dojo’s charting library. It comes with dozens of stylish themes you can effortlessly plug into any chart. But what if you want your charts to match your website’s design or business’ branding? No worries: Dojo’s charting library allows you to create custom themes!

Dojo Chart Themes

Mar 30

Introducing DojoX DataChart

By on March 30, 2009 12:00 am

The latest addition in the Dojo 1.3 release is the new dojox.charting class, DataChart. Its primary purpose is to make connecting a chart to a Data Store a simple process. There are also other benefits with DataChart: less parameters are needed to create a basic chart, and more defaults and convenience methods get you up and running quickly with Dojox Charting.