A Beginner’s Guide to Dojo Charting, Part 1 of 2 June 6th, 2008 at 12:30 am by Doug McMaster
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, 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.
Let’s get started. Here is the code for a basic Dojo Chart, make sure you have the proper path to your dojo.js file:
<html> <head> <title>Basic Charting</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript" src="dojo/dojo.js" djConfig="isDebug: true"></script> <script type="text/javascript"> dojo.require("dojox.charting.Chart2D"); makeCharts = function(){ var chart1 = new dojox.charting.Chart2D("simplechart"); chart1.addPlot("default", {type: "Lines"}); chart1.addAxis("x"); chart1.addAxis("y", {vertical: true}); chart1.addSeries("Series 1", [1, 2, 2, 3, 4, 5, 5, 7]); chart1.render(); }; dojo.addOnLoad(makeCharts); </script> </head> <body> <div id="simplechart" style="width: 250px; height: 150px;"></div> </body> </html>
This source code produces the following simple chart.
Looking at this we can see that most of the work in defining the chart is done in the addPlot(), addAxis(), and addSeries() functions. Today we will examine the addPlot() call, and Part 2 will cover the options for addAxis() and addSeries().
Got Plot?
The addPlot() call determines what type of chart you are going to produce, and there are a variety of options to select. Here are a few examples:
addPlot() accepts 2 parameters, a name and an arguments array. The name is important if you want to have more than 1 plot type on your chart, a concept we will cover shortly. The arguments array contains your options, and these may vary depending on the type of plot you use. Note that your choice of plot type may define appropriate default options.
Let’s examine our options. Type is the main option, and the default value is a basic line chart.
chart1.addPlot("default", {type: "Areas"});
Available 2D chart types include:
- Areas - Area under data line(s) will be filled
- Bars - Horizontal bars.
- ClusteredBars - Horizontal bars with clustered data sets
- ClusteredColumns - Vertical bars with clustered data sets
- Columns - Vertical bars
- Grid - For adding a grid layer to you chart
- Lines - Basic line chart
- Markers - Lines with markers
- MarkersOnly - Markers, sans lines
- Pie - Goes great with punch!
- Scatter - Cooler name for MarkersOnly
- Stacked - Data sets charted in relation to the previous data set.
- StackedAreas - Stacked data sets with filled areas under chart lines
- StackedBars - Stacked data sets with horizontal bars
- StackedColumns - Stacked data sets with vertical bars
- StackedLines - Stacked data sets using lines
If you choose any of the lines, areas or markers types you have 5 specific options. First up we have 3 switches, which are lines, areas, and markers. These are often defined by the plot type you choose, but can be changed to get your desired behavior. The lines option determines whether or not lines are used to connect your data points. If the areas type is selected, the area below your data line will be filled. The markers option will determine if markers are placed at your data points.
chart1.addPlot("default", {type: "StackedAreas", lines: true, areas: true, markers: false});
There are also 2 graphical options, tension and shadows. Tension allows you to add some curve to the lines on you plot. By default this option is set to 0 which is off. I found 2-4 to be a good range for natural looking curves. For some crazy effects try setting this to values < 1 or negatives. Shadows allow you to add a shadow effect, and consists of an array of 3 parameters, dx, dy and dw, which represent the offset to the right, the offset down, and the width of the shadow line, respectively. You can use negative values for your dx and dy parameters to produce a shadow that is to the left or above your chart line.
chart1.addPlot("default", {type: "StackedLines",tension:3, shadows: {dx: 2, dy: 2, dw: 2}});
Bar and column graph types have 1 unique option: they will accept a gap parameter that determines the spacing between your bars or columns in pixels.
chart1.addPlot("default", {type: "Bars", gap: 5});
For any chart type that supports axes, you can also define custom names to your axes here. By default they are “x” and “y”, but this option becomes useful if you wish to have a chart with multiple plots and multiple axes.
chart1.addPlot("default", {type: "Bars", hAxis: "cool x", vAxis: "super y"});
Pie charts are very different by nature, and have a separate list of parameters. I’ll leave it up to you to explore the parameters for the pie chart, from Pie.js:
defaultParams: { labels: true, ticks: false, fixed: true, precision: 1, labelOffset: 20, labelStyle: "default", // default/rows/auto htmlLabels: true // use HTML to draw labels }, optionalParams: { font: "", fontColor: "", radius: 0 },
One other type with unique options is the grid. This plot type will draw grid lines along your tick marks and supports the following four boolean options to determine if lines will be displayed at the horizontal or vertical and major or minor axis tick marks. We will learn more about axes and look at a sample including the grid type in Part 2.
chart1.addPlot("default", {type: "Grid", hMajorLines: true, hMinorLines: false, vMajorLines: true, vMinorLines: false});
Now, let’s go back to our starting example and spruce it up a bit. Let’s add a shadow, some curve to our line, and markers on our data points.
chart1.addPlot("default", {type: "Lines", markers: true, tension:3, shadows: {dx: 2, dy: 2, dw: 2}});
And now our chart looks like this:
One last feature I’d like to touch on is adding multiple plots to the same chart. Multiple plots can be of differing types and can all be configured separately. Each plot you add with addPlot() will be layered behind the previous plot. In addition, plots can have their own axes or share them with other plots on the chart. Now, if we add an areas plot to our lines example, we can create the following effect.
var chart1 = new dojox.charting.Chart2D("simplechart"); chart1.addPlot("default", {type: "Lines"}); chart1.addPlot("other", {type: "Areas"}); chart1.addAxis("x"); chart1.addAxis("y", {vertical: true}); chart1.addSeries("Series 1", [1, 2, 2, 3, 4, 5, 5, 7]); chart1.addSeries("Series 2", [1, 1, 4, 2, 1, 6, 4, 3], {plot: "other", stroke: {color:"blue"}, fill: "lightblue"}); chart1.render();
That’s all for today. Check back soon for Part 2 where we will cover the options available in the addAxes() and addSeries() calls.
Posted June 6th, 2008 at 2:01 am
Excellent tutorial, very good explanation of charting basics
Posted June 6th, 2008 at 2:28 am
One issue I’ve found is that setting the hAxis and vAxis parameters seems to stop the chart from renderering. e.g.
does not render, but take out the hAxis and vAxis parameters, and it renders just fine in FF2
Posted June 6th, 2008 at 8:36 am
Shane, you need to change the name on your addAxis calls to match the values for the hAxis and vAxis parameters.
I’ll be covering the addAxis() call in detail in part 2, which I hope to be able to get posted in the next few days.
Posted June 6th, 2008 at 12:45 pm
The beginners guide is a good place to start.
I have the following
The above does not render in Firefox.
It renders in IE, but the horizontal bars don’t have a gap.
Posted June 6th, 2008 at 12:47 pm
This is the second part of my example.
Posted June 6th, 2008 at 12:49 pm
Oops, the DIV tags are not appearing in my comments.
This a description of my DIV tag.
I have a ContentPane in a DIV tag
Then under that I have a TabContainer in a DIV tag
The under that I have another ContentPane in a DIV tag
The under that I have a DIV tag for the “simplechart” as in the example
Posted June 6th, 2008 at 1:21 pm
It’s kind of working for me now in Firefox and in IE.
But only when the DIV tag containing the id=”simplechart” is brought out of my structure [ContentPane–>TabContainer–>ContentPane–>DIV tag for chart]
Looks like if its inside a ContentPane enclosed in a Tabcontainer which in itself is enclosed in a ContentPane, its not rendered in Firefox, either that or its rendered behind the TabContainer.
Any help as to what Iam doing wrong or is it a bug in Dojo?
Posted June 6th, 2008 at 2:19 pm
Hi Sishyan, can you please post a link to the full code? If it’s a bug, we’ll file a ticket in Dojo’s issue tracking system.
Posted June 7th, 2008 at 4:12 am
Hi Doug,
I changed the names of the axes to match, and they still do not display. Is there another setting I need to enable axis labels?
Looking at all demos/tests of the charts in dojo, none of them have labels, besides the Pie charts.
Thanks
Shane
Posted June 8th, 2008 at 10:47 am
Hi Sishyan, the issue where you are not seeing a gap may be due to size. If the gap between lines would make the bar less then 1 pixel it seems to reset to 0 gap. Try increasing the height of the div or reducing the gap size. I’m not sure why a chart wouldn’t render inside a ContentPane.
Posted June 8th, 2008 at 11:09 am
Hi Shane, I think I may have misunderstood your earlier question. There is currently no direct way to display the axis titles, just labels on the tick marks, which can be customized. However, the event support in 1.2 includes axis information, maybe that could be useful. There was a post about it a week or so ago by Eugene. He also mentions that a Chart Legend Widget is in the works, which I suspect should allow you to display axis information. Here is his post: http://www.sitepen.com/blog/2008/05/27/dojo-charting-event-support-has-landed/
Posted June 8th, 2008 at 1:07 pm
The first example doestn work for me
http://colleenweb.com/testdojo.html
what is wrong
Posted June 8th, 2008 at 1:45 pm
never mind I made one work. I still don’t know how.
Posted June 8th, 2008 at 2:20 pm
OK it was one of those invisible typos. Now all is good. WHere is part 2?
Posted June 8th, 2008 at 2:55 pm
Hi Doug,
Not being able to display axis labels is quite a large limitation - was it deliberate? Surely it couldn’t be difficult to implement. Was it an oversight?
Thanks
Shane
Posted June 9th, 2008 at 7:24 am
Hi Dylan,
I have pasted the codefragment here.
http://wiki.planetvimal.com/codefragment.html
The first one works fine, as the Chart DIV is outside the TabContainer.
But the second fragment does not render.
Posted June 9th, 2008 at 11:56 am
Big thanks. Iam playing a little with dojo charting at moment. Your article was a great help for my first steps. I hope to see the second part, soon. 8-)
Posted June 9th, 2008 at 12:58 pm
By the way, it works in IE,the chart inside contentpane in tab container, but not in firefox.
Posted June 12th, 2008 at 6:10 am
Hi Shane, I did some digging around and axis titles are on the to do list. They won’t make the 1.2 release, but they are on the list.
Posted June 16th, 2008 at 12:06 am
[…] Part 1 of this guide on Dojo charting covered a basic charting example and the options available in defining our chart type. Today we will examine the options for defining our axes and data sets. […]
Posted June 16th, 2008 at 12:59 pm
I wanted to recreate the effect of the chart2d test for sparklines, but when I use dojox.charting.Chart2D instead of dojox.charting.widget.Chart2D the charting engine still leaves room on the left and on the bottom for the axis labels (which I am not setting)
I played with the axis and plot parameters for several hours and still no luck.
Posted June 16th, 2008 at 1:06 pm
@Denilson: To make sure I understand correctly, are you comparing the results of http://archive.dojotoolkit.org/nightly/dojotoolkit/dojox/charting/tests/test_sparklines.html with a non-widget version of a Sparkline just using normal 2D charting? It sounds like a bug, just want to make sure I understand this correctly before I file a ticket on it.
Posted June 16th, 2008 at 4:43 pm
@Dylan, your assumption is correct, my chart created with this snippet:
sparkline = new dojox.charting.Chart2D(”sparkline”);
sparkline.setTheme(dojox.charting.themes.ET.greys);
sparkline.addPlot(”default”, { type: “Default”,
lines: true,
stroke: null,
fill: null,
margins: null,
markers: false} );
sparkline.addAxis(”x”, { min: 0,
max: datesArray.length-1,
majorTick: { length: 0},
minorTick: { length: 0},
minorTicks: false,
microTicks: false,
minorLabels: false,
majorLabels: false});
sparkline.addAxis(”y”, { vertical: true,
majorTick: { length: 0},
minorTick: { length: 0},
minorTicks: false,
microTicks: false,
minorLabels: false,
majorLabels: false});
sparkline.addSeries(”Series A”, seriesArray);
sparkline.render();
has quite a bit of padding (~50-70px) on both left and bottom sides. When I enable labels and ticks, they fit quite nicely in that buffer area. A cursory look through the Chart2D.js seems to confirm my assumption.
Posted June 16th, 2008 at 4:59 pm
hey Denilson:
The issue here is the margins. If you look at the sparklines demo page you’ll see that it explicitly sets margins:
http://download.dojotoolkit.org/current-stable/dojo-release-1.1.1/dojox/charting/tests/test_sparklines.html
Like this:
margins=”{ l: 0, r: 0, t: 0, b: 0 }”
If you set the widget margins similarly you should get the same result. In the nightlies there’s also a new sparkline widget which makes this even easier:
http://archive.dojotoolkit.org/nightly/dojotoolkit/dojox/charting/tests/test_sparklines.html
Regards
Posted July 16th, 2008 at 12:47 pm
Hi, When is the Part2 of this tutorial coming out? I want to create a chart with live data, and want to be able to go back in history or zoom-in to any section. Is this possible be dojo? Thanks.
Posted July 16th, 2008 at 1:22 pm
@Destroyer: Charting Part 2.
Your other requests are possible, but would require some non-out-of-the-box work to make it happen. Free free to contact us if you want to explore engaging us to make that happen, or visit the IRC channel or Dojo forum to get additional community support (useful links to community support resources may be found at http://www.sitepen.com/labs/dojo.php .
Posted July 17th, 2008 at 1:21 pm
I am trying to implement a dynamic chart using dojox charting. I’ve built a very simple JavaScript file that defines the chart and propagates it with randomly generated data, much like the dynamic demo that comes packaged with dojox. My charting works fine, but after about 125 points are added to a plot, the plot browser starts to consume an excessive amount of memory and adding more than one plot to a webpage as I’m wanting to do is nearly impossible with as much memory as is being consumed.
I first tried my implementation on the nightly build of dojo so that I could incorporate events, tooltips, etc. Suspecting the memory problems were resulting from the version of dojo I was using, I commented out the new features from my JavaScript and tried running it with the newest stable release of DOJO. That was not quite as laggy initially, but again, after 100 points or so, it started to really slow down the browser.
I’m attaching just my JavaScript to this post in case anyone has a suggestion. This JavaScript implementation will fit my needs perfectly, but I need to figure out how to make it consume less browser resources. Ultimately I’m wanting to put ~6 plots with 1-4 data series per chart. Each data series will have about 200 points each. Is this feasible, or am I expecting too much of this application?
Thanks,
David
Posted July 23rd, 2008 at 8:49 am
Doug, Dylan, and the Dojo crew,
Great Job on this tutorial and this graphing widget! After much arm twisting from Matt, I finally gave Dojo a try, and I am very impressed. Dojo is looking like a very suitable replacement for JQuery. The dojo.query feature is very nice. Keep up the good work and I suspect I will be filling out one of those contributors forms in the near future.
Posted September 26th, 2008 at 11:13 am
Thanks for this post! Keep the information about Dojo charts coming. There’s a big interest in this with the mapping and GIS community. For example, I am working on an example where a demographic chart appears when the user hovers the mouse over a county on a map. Hovering over a different county changes the chart.