SitePen Blog » JavaScript

nihilo, soria, tundra



	dojoConfig = {
		isDebug:true,
		async:true
	};


require([
	'dojo/parser',
	'dijit/form/FilteringSelect',
	'dojo/domReady!'
], function(parser, FilteringSelect){
	parser.parse();
});


	require([
	'dijit/form/FilteringSelect',
	'dojo/domReady!'
], function(FilteringSelect){

	var filteringSelect = new FilteringSelect({
		autoComplete: true,
		pageSize: 10
	},'characterNode');

});

require([
	'dijit/form/FilteringSelect',
	'dijit/form/DateTextBox',
	'dijit/form/TimeTextBox',
	'dijit/form/Textbox',
	'dijit/form/Textarea',
	'dijit/form/Checkbox',
	'dijit/form/RadioButton',
	'dojo/domReady!'
], function(FilteringSelect, DateTextBox, TimeTextBox, Textbox, Textarea, Checkbox, RadioButton){

	var filteringSelect = new FilteringSelect({
		autoComplete: true,
		pageSize: 10
	},'characterNode');

	var input = new Textbox({/*options*/},'myInputNode');
	var textarea = new Textarea({/*options*/},'myTextareaNode');
	var mySelect = new FilteringSelect({/*options*/},'mySelectNode');
	var date = new DateTextBox({/*options*/},'myDateNode');
	var time = new TimeTextBox({/*options*/},'myTimeNode');
	var checkbox = new CheckBox({/*options*/},'myCheckboxNode');
	var radio1 = new RadioButton({/*options*/},'myRadio1Node');
	var radio2 = new RadioButton({/*options*/},'myRadio2Node');
});

require([
	'dojo/query',
	'dijit/form/FilteringSelect',
	'dijit/form/Button',
	'dijit/form/CheckBox',
	'dijit/form/RadioButton',
	'dojo/domReady!'
], function(query, FilteringSelect, Button, CheckBox, RadioButton){

	query('button,select,input').forEach(function(node){
		var type = node.nodeName;
		if(type === 'INPUT'){
			type = node.type.toUpperCase();
		}
		switch(type){
			case 'BUTTON':
				new Button({},node); break;
			case 'SELECT':
				new FilteringSelect({},node); break;
			case 'RADIO':
				new RadioButton({},node); break;
			case 'CHECKBOX':
				new CheckBox({},node); break;
		}
	});
});

require([
	'dojo/parser',
	'dijit/registry',
	'dijit/form/FilteringSelect',
	'dojo/domReady!'
], function(parser, registry, FilteringSelect){
	parser.parse();
	var filteringSelect = registry.byId('characterNode');
	console.log('filteringSelect', filteringSelect);
});

	var pageSize = registry.byId('characterNode').get('pageSize'); // returns 10

	registry.byId('characterNode').set('pageSize',20); //now pageSize is 20

filteringSelect.on('change', function(value){
	console.log('value', value);
});

require([
	'dojo/aspect'
	// other deps...
], function(aspect){
	aspect.after(filteringSelect, 'validate', function(value){
		console.log('validate', value);
	});
});

/* 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(['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();

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

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 » JavaScript

AMD Module and Local Variable Naming Conventions

Packages

Modules

What Should I Name My Modules?

Conclusion

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

Dive Into Dijit with AMD

Requiring Proper Modules and Resources

dojoConfig

dojo/parser

Creating Widgets

The Basic select Element

Declarative Method

Programmatic Method

Accessing Dijit Widgets and their Properties

Listening to Widget Events

The Dijit Collection

Dijit Resources

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

Dojo Charting: Actions and Tooltips

Highlight

Magnify

MoveSlice

Shake

Tooltip

Using Actions

Conclusion

Further Reading

Dojo Charting: Zooming, Scrolling, and Panning

Further Reading

Dojo Charting: Legends

Legend

Further Reading

Dojo Charting: Events

Further Reading

Dojo Tutorial: Augmenting Objects

Augmenting Objects

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

Dojo Tutorial: Dojo Start

Dojo Start

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

`dojo/parser`

The Basic `select` Element