Blog

Jun 13

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.

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.

Apr 4

StockList: Real-time Business Analytics Using Dojo and Lightstreamer

By on April 4, 2011 12:06 am

The proliferation of online data gives businesses more information than they can possibly manage. Real-time dashboards and trading systems help users make sense of financial information, analytics, business trends, customer stats, and much more. The Dojo Toolkit and Lightstreamer are two popular choices available for building your own platforms and applications.

Building on a long-standing collaboration between SitePen and Lightstreamer (Weswit Srl), SitePen created the new LightstreamerStore. Based on the new Dojo Toolkit 1.6 Object Store API and the latest Lightstreamer preview releases, it is intended to make streaming data from a Lightstreamer server super-simple for developers. SitePen also updated the existing Lightstreamer + Dojo Toolkit demo to demonstrate this simplified interface. The demo visualizes the data returned in real-time from Lightstreamer using both the Dojo DataGrid and Dojo Charting. Charts display the “normalized last price” to more easily visualize changes in prices.