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.
[code language="javascript"]
chart1.addPlot("default", {type: "StackedLines",tension:3,
shadows: {dx: 2, dy: 2, dw: 2}});
[/code]
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.
[code language="javascript"]
chart1.addPlot("default", {type: "Bars", gap: 5});
[/code]
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.
[code language="javascript"]
chart1.addPlot("default", {type: "Bars", hAxis: "cool x",
vAxis: "super y"});
[/code]
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:
[code language="javascript"]
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
},
[/code]
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.
[code language="javascript"]
chart1.addPlot("default", {type: "Grid",
hMajorLines: true,
hMinorLines: false,
vMajorLines: true,
vMinorLines: false});
[/code]
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.
[code language="javascript"]
chart1.addPlot("default", {type: "Lines", markers: true,
tension:3, shadows: {dx: 2, dy: 2, dw: 2}});
[/code]
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.