Rickshaw is a JavaScript Smalltalk toolkit for creating interactive time series graphs.

Rickshaw on SmalltalkHub

Graphing Toolkit

Rickshaw provides the elements you need to create interactive graphs: renderers, legends, hovers, range selectors, etc. You put the pieces together.See Demo

Built on d3.js

It's all based on d3 underneath, so graphs are drawn with standard SVG and styled with CSS. Customize all you like with techniques you already know.

Seaside integration

Rickshaw is integrated into Seaside as seamless as possible. You code Smalltalk, and the library wrapper will output the required JavaScript.

Getting started

Here's a minimal but complete working example. We start by pulling in dependencies. A few extensions require jQuery, but here all we need is d3 and the Rickshaw library itself. Instantiate a graph, and then render it. For more along this path, check out the tutorial and also see our examples listing

renderExampleGettingStartedGraphOn: html
	| graphId graph |
	graphId := html nextId.
	html div
		class: 'chart';
		id: graphId.
	graph := Rickshaw graph element: graphId.
	graph beArea.
	graph
		addSeriesNamed: 'Demo'
		color: 'steelblue'
		elements:
			{(0 @ 40).
			(1 @ 49).
			(2 @ 38).
			(3 @ 30).
			(4 @ 32)}.
	html document addLoadScript: graph

Area graph

renderExampleAreaGraphOn: html
	| graphId graph |
	graphId := html nextId.
	html div
		class: 'chart';
		id: graphId.
	graph := Rickshaw graph element: graphId.
	graph beArea.
	graph
		addSeriesNamed: 'Demo'
		color: 'steelblue'
		elements:
			{(0 @ 40).
			(1 @ 49).
			(2 @ 38).
			(3 @ 30).
			(4 @ 32)}.
	html script: graph asJavascript
renderExampleStackedAreaGraphOn: html
	| graph |
	html div class: 'chart'; id: html nextId.
	graph := Rickshaw graph element: html lastId.
	graph beArea.
	graph
		addSeries: (RickshawSeries color: 'steelblue' elements: {(0 @ 40). (1 @ 49). (2 @ 38). (3 @ 30). (4 @ 32)});
		addSeriesNamed: 'With name' color: 'lightblue' elements: {(0 @ 30). (1 @ 40). (2 @ 33). (3 @ 25). (4 @ 16)}.
	html script: graph asJavascript

Lines

renderExampleLineGraphOn: html
	| graphId graph |
	graphId := html nextId.
	html div
		class: 'chart';
		id: graphId.
	graph := Rickshaw graph element: graphId.
	graph beLine.
	graph
		addSeriesNamed: 'Demo'
		color: 'steelblue'
		elements:
			{(0 @ 40).
			(1 @ 49).
			(2 @ 38).
			(3 @ 30).
			(4 @ 32)}.
	html document addLoadScript: graph
renderExampleMultipleLineGraphOn: html
	| graph |
	html div class: 'chart'; id: html nextId.
	graph := Rickshaw graph element: html lastId.
	graph beLine.
	graph
		addSeries: (RickshawSeries color: 'steelblue' elements: {(0 @ 40). (1 @ 49). (2 @ 38). (3 @ 30). (4 @ 32)});
		addSeriesNamed: 'With name' color: 'lightblue' elements: {(0 @ 30). (1 @ 40). (2 @ 33). (3 @ 25). (4 @ 16)}.
	html script: graph asJavascript

Bars

renderExampleBarGraphOn: html
	| graphId graph |
	graphId := html nextId.
	html div
		class: 'chart';
		id: graphId.
	graph := Rickshaw graph element: graphId.
	graph beBar.
	graph
		addSeriesNamed: 'Demo'
		color: 'steelblue'
		elements:
			{(0 @ 40).
			(1 @ 49).
			(2 @ 38).
			(3 @ 30).
			(4 @ 32)}.
	html script: graph asJavascript
renderExampleStackedBarGraphOn: html
	| graph |
	html div class: 'chart'; id: html nextId.
	graph := Rickshaw graph element: html lastId.
	graph beBar.
	graph
		addSeries: (RickshawSeries color: 'steelblue' elements: {(0 @ 40). (1 @ 49). (2 @ 38). (3 @ 30). (4 @ 32)});
		addSeriesNamed: 'With name' color: 'lightblue' elements: {(0 @ 30). (1 @ 40). (2 @ 33). (3 @ 25). (4 @ 16)}.
	html script: graph asJavascript

Scatterplot

renderExampleScatterplotGraphOn: html
	| graphId graph |
	graphId := html nextId.
	html div
		class: 'chart';
		id: graphId.
	graph := Rickshaw graph element: graphId.
	graph beScatterplot.
	graph
		addSeriesNamed: 'Demo'
		color: 'steelblue'
		elements:
			{(0 @ 40).
			(1 @ 49).
			(2 @ 38).
			(3 @ 30).
			(4 @ 32)}.
	html document addLoadScript: graph

Interactive Legend

renderExampleInteractiveLegendGraphOn: html
	| graph legend toggle highlight |
	html div
		class: 'chart';
		id: html nextId.
	graph := Rickshaw graph element: html lastId.
	graph beBar.
	graph
		addSeriesNamed: 'Series A' color: '#336699' elements: (self randomElements: 30 factor: 20);
		addSeriesNamed: 'Series B' color: 'forestgreen' elements: (self randomElements: 30 factor: 40);
		addSeriesNamed: 'Series C' color: Color orange elements: (self randomElements: 30 factor: 15).
	html div
		class: 'legend';
		id: html nextId.
		
	"The legend object is bound to a DOM element"	
	legend := graph legend element: html lastId.
	
	toggle := legend toggle: graph.
	highlight := legend highlight: graph.
	html document addLoadScript: graph , legend , toggle , highlight

Interactive Hover details

renderExampleHoverGraphOn: html
	| graphId graph |
	graphId := html nextId.
	html div
		class: 'chart';
		id: graphId.
	graph := Rickshaw graph element: graphId.
	graph beBar.
	graph addSeriesNamed: 'Series 1' color: 'steelblue' elements: (self randomElements: 30 factor: 30).
	graph addSeriesNamed: 'Series 2' elements: (self randomElements: 30 factor: 15).
	html script: graph asJavascript , graph hover asJavascript

A more interesting example