Charts from HTML tables - tutorial - Revision history

Michael at 08:54, 21 February 2013

2013-02-21T08:54:47Z

← Older revision		Revision as of 08:54, 21 February 2013
Line 132:		Line 132:
	years = [1949, 1953, 1957, 1961, 1965, 1969, 1972, 1976, 1980, 1983, 1987, 1990, 1994, 1998, 2002, 2005, 2009],		years = [1949, 1953, 1957, 1961, 1965, 1969, 1972, 1976, 1980, 1983, 1987, 1990, 1994, 1998, 2002, 2005, 2009],
	chart = brd.create('chart', ['mytable'], {chartStyle: 'point,line',		chart = brd.create('chart', ['mytable'], {chartStyle: 'point,line',
	withHeaders: ~~false~~, colorArray: colors, strokeColor: colors,		withHeaders: true, colorArray: colors, strokeColor: colors,
	fillColor: colors, highlightFillColor: colors, highlightStrokeColor: colors});		fillColor: colors, highlightFillColor: colors, highlightStrokeColor: colors});

	~~brd.defaultAxes.x.defaultTicks.labels[9].setText("1965");~~
	~~brd.defaultAxes.x.defaultTicks.labels[9].updateRenderer();~~
	~~brd.defaultAxes.x.defaultTicks.labels[14].setText("1983");~~
	~~brd.defaultAxes.x.defaultTicks.labels[14].updateRenderer();~~
	~~brd.defaultAxes.x.defaultTicks.labels[19].setText("2002");~~
	~~brd.defaultAxes.x.defaultTicks.labels[19].updateRenderer();~~

	brd.highlightInfobox = function(x,y,el) {		brd.highlightInfobox = function(x,y,el) {

Michael at 08:54, 21 February 2013

2013-02-21T08:54:23Z

← Older revision		Revision as of 08:54, 21 February 2013
Line 156:		Line 156:
	years = [1949, 1953, 1957, 1961, 1965, 1969, 1972, 1976, 1980, 1983, 1987, 1990, 1994, 1998, 2002, 2005, 2009],		years = [1949, 1953, 1957, 1961, 1965, 1969, 1972, 1976, 1980, 1983, 1987, 1990, 1994, 1998, 2002, 2005, 2009],
	chart = brd.create('chart', ['mytable'], {chartStyle: 'point,line',		chart = brd.create('chart', ['mytable'], {chartStyle: 'point,line',
	withHeaders: ~~false~~, colorArray: colors, strokeColor: colors,		withHeaders: true, colorArray: colors, strokeColor: colors,
	fillColor: colors, highlightFillColor: colors, highlightStrokeColor: colors}),		fillColor: colors, highlightFillColor: colors, highlightStrokeColor: colors}),


	~~brd.defaultAxes.x.defaultTicks.labels[9].setText("1965");~~
	~~brd.defaultAxes.x.defaultTicks.labels[9].updateRenderer();~~
	~~brd.defaultAxes.x.defaultTicks.labels[14].setText("1983");~~
	~~brd.defaultAxes.x.defaultTicks.labels[14].updateRenderer();~~
	~~brd.defaultAxes.x.defaultTicks.labels[19].setText("2002");~~
	~~brd.defaultAxes.x.defaultTicks.labels[19].updateRenderer();~~

Michael at 13:43, 18 January 2010

2010-01-18T13:43:03Z

@@ Line 158: / Line 158: @@
                                                  withHeaders: false, colorArray: colors, strokeColor: colors,
                                                  fillColor: colors, highlightFillColor: colors, highlightStrokeColor: colors}),
        brd.highlightInfobox = function(x,y,el) {
              this.infobox.setText('<span style="color:black;font-weight:bold">' + years[Math.round(x)-1] + ': ' + y + ' %</span>');

Michael: added example for changing tick labels

2010-01-18T13:40:00Z

added example for changing tick labels

← Older revision		Revision as of 13:40, 18 January 2010
Line 134:		Line 134:
	withHeaders: false, colorArray: colors, strokeColor: colors,		withHeaders: false, colorArray: colors, strokeColor: colors,
	fillColor: colors, highlightFillColor: colors, highlightStrokeColor: colors});		fillColor: colors, highlightFillColor: colors, highlightStrokeColor: colors});

			brd.defaultAxes.x.defaultTicks.labels[9].setText("1965");
			brd.defaultAxes.x.defaultTicks.labels[9].updateRenderer();
			brd.defaultAxes.x.defaultTicks.labels[14].setText("1983");
			brd.defaultAxes.x.defaultTicks.labels[14].updateRenderer();
			brd.defaultAxes.x.defaultTicks.labels[19].setText("2002");
			brd.defaultAxes.x.defaultTicks.labels[19].updateRenderer();

	brd.highlightInfobox = function(x,y,el) {		brd.highlightInfobox = function(x,y,el) {

A WASSERMANN at 17:55, 21 December 2009

2009-12-21T17:55:39Z

← Older revision		Revision as of 17:55, 21 December 2009
Line 149:		Line 149:
	years = [1949, 1953, 1957, 1961, 1965, 1969, 1972, 1976, 1980, 1983, 1987, 1990, 1994, 1998, 2002, 2005, 2009],		years = [1949, 1953, 1957, 1961, 1965, 1969, 1972, 1976, 1980, 1983, 1987, 1990, 1994, 1998, 2002, 2005, 2009],
	chart = brd.create('chart', ['mytable'], {chartStyle: 'point,line',		chart = brd.create('chart', ['mytable'], {chartStyle: 'point,line',
	withHeaders: ~~true~~, colorArray: colors, strokeColor: colors,		withHeaders: false, colorArray: colors, strokeColor: colors,
	fillColor: colors, highlightFillColor: colors, highlightStrokeColor: colors}),		fillColor: colors, highlightFillColor: colors, highlightStrokeColor: colors}),
	brd.highlightInfobox = function(x,y,el) {		brd.highlightInfobox = function(x,y,el) {

A WASSERMANN at 17:54, 21 December 2009

2009-12-21T17:54:30Z

@@ Line 144: / Line 144: @@
 ===The code to produce this page===
-The HTML table is generated by this code:
+<source lang="javascript">
 <source lang="html4strict">
 <table id="mytable" style="border: 1px solid gray;">
@@ Line 268: / Line 283: @@
 </tr>
 </table>
 </source>
 [[Category:Examples]]
 [[Category:Charts]]

A WASSERMANN at 17:52, 21 December 2009

2009-12-21T17:52:58Z

← Older revision		Revision as of 17:52, 21 December 2009
Line 131:		Line 131:
	colors = ['black', '#333333', 'red', 'yellow', 'green'],		colors = ['black', '#333333', 'red', 'yellow', 'green'],
	years = [1949, 1953, 1957, 1961, 1965, 1969, 1972, 1976, 1980, 1983, 1987, 1990, 1994, 1998, 2002, 2005, 2009],		years = [1949, 1953, 1957, 1961, 1965, 1969, 1972, 1976, 1980, 1983, 1987, 1990, 1994, 1998, 2002, 2005, 2009],
	chart = brd.create('chart', ['mytable'], {chartStyle: 'point,line~~,box~~',		chart = brd.create('chart', ['mytable'], {chartStyle: 'point,line',
	withHeaders: false, colorArray: colors, strokeColor: colors,		withHeaders: false, colorArray: colors, strokeColor: colors,
	fillColor: colors, highlightFillColor: colors, highlightStrokeColor: colors});		fillColor: colors, highlightFillColor: colors, highlightStrokeColor: colors});
Line 271:		Line 271:
	<source lang="javascript">		<source lang="javascript">
	var brd = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-1, 50, 18, -5], axis: true, grid: false}),		var brd = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-1, 50, 18, -5], axis: true, grid: false}),
	colors = ['black', '#333333', 'red', 'yellow', 'green~~', '#8B00FF', 'orange', '#965220', '#96abee', 'gray', '#965220', 'red', 'blue', 'lightgray~~'],		colors = ['black', '#333333', 'red', 'yellow', 'green'],
	years = [1949, 1953, 1957, 1961, 1965, 1969, 1972, 1976, 1980, 1983, 1987, 1990, 1994, 1998, 2002, 2005, 2009],		years = [1949, 1953, 1957, 1961, 1965, 1969, 1972, 1976, 1980, 1983, 1987, 1990, 1994, 1998, 2002, 2005, 2009],
	chart = brd.create('chart', ['mytable'], {chartStyle: 'point,line',		chart = brd.create('chart', ['mytable'], {chartStyle: 'point,line',

A WASSERMANN at 17:52, 21 December 2009

2009-12-21T17:52:32Z

← Older revision		Revision as of 17:52, 21 December 2009
Line 129:		Line 129:
	<jsxgraph width="600" height="450">		<jsxgraph width="600" height="450">
	var brd = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-1, 50, 18, -5], axis: true, grid: false}),		var brd = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-1, 50, 18, -5], axis: true, grid: false}),
	colors = ['black', '#333333', 'red', 'yellow', 'green~~', '#8B00FF', 'orange', '#965220', '#96abee', 'gray', '#965220', 'red', 'blue', 'lightgray~~'],		colors = ['black', '#333333', 'red', 'yellow', 'green'],
	years = [1949, 1953, 1957, 1961, 1965, 1969, 1972, 1976, 1980, 1983, 1987, 1990, 1994, 1998, 2002, 2005, 2009],		years = [1949, 1953, 1957, 1961, 1965, 1969, 1972, 1976, 1980, 1983, 1987, 1990, 1994, 1998, 2002, 2005, 2009],
	chart = brd.create('chart', ['mytable'], {chartStyle: 'point,line,box',		chart = brd.create('chart', ['mytable'], {chartStyle: 'point,line,box',

A WASSERMANN at 17:50, 21 December 2009

2009-12-21T17:50:08Z

← Older revision		Revision as of 17:50, 21 December 2009
Line 131:		Line 131:
	colors = ['black', '#333333', 'red', 'yellow', 'green', '#8B00FF', 'orange', '#965220', '#96abee', 'gray', '#965220', 'red', 'blue', 'lightgray'],		colors = ['black', '#333333', 'red', 'yellow', 'green', '#8B00FF', 'orange', '#965220', '#96abee', 'gray', '#965220', 'red', 'blue', 'lightgray'],
	years = [1949, 1953, 1957, 1961, 1965, 1969, 1972, 1976, 1980, 1983, 1987, 1990, 1994, 1998, 2002, 2005, 2009],		years = [1949, 1953, 1957, 1961, 1965, 1969, 1972, 1976, 1980, 1983, 1987, 1990, 1994, 1998, 2002, 2005, 2009],
	chart = brd.create('chart', ['mytable'], {chartStyle: 'point',		chart = brd.create('chart', ['mytable'], {chartStyle: 'point,line,box',
	withHeaders: false, colorArray: colors, strokeColor: colors,		withHeaders: false, colorArray: colors, strokeColor: colors,
	fillColor: colors, highlightFillColor: colors, highlightStrokeColor: colors});		fillColor: colors, highlightFillColor: colors, highlightStrokeColor: colors});

A WASSERMANN at 17:49, 21 December 2009

2009-12-21T17:49:35Z

← Older revision		Revision as of 17:49, 21 December 2009
Line 131:		Line 131:
	colors = ['black', '#333333', 'red', 'yellow', 'green', '#8B00FF', 'orange', '#965220', '#96abee', 'gray', '#965220', 'red', 'blue', 'lightgray'],		colors = ['black', '#333333', 'red', 'yellow', 'green', '#8B00FF', 'orange', '#965220', '#96abee', 'gray', '#965220', 'red', 'blue', 'lightgray'],
	years = [1949, 1953, 1957, 1961, 1965, 1969, 1972, 1976, 1980, 1983, 1987, 1990, 1994, 1998, 2002, 2005, 2009],		years = [1949, 1953, 1957, 1961, 1965, 1969, 1972, 1976, 1980, 1983, 1987, 1990, 1994, 1998, 2002, 2005, 2009],
	chart = brd.create('chart', ['mytable'], {chartStyle: 'point~~,line~~',		chart = brd.create('chart', ['mytable'], {chartStyle: 'point',
	withHeaders: false, colorArray: colors, strokeColor: colors,		withHeaders: false, colorArray: colors, strokeColor: colors,
	fillColor: colors, highlightFillColor: colors, highlightStrokeColor: colors});		fillColor: colors, highlightFillColor: colors, highlightStrokeColor: colors});