Typings for dojox/gfx

By on April 25, 2017 10:02 am

dojox/gfx is Dojo 1.x’s vector graphics library, with support for SVG, Canvas, and other legacy rendering environments through a drawing API based on the semantics of SVG. This API also provides the foundation for dojox/charting. Often the biggest challenge in working with vector graphics is the large number of possible configuration settings and permutations.

TypeScript makes it easier to leverage auto-complete within an editor. We’ve been working for a while to add and maintain typings for Dojo 1.x. One of SitePen’s support clients kindly suggested that it would be very valuable to put gfx and TypeScript together, and happily sponsored our efforts in making this happen!

JSConf 2014 Adventures

By on June 13, 2014 12:27 pm

JSConf 2014Warm weather, ocean water, and sunburn. Yes, I just attended a JavaScript conference! JSConf is a three-day conference that has talks by a number of great speakers, split up with a “choose-your-own-adventure” day in the middle. The talks covered a wide variety of topics, from front end tooling to JavaScript robotics.

The first day of the conference had many great talks. The one that stood out the most to me was the User Interface Algorithms talk by Mark DiMarco. He described Voronoi Diagrams and, using The New York Times’ 512 Paths to the White House page, shows how they are used to determine which path to highlight in a tree based on the mouse position. He then examined the Amazon drop-down menu and explained how it knows when to keep submenus open.

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!


Dive Into Dojo Charting Again

By on November 9, 2012 2:00 am


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: Zooming, Scrolling, and Panning

By on November 9, 2012 2:00 am

Zooming, scrolling, and panning of charts is a more complex task than than one might expect due to the little-known fact that Dojo Charting can stack multiple plots per chart and can show multiple independent axes on all 4 sides of the chart. These problems were solved with the following API in the chart object:

Dojo Charting: Legends

By on November 9, 2012 2:00 am


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.


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.


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


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:

], function(Chart, Legend, Markers, PlotKitGreen){

	var chart = new Chart("chartNode");
	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]);

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

Further Reading

Dojo Charting: Events

By on November 9, 2012 2:00 am

Chart events allow you to attach behavior in response to user actions to various chart features, such as markers, bars, columns, or pie wedges. You can interact with following elements representing your data points:

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.