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.
Accessing the Axis
The addAxis() call on a chart has several options for defining axes. Similar to addPlot(), this call takes 2 parameters, a name and an options array. You will need to use “x” and “y” as your axes names unless you gave them custom names in your addPlot() call. Additionally, you don’t have to define the axes if you wish to create charts with 1 or zero axes, you can also make charts with more than 2 axes by adding a second plot and attaching axes to it. Using this approach, you can display up to 4 different axes, 2 vertical and 2 horizontal, using 2 to 4 plots. Also, a single axis can be shared by more than 1 plot, meaning you could have 2 plots that use the same horizontal axis, but have different vertical axes. Let’s look at all the addPlot() options that make this and more possible.
The first option is vertical, this determines if the axis is vertical or horizontal, it defaults to false for a horizontal axis. Make sure that your alignment matches with values set for hAxis and vAxis, which are “x” and “y” by default, on your plot or your chart will not render.
chart1.addAxis("x");
chart1.addAxis("y", {vertical: true});
Next we have the fixUpper and fixLower options, which align the ticks and have 4 available options; major, minor, micro, and none. These default to none, and when set will force the end bounds to align to the corresponding tick division. If none is chosen, the end bounds will be the highest and lowest values in your data set. Another related option is the includeZero option, which will make your lower bound be zero. If your lowest data value is negative the includeZero option has no effect.
chart1.addAxis("x", {fixUpper: "major", fixLower:"minor"});
chart1.addAxis("y", {vertical: true, fixUpper: "major", includeZero: true});
Now let’s examine the leftBottom option. This option defaults to true, and along with the vertical option determines the side of the chart the axis is placed. At the end of Part 1 we examined adding a second plot to our chart. Let’s use that sample and give the second plot its own set of axes and anchor them on the top and right using leftBottom.
chart1.addPlot("default", {type: "Lines"});
chart1.addPlot("other", {type: "Areas", hAxis: "other x", vAxis: "other y"});
chart1.addAxis("x");
chart1.addAxis("y", {vertical: true});
chart1.addAxis("other x", {leftBottom: false});
chart1.addAxis("other y", {vertical: true, leftBottom: false});
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();
The one thing you may have noticed is that this changes the perspective because the second data set is now charted against a different axis. You are in luck because you have full control to adjust the axis in almost every way possible. For example, you can set min and max options.
max: 7
You can turn on and off the tick marks at the minor and micro level, and turn labels on and off for the major and minor levels
minorTicks: true
minorLabels: true
microTicks: false
There’s natural, which forces all ticks to be on natural numbers, and fixed which will fix the precision on your labels.
fixed: true
If you want you can define the step between the ticks.
minorTickStep: 2
microTickStep: 1
You can control the color of the axis, the color and length of your tick marks and the font and color of your labels.
leftBottom: false,
max: 7,
stroke: "green",
font: "normal normal bold 14pt Tahoma",
fontColor: "red",
majorTick: {color: "red", length: 6},
minorTick: {stroke: "black", length: 3}
});
When added to our previous example, the result is:
You can also add a grid at your tick marks to your entire chart by adding a Grid plot. The grid plot allows you to turn the grid on and off for major and minor ticks in both directions, and you can assign axes names if you have multiple axes. Let’s add a grid to the other axes in our above example.
hAxis: "other x",
vAxis: "other y",
hMajorLines: true,
hMinorLines: false,
vMajorLines: true,
vMinorLines: false,
});
Last, but not least you have the ability to assign custom labels to your axis. Make sure to allow sufficient space in your div for the text to display properly. Here is an example using abbreviated month names with a Columns plot.
labels: [{value: 1, text: "Jan"}, {value: 2, text: "Feb"},
{value: 3, text: "Mar"}, {value: 4, text: "Apr"},
{value: 5, text: "May"}, {value: 6, text: "Jun"},
{value: 7, text: "Jul"}, {value: 8, text: "Aug"},
{value: 9, text: "Sep"}, {value: 10, text: "Oct"},
{value: 11, text: "Nov"}, {value: 12, text: "Dec"}]
});
Data, it’s Series(ous) Business
Finally, we get to addSeries(), where we define the data sets that will be displayed on our chart. addSeries() accepts 3 parameters, a name, a data array and an options array. There is also an updateSeries() call that takes a name and data array for when you want to refresh your data. Let’s run through the options available in the addSeries() call, then look at the data array.
There are only a few options to cover for the addSeries() call. First up is stroke, which covers the color and width of your line or the border of your bar and column type graphs.Along with stroke we have fill, and it determines the color of the fill area under the line in area type line graphs and determines the bar fill color for bar and column type graphs. If you are familiar with SVG or dojox.gfx, stroke and fill should be very familiar.
fill: "lightblue"});
The other option is marker and it allows you to define custom markers using SVG path segments. Here are some of marker types as defined in the Dojo Charting source code. Note that each is just defined internally as an SVG path:
SQUARE: "m-3,-3 l0,6 6,0 0,-6 z",
DIAMOND: "m0,-3 l3,3 -3,3 -3,-3 z",
CROSS: "m0,-3 l0,6 m-3,-3 l6,0",
X: "m-3,-3 l6,6 m0,-6 l-6,6",
TRIANGLE: "m-3,3 l3,-6 3,6 z",
TRIANGLE_INVERTED:"m-3,-3 l3,6 3,-6 z"
Now take a look at these options in action using our above example:
The only thing we have left is the data array, and it’s just that, an array of data. All plot types can accept a one dimensional array, but there are some additional format options available based on the type of chart. With a 1 dimensional array for line type graphs the X axis will be integers; 1,2,3… and the data will be the Y axis. For bar type plots the data is the length of the bar and the choice between column or bar type determines the orientation. And for pie type charts the sum of the array is your whole pie. All the plot types except pie can have multiple series.
For any non “stacked” line plot type you can specify coordinate pairs. You need to use keys that correspond to the hAxis and vAxis parameters defined in the addPlot() call. These default to x and y.
{x: 2, y: 9}, {x: 5, y: 3}]);
chart1.addSeries("Series B", [{x: 3, y: 8.5}, {x: 4.2, y: 6}, {x: 5.4, y: 2}]);
Here is an example of using coordinate pairs with a scatter plot:
With any of the stacked plot types each data set added with addSeries() is placed relative to the previous set. Here is a simple example that shows this concept. Instead of the second data set being a straight line across at 1, all the points are 1 above the point from the first data set.
chart1.addSeries("Series 2", [1, 1, 1, 1, 1], {stroke: {color: "red"}});
For pie type charts you can specify additional information: the text label for each slice, the color of the slice and even a font color that overrides the font color definable in the addPlot() call.
{y: 4, color: "red"},
{y: 2, color: "green"},
{y: 1, color: "blue"},
{y: 1, text: "Other", color: "white", fontColor: "red"}
]);
Charting your own course
That’s it! You now know all the basics of Dojo Charting. Congratulations! If you are wondering where to go from here, I have a few suggestions. First if you are as bad with colors as I am, you will want to check out charting themes. They are simple to use with your charts, just call setTheme(). There are a handful available and pretty straight forward if you want to make your own.
You’ll also want to check out Eugene’s posts on the new Dojo 1.2 Charting features, including scrolling and zooming, charting events and widgets, tooltips, and legend.
Have fun!
Follow Us
Subscribe
Can you show an example of how json from the server can be used as the series or how to get the series from a server
also is the tutorial on this page good? looks outdated but i’m not sure since it kind of seem to do what i want to do
http://www.ridgway.co.za/archive/2007/04/13/A-Simple-Dojo-Charting-Example.aspx
The series values are simply data in an array.
//JSON:
str = “{values: [1,2,3,4,5]}”;
//using prototype
obj = str.evalJSON();
//the array is then referenced by:
chart1.addSeries(”Series 1″, obj.values);
Hi this article is a good start for the beginners;
I am facing a problem when trying to use StackedColumns ,I can see only vertical columns but not stacked ones with StackedColumns.
Hello.
I’m working with dojo 1.2 release, and the tick color and length options doesnot seem to work anymore. I tried it on the test_chart2D example.I will fill a ticket against it, but could you confirm it to me ?
Thanks.
@rdunklau: please open a defect ticket against Charting, and attach a minimalistic test case demonstrating the problem.
Hi -
Thanks for these great articles.
I have a question about the example graph on tutorial 7 (the bar graph with the months on the x-axis) – when you click on it to take you to the actual graph, none of the labels except “Oct” show up.
Is this happening with everyone? I’m currently using dojo v1.2.0, and am experiencing the same thing in my code. Once the number of major ticks on the x-axis is greater than 10, I lose all of my labels except for the 10th one and all minor tick marks.
(increasing the width of the graph has no affect)
I experience this in both IE and FF.
Thanks
L
I have a question on markers. Currently they are displaying as the same color as the line (on a line chart). Is it possible to change the color of the marker? I’m looking to use black markers with colored lines.
Thanks
@lbarlow: it depends on font metrics on your local computer. Basically algorithm works like this: major ticks are always labeled, minor ticks can be labeled if possible (not possible in your case, because they will overlap), micro ticks are never labeled. In order to always show labels (like in this example) you should specify major tick steps go with interval 1, otherwise they will be selected automatically (10 in this particular case, that’s why you see “Oct” — the 10th month). You can specify stepping by adding “majorTickStep: 1″ to the parameters of an axis when you create it.
@Stacy: currently it is not supported. If you feel strongly that we need it, please file an enhancement ticket against Charting for that (all info is here: http://dojotoolkit.org/community, go to Forums to register there, after that go to the Trac and enter you ticket).
Hi,
I’m just new in using dojo. I’ve already tried what you’ve said to add majorTickStep: 1 to show all the labels but it still doesn’t work.
Your help would be greatly appreciated.
Thanks.
Hi,
I had actually tried assigning all kinds of attributes (like majorTickStep:1, as you suggested) but whenever I added the extra attributes, my labels always disappeared.
I just now realized that I was adding the labels as an extra parameter.
So instead of:
chart1.addAxis(”x”, {majorTickStep:1,
labels: [...]})
I was doing
chart1.addAxis(”x”, {majorTickStep:1},
{labels: [...]}) // So third param is ignored
I noticed this by looking at the code for the monthly graph again. Now everything looks great.
Thanks!
-L
Hi,
I just tried to change the series value to array but I didn’t work because evalJSON is not existing.
//JSON:
str = “{values: [1,2,3,4,5]}”;
//using prototype
obj = str.evalJSON();
//the array is then referenced by:
chart1.addSeries(”Series 1″, obj.values);
Where can I get the evalJSON function? Sorry, I’m not that familiar in javascript.
Thanks.
Is it possible to set the color of the grid lines in a Grid plot? For example :
chart1.addPlot( “Grid”, { type: “Grid”,
stroke: { color: “yellow”, width: 2 }
});
Thanks,
Marty
@May: Most probably evalJSON() is the function defined by a different JavaScript toolkit: Prototype (http://www.prototypejs.org/). If you do want to use it, please contact them. Dojo provides its own function to convert JSON strings to objects: obj = dojo.fromJson(str). In your particular case I don’t see the need for the conversion, just assing your literal directly: obj = {values: [1, 2, 3, 4, 5]};
@Marty: Grid uses the same settings as the corresponding ticks of the axis it is attached to. If you want to change grid colors, just change axis’ tick colors.
Hi Eugene,
Thanks! i just used this obj = {values: [1, 2, 3, 4, 5]}; and it already worked.
But I have another problem, when I open the graph in the new window, it doesn’t display the whole graph. Only half of the graph was displayed. I don’t know what’s the cause of this.
Your help would be greatly appreciated.
Thanks so much.
Hi,
Can I add a single major Label “Month” below Jan, Feb, Mar…… in the bar chart shown above
Thanks
Is there any chance of a guide on integrating charts inside layout widgets such as the TabContainer? Sishyan also asked for help with this in the first part of the guide.
hello,
is there a way to choose only one type of marker for different graphs? by default there is one typ of marker for each line (line 1 -> circel, line 2 -> square, etc) but I want to use circle only?!?!
“Is there any chance of a guide on integrating charts inside layout widgets such as the TabContainer? Sishyan also asked for help with this in the first part of the guide.”
After more investigation, it seems there is a bug which prevents charts from being drawn in tabs other than the first one.
In the following, g1 draws but g2 does not..
…
html, body, .c {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
#g1, #g2 { width: 90%; height: 90%; }
dojo.require(”dojo.parser”);
dojo.require(”dijit.layout.ContentPane”);
dojo.require(”dijit.layout.TabContainer”);
dojo.require(”dojox.charting.Chart2D”);
dojo.addOnLoad(function() {
var chart1 = new dojox.charting.Chart2D(”g1″);
chart1.addSeries(”Series 1″, [1, 2, 3, 4, 5]);
chart1.render();
var chart2 = new dojox.charting.Chart2D(”g2″);
chart2.addSeries(”Series 1″, [1, 2, 3, 4, 5]);
chart2.render();
});
Ok.. no html allowed here.. I’ll try and file a bug report..
I can’t get custom labels to work for my x axis for ClusteredColumns or StackedColumns; simply switching to StackedAreas makes the labels show up. You can see this issue by going to one of the samples above:
http://sitepen.com/labs/code/charting/tutorial/tutorial7.html
Any workarounds?
Hi, it is possible to set more than one plot to a chart an to set some axes to the plots, right? If i do that and define 2 plots, with both an y-axis, the axes are rendered both at the same coordinates. Is it possible to define an offset or something like that, to be able to place two or more series with matching axes in one chart? didnt find anything about that…
@JohnG: works for me. Custom labels should work irrespective of the plot type. Must be some recalculations going on. Please file a bug with the minimalistic reproducible case.
@Christoph: it is possible to share axes — just specify the same name twice (or more) in different plots. You may want to specify a different placement for axes (like it is done in this blog post by Doug), e.g., left side vs. right side, or top vs. bottom.
@Eugene: I´d like to have two or more plots in my chart, these will have different scaling / ranges, but also should have an axis to show these different scalings. It would be possible to do that with for example 2 plots and one y-axis on the right an one on the left, but i´d like to have for example 3 y-axes on the left side with different scaling/ranges. Is that possible? I mean, is it possible to place an axis with some px offset to the left? I tried to solve it by rendering another chart with only the axis left to the actual chart, but this is indeed not a very elegant solution.
Hello,
I want to change the grid color, I tried with the majorTick, but the result is negative. Can you please tell me if there is any such method to do so ?
Thanks in advance.
Hi,
I would like to use a Pie chart in one page and it seems that the loading of the charting component by dojo.require(”dojox.charting.Chart2D”);
loads every charting type and not only the one which interests me, which results with some extra loading time for each page of my webapp.
Is there a way to load only the pie chart script to use it ?
Thanks.
Alx
[...] Article about Dojo Charting By rkremer I found an interesting article about Dojo Charting. The article is for beginnner and gives an good introduction to the usage of the charting programming with Dojo. The article has two parts: Part 1, Part 2. [...]
Anish: Setting the color of the Grid plot won’t work if you set the major tick color in the axis directly. You should actually change it in the Theme; for example:
chart.setTheme(new dojox.charting.Theme(
{
axis: {
majorTick: {
color: “#E0E0E0″,
width: 1,
length: 10
},
minorTick: {
color: “#E0E0E0″,
width: 1,
length: 5
}
}
}));
Can I add dynamic Labels for X axis?
It can vary depends upon the choid selected.
I.e. monthly, daily, quaterly…
Can I display value in the Bar.
for instance, If it 8 then I can see that value in middle of the Bar.
Is it possible to add marker lines (a straight line used to indicate some threshold) on the chart?
hello, how do you do to make the percentages shows on pie chart?
Hi,
am developing jsp page to draw cahrt of stock market
i would like to draw charts using dojo.
i shoould get data (series ) from the server.it would be JSON object.
how can we draw charts using the JSON.and i need to upadte the cahrt for every time interval
I’m also very interested in displaying the value in a bar graph. Either in the middle or on top.
Is there a recommended way to rotate the labels on the horizontal axis 90 degrees?
I have a time series plot and the date-oriented (e.g. “Jan 2009″) labels would fit more naturally if I rotated them.
Is it possible to create a chart without using series? for example I would like to create a chart as follow:
x = 12 y =2
x = 12.50 y = 4
x = 13 y =7
x = 14 y= 10
..
Thanks
Hi, i was wondering if i can have patterns in the bar columns (like small dots, lines, etc).
Thanks
hey mates,
I am looking for a way to create a chart like the one on the bottom of the picture:
http://www.smashingmagazine.com/images/charts/dojo.png
for a chart which plots filetransfer over time (bar-start is start of a file to a given time, bar-end is of transfering this file) for multiple files. Any ideas how that could work?
Thanks