SitePen Blog » Dojo

[1,2,3...]

/* create the theme files in the app namespace */
/app/charting/themes/SitePen.js
/app/charting/themes/SitePenFTW.js

define([
	"../SimpleTheme",
	"./common"
], function(SimpleTheme, themes){

	themes.Dollar = new SimpleTheme({
		colors: [
			"#A4CE67",
			"#739363",
			"#6B824A",
			"#343434",
			"#636563"
		]
	});
	return themes.Dollar;
});

define([
	"dojox/charting/SimpleTheme",
	"dojox/charting/themes/common"
], function(SimpleTheme, themes){
	
	themes.SitePen = new SimpleTheme({
		colors: [
			"#A4CE67",
			"#739363",
			"#6B824A",
			"#343434",
			"#636563"
		]
	});
	return themes.SitePen;
});

define([
	"dojox/charting/Theme",
	"dojox/charting/themes/common",
	"dojox/gfx/gradutils"
], function(Theme, themes){

	var gradient = Theme.generateGradient;

    /* fill settings for gradation */
    defaultFill = {type: "linear", space: "shape", x1: 0, y1: 0, x2: 0, y2: 100};

	/* create theme */
	themes.SitePenFTW = new Theme({

		/* customize the chart wrapper */
		chart: {
			fill: "#333",
			stroke: { color: "#333" },
			pageStyle: {
				backgroundColor: "#000",
				color: "#fff"
			}
		},

		/* plotarea definition */
		plotarea: { fill: "#000" },

		/* axis definition */
		axis:{
			stroke: { // the axis itself
				color: "#fff",
				width: 1
			},
			tick: { // used as a foundation for all ticks
				color: "#fff",
				position: "center",
				font: "normal normal normal 7pt Helvetica, Arial, sans-serif",  // labels on axis
				fontColor: "#fff" // color of labels
			}
		},

		/* series definition */
		series: {
			stroke: { width: 2.5, color: "#fff" },
			outline: null,
			font: "normal normal normal 8pt Helvetica, Arial, sans-serif",
			fontColor: "#fff"
		},

		/* marker definition */
		marker: {
			stroke: { width: 1.25, color: "#fff" },
			outline: { width: 1.25, color: "#fff" },
			font: "normal normal normal 8pt Helvetica, Arial, sans-serif",
			fontColor: "#fff"
		},

		/* series theme with gradations! */
		//light => dark
		//defaultFill object holds all of our gradation settings
		seriesThemes: [
			{ fill: gradient(defaultFill, "#fff", "#f2f2f2") },
			{ fill: gradient(defaultFill, "#d5ecf3", "#bed3d9") },
			{ fill: gradient(defaultFill, "#9ff275", "#7fc25d") },
			{ fill: gradient(defaultFill, "#81ee3b", "#60b32b") },
			{ fill: gradient(defaultFill, "#4dcff4", "#277085") },
			{ fill: gradient(defaultFill, "#666", "#333") }
		],

		/* marker theme */
		markerThemes: [
			{fill: "#bf9e0a", stroke: {color: "#ecc20c"}},
			{fill: "#73b086", stroke: {color: "#95e5af"}},
			{fill: "#216071", stroke: {color: "#277084"}},
			{fill: "#c7212d", stroke: {color: "#ed2835"}},
			{fill: "#87ab41", stroke: {color: "#b6e557"}}
		]
	});

	return themes.SitePenFTW;
});

generateGradient: function(
	fillPattern, 
	colorFrom, 
	colorTo
}

{
	type: "linear",		//or "radial"
	space: "shape", 
	x1: 0, 			//gradation direction
	y1: 0, 			//gradation direction
	x2: 0, 			//gradation direction
	y2: 100			//gradation direction
}

require([
	"dojo/parser",
	"dojox/charting/widget/Chart",
	"dojox/charting/plot2d/Pie",
	"dojox/charting/action2d/Tooltip",
	"dojox/charting/action2d/MoveSlice",
	"dojox/charting/themes/PlotKit/green"
]);


require([
	"dojox/charting/Chart",
	"dojox/charting/plot2d/Pie",
	"dojox/charting/action2d/Tooltip",
	"dojox/charting/action2d/MoveSlice",
	"dojox/charting/themes/PlotKit/green",
	"dojo/domReady!"
], function(Chart, Pie, Tooltip, MoveSlice, PlotKitGreen){

	var pieChart = new Chart("pieChartNode");
	pieChart.setTheme(PlotKitGreen);
	pieChart.addPlot("default", {
		type: "Pie",
		fontColor: "#000"
	});
	pieChart.addSeries("Series A", [5,8,10,40,20]);
	new MoveSlice(pieChart,"default");
	new Tooltip(pieChart,"default");
	pieChart.render();
});

var json = {
	January: [9420,10126,9803,15965,17290, /* ... */  13165,12390],
	February: [23990,32975,23477,22513,18069, /* ... */ 12956,12815],
	March: [22477,24014,21116,20404,19142, /* ... */ 22077,20263]
};
//we have a DIV element with an ID of "chartNode";  that's the argument
var chart = new Chart('chartNode'); 
//add the default plot
chart.addPlot("default", {
	//type of chart
	type: "StackedAreas",
	//show markers at number points?
	markers: true,
	//curve the lines on the plot?
	tension: "S",
	//show lines?
	lines: true,
	//fill in areas?
	areas: true,
	//offset position for label
	labelOffset: -30,
	//add shadows to lines
	shadows: { dx:2, dy:2, dw:2 }
});
chart.addAxis("x");
chart.addAxis("y", { vertical:true });

chart.addSeries("January Visits",json["January"], { stroke: "red", fill: "pink" });
chart.addSeries("February Visits",json["February"], { stroke: "green", fill: "lightgreen" });
chart.addSeries("March Visits",json["March"], { stroke: "blue", fill: "lightblue" });

chart.render();

// get our Legend dependency...
require(["dojox/charting/widget/Legend"], function(Legend) ...
	//this legend is created within an element with a "legendNode" ID.
	new Legend({chart:chart}, 'legendNode');

// get our Magnify dependency...
require(["dojox/charting/action2d/Magnify"], function(Magnify) ...
	//add the magnification animation to our chart for the default plot
	new Magnify({chart:chart}, 'default');

var tip = new dojox.charting.action2d.Tooltip(chart1, "default");
// get our Tooltip dependency...
require(["dojox/charting/action2d/Tooltip"], function(Tooltip) ...
	//add the Tooltip to our chart for the default plot
	new Tooltip({chart:chart}, 'default');

chart1.connectToPlot("default",function(e) {
	
	/* do something */
	
});

require(['dojox/charting/action2d/Magnify'], function(Magnify){
	var action = new Magnify(
		chart1, 
		"default", 
		{
			duration: 200,
			scale: 1.1
		}
	);	
});


require([
	"dojox/charting/Chart",
	"dojox/charting/plot2d/Areas",
	"dojox/charting/plot2d/Grid",
	"dojox/charting/themes/PlotKit/orange",
	"dojox/charting/axis2d/Default",
	"dojo/domReady!"
	],
	function (Chart, Areas, Grid, PlotKitOrange) {
		// Create the chart
		var chart = new Chart("chartNode");

		// set a theme
		chart.setTheme(PlotKitOrange);

		// create the ordinal horizontal axis with custom visual attributes,
		// by default it will be attached to the bottom of the plot area
		chart.addAxis("x", {
			fixLower: "minor", natural: true, stroke: "grey",
			majorTick: {stroke: "black", length: 4},
			minorTick: {stroke: "gray", length: 2}
		});

		// create the ordinal vertical axis with custom visual attributes,
		// by default it will be attached to the left of the plot area
		chart.addAxis("y", {
			vertical: true, min: 0, max: 30,
			majorTickStep: 5, minorTickStep: 1, stroke: "grey",
			majorTick: {stroke: "black", length: 4},
			minorTick: {stroke: "gray", length: 2}
		});

		// add the front plot, which uses default axes (named "x" and "y")
		chart.addPlot("default", {type: "Areas"});

		// add series to the default plot
		chart.addSeries("Series A",
			[0, 25, 5, 20, 10, 15, 5, 20, 0, 25]
		);

		// create the ordinal horizontal axis with custom visual attributes,
		// we specify explicitly that it should be attached to the top
		chart.addAxis("x2", {
			fixLower: "minor", natural: true,
			leftBottom: false, stroke: "grey",
			majorTick: {stroke: "black", length: 4},
			minorTick: {stroke: "gray", length: 2}
		});

		// create the ordinal vertical axis with custom visual attributes,
		// we specify explicitly that it should be attached to the right
		chart.addAxis("y2", {
			vertical: true, min: 0, max: 20,
			leftBottom: false, stroke: "grey",
			majorTick: {stroke: "black", length: 4},
			minorTick: {stroke: "gray", length: 2}
		});

		// create the back plot, which uses our custom axes ("x2" and "y2")
		chart.addPlot("plot2", {
			type: "Areas", hAxis: "x2", vAxis: "y2"
		});

		// add series to "plot2" we just created
		chart.addSeries("Series B",
			[15, 0, 15, 0, 15, 0, 15, 0, 15,
				0, 15, 0, 15, 0, 15, 0, 15],
			{plot: "plot2"}
		);

		// add the bottom of our stack we put the grid
		// that shows major lines, and horizontal minor lines
		chart.addPlot("grid", {type: "Grid", hMinorLines: true});

		// show what we've built
		chart.render();

chart.setWindow(2, 2, 181, 143).render();

chart.setWindow(1, 1, 0, 0).render();

chart.addPlot("default", {type: "Lines", hAxis: "x", vAxis: "y"});
chart.addAxis("x"); 
chart.addAxis("y", {vertical: true});

  
chart.addAxis("x", {fixUpper: "major", fixLower:"minor"});
chart.addAxis("y", {vertical: true, fixUpper: "major", includeZero: true});

require([
	"dojox/charting/Chart",
	"dojox/charting/plot2d/Lines",
	"dojox/charting/plot2d/Areas",
	"dojox/charting/axis2d/Default",
	"dojo/domReady!"
	],
	function (Chart) {
		var chart = new Chart("simplechart");
		chart.addPlot("default", {type: "Lines"});
		chart.addPlot("someOtherPlot", {type: "Areas", hAxis: "someOtherPlot x", vAxis: "someOtherPlot y"});
		chart.addAxis("x");
		chart.addAxis("y", {vertical: true});
		chart.addAxis("someOtherPlot x", {leftBottom: false});
		chart.addAxis("someOtherPlot y", {vertical: true, leftBottom: false});
		chart.addSeries("Series 1", [1, 2, 2, 3, 4, 5, 5, 7]);
		chart.addSeries("Series 2", [1, 1, 4, 2, 1, 6, 4, 3],
				{plot: "someOtherPlot", stroke: {color:"blue"}, fill: "blue"}
		);
		chart.render();
	});

chart.addAxis("y", {
        min:1, 
        max:7
});

chart.addAxis("y", {
        majorLabels: true,
        minorTicks: true,
        minorLabels: true,
        microTicks: false
});

chart.addAxis("y", {
        natural: false,
        fixed: true 
});

chart.addAxis("y", {
        majorTickStep: 4,
        minorTickStep: 2,
        microTickStep: 1
});

var chart = new Chart("simplechart");
chart.addPlot("default", {type: "Lines"});
chart.addPlot("someOtherPlot", {type: "Areas", hAxis: "someOtherPlot x", vAxis: "someOtherPlot y"});
chart.addAxis("x");
chart.addAxis("y", {vertical: true, leftBottom: true});
chart.addAxis("someOtherPlot x", {leftBottom: false});
chart.addAxis("someOtherPlot y", {
	vertical: true,
	leftBottom: false,
	max: 7,
	stroke: "green",
	font: "normal normal bold 14pt Tahoma",
	fontColor: "red",
	majorTick: {color: "red", length: 6},
	minorTick: {stroke: "black", length: 3}
});
chart.addSeries("Series 1", [1, 2, 2, 3, 4, 5, 5, 7]);
chart.addSeries("Series 2", [1, 1, 4, 2, 1, 6, 4, 3],
		{plot: "someOtherPlot", stroke: {color:"red"}, fill: "blue"}
);
chart.render();

chart.addPlot("gridPlot", {type: "Grid",
	hAxis: "someOtherPlot x",
	vAxis: "someOtherPlot y",
	hMajorLines: true,
	hMinorLines: false,
	vMajorLines: true,
	vMinorLines: false
});

var chart = new Chart("simplechart");
chart.addPlot("default", {type: "Columns", gap:2});
chart.addAxis("x", {
	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"}]
	});
chart.addAxis("y", {vertical: true, leftBottom: true, min:1});
chart.addSeries("Series 1", [3, 2, 2, 3, 4, 5, 5, 7, 10, 2, 3, 14],
	{plot: "default", stroke: {color:"#466C89"}, fill: "#00E9FF"});
chart.render();

chart.addSeries(
	"Series 1", 
	[1, 2, 4, 5, 5, 7], 
	{stroke: {color: "red", width: 2}, fill: "blue"}
);

CIRCLE:		"m-3,0 c0,-4 6,-4 6,0 m-6,0 c0,4 6,4 6,0", 
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"

chart.addSeries("Series 1", [1, 2, 2, 3, 4, 5, 5, 7], {
		stroke: { color: "purple", width: 2 },
		fill: "yellow",
		marker: "m0,-5 l5,5 -5,5 -5,-5 z"
	}
);
chart.addSeries("Series 2", [1, 1, 4, 2, 1, 6, 4, 3],{
		plot: "someOtherPlot",
		stroke: {color:"#FFA100", width:1},
		fill: "blue",
		marker: (new SimpleTheme()).markers.TRIANGLE_INVERTED
	}
);

chart.addSeries("Series A", [1, 2, 3, 4, 5]);

chart.addSeries("Series A", 
	[{x: 1, y: 5}, {x: 1.5, y: 1.7}, {x: 2, y: 9}, {x: 5, y: 3}]);
chart.addSeries("Series B", 
	[{x: 3, y: 8.5}, {x: 4.2, y: 6}, {x: 5.4, y: 2}]);

chart.addPlot("default", {type:'Stacked'});
chart.addSeries("Series 1", [1, 2, 3, 4, 3]);
chart.addSeries("Series 2", [1, 1, 1, 1, 1], {stroke: {color: "red"}});

chart.addPlot("default", {type:'Pie'});
chart.addSeries("Series A", [
	{y: 4, color: "#FFDBDB"},
	{y: 2, color: "#D0F2D2"},
	{y: 1, color: "#DBF1FF"},
	{y: 1, text: "Other", color: "white", fontColor: "red", size:14}
]);
chart.render();

require([
	"dojox/charting/Chart",
	"dojox/charting/plot2d/Columns",
	"dojox/charting/themes/PlotKit/blue",
	"dojox/charting/axis2d/Default",
	"dojo/domReady!"
	],
	function (Chart, Columns, PlotKitBlue) {
		var chart = new Chart("simplechart");
		chart.addPlot("default", {type: Columns, gap:2});
		chart.addAxis("x");
		chart.addAxis("y", {vertical: true, min:1});
		chart.addSeries("Series 1", [3, 2, 2, 3, 4, 5, 5, 7, 10, 2, 3, 14]);
		chart.setTheme(PlotKitBlue);
		chart.render();
	});

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');
});

chart.connectToPlot(
    plotName,    // the unique plot name you specified when creating a plot
    object,      // both object and method are the same used by dojo.connect()
    method       // you can supply a function without an object
);


    Chart


chart.addPlot("default", {type: "Lines"});

chart.addPlot("default", {type: "StackedAreas", lines: true, areas: true, 
	markers: false});

chart.addPlot("default", {type: "StackedLines",tension:3, 
	shadows: {dx: 2, dy: 2, dw: 2}});

chart.addPlot("default", {type: "Bars", gap: 5});

chart.addPlot("default", {type: "Bars", hAxis: "cool x", 
	vAxis: "super y"});

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
},

chart.addPlot("default", {type: "Grid",
        hMajorLines: true, 
        hMinorLines: false,
        vMajorLines: true,
        vMinorLines: false});

chart.addPlot("default", {type: "Lines", markers: true, 
	tension:3, shadows: {dx: 2, dy: 2, dw: 2}});

require([
	"dojox/charting/Chart",
	"dojox/charting/plot2d/Lines",
	"dojox/charting/plot2d/Areas",
	"dojox/charting/axis2d/Default",
	"dojo/domReady!"
	],
	function (Chart) {
		var chart = new Chart("simplechart");
		chart.addPlot("default", {type: "Lines"});
		chart.addPlot("someOtherPlot", {type: "Areas"});
		chart.addAxis("x");
		chart.addAxis("y", {vertical: true});
		chart.addSeries("Series 1", [1, 2, 2, 3, 4, 5, 5, 7]);
		chart.addSeries("Series 2", [1, 1, 4, 2, 1, 6, 4, 3],
			{plot: "someOtherPlot", stroke: {color:"blue"}, fill: "blue"});
		chart.render();
	});

Name	Type	Default	Description
duration	Number	400	the time of effect in milliseconds.
easing	Function	`dojox/fx/easing/elasticOut`	the easing function that specifies how controlled parameter changes over time.

Name	Type	Default	Description
`scale`	`Number`	1.5	the value to scale an element.
`shift`	`Number`	7	the value in pixels to move an element from the center.

Name	Type	Default	Description
`shiftX`	`Number`	3	the maximal value in pixels to move an element horizontally during a shake.
`shiftY`	`Number`	3	the maximal value in pixels to move an element vertically during a shake.

Name	Description
`connect()`	Connect and start handling events. By default, when an action is created, it is connected. You may need to call fullRender() on your chart object to activate the sending of messages. Typically you create an action object after you define plots, but before the first `render()` call — it takes care of everything.
`disconnect()`	Disconnect the event handler.
`destroy()`	Call this method when you want to dispose of your action. It disconnects from its event source and destroys all internal structures, if any, preparing to be garbage-collected.

Chart	Element	Comment
Default	marker	This chart is responsible for lines and areas with markers, and the scatter chart.
Stacked	marker	This chart is responsible for stacked lines and areas.
Bars	bar	Horizontal bars.
StackedBars	bar
ClusteredBars	bar	A clustered version of bars.
Columns	column	Vertical columns.
StackedColumns	column
ClusteredColumns	column	A clustered version of columns.
Bubble	circle
Pie	slice

Attribute	Expected Value	Description
type	“onclick”, “onmouseover”, or “onmouseout”	Use this attribute to differentiate between different types of events.
element	“marker”, “bar”, “column”, “circle”, or “slice”	Indicates what kind of element has sent the event. Can be used to define highlighting or animation strategies. For details consult the previous table.
x	number	The “x” value of the point. Can be derived from the index (depends on a chart).
y	number	The “y” value of the point. Can be derived from the index (e.g., for a bar chart).
index	number	The index of a data point that caused the event.
run	object	The data run object that represents a data series. Example: o.run.data[o.index] — returns the original data point value for the event (o is an event handler’s argument).
plot	object	The plot object that hosts the event’s data point.
hAxis	object	The axis object that is used as a horizontal axis by the plot.
vAxis	object	The axis object that is used as a vertical axis by the plot.
event	object	The original mouse event that started the event processing.
shape	object	The gfx shape object that represents a data point.
outline	object	The gfx shape object that represents an outline (a cosmetic shape). Can be null or undefined.
shadow	object	The gfx shape object that represents a shadow (a cosmetic shape). Can be null or undefined.
cx	number	The “x” component of the visual center of a shape in pixels. Supplied only for “marker”, “circle”, and “slice” elements. Undefined for all other elements.
cy	number	The “y” component of the visual center of a shape in pixels. Supplied only for “marker”, “circle”, and “slice” elements. Undefined for all other elements.
cr	number	The radius in pixels of a “circle”, or a “slice” element. Undefined for all other elements.

SitePen Blog » Dojo

Learning Dojo 1.8

Why Dojo

Getting Started

Transitioning from Dojo 1.6

AMD Resources

Learning Dojo

Learning Dijit

Developing Applications

Build Tool Resources

Dojo Packages

Community

Dojo Charting: Dive Into Theming

Setting Up Your Namespace

Quick Peek at a Simple Theme

Basic Custom Theme: SitePen

Advanced Chart Theming

Using Gradients

Further Reading

Dive Into Dojo Charting Again

Requiring Charting Classes

Two Ways to Play

Declarative Chart Creation

Programmatic Chart Creation

Creating a Simple Chart

Chart Animations, Legends, and Extras

Legend

Chart Animations

Tooltips

Zooming, Scrolling, and Panning

Chart Events

Chart Themes

Chart Families

New Charting Features

Great Charting Resources

Dojo Charting: Actions and Tooltips

Highlight

Magnify

MoveSlice

Shake

Tooltip

Using Actions

Conclusion

Further Reading

Dojo Charting: Zooming, Scrolling, and Panning

Further Reading

A Beginner’s Guide to Dojo Charting with AMD, Part 2 of 2

Accessing the Axis

Data, it’s Series(ous) Business

Charting your own course

Dojo Charting: Legends

Legend

Further Reading

Dojo Charting: Events

Further Reading

A Beginner’s Guide to Dojo Charting with AMD, Part 1 of 2

Got Plot?

Dojo Tutorial: Augmenting Objects

Augmenting Objects

Want to see a specific Tutorial? Want to Learn More?