WebSVN – lars-tiefland.cienc – Blame – /htdocs/backend/js/Highcharts-4.1.8/examples/renderer/index.htm

Revision	Autor	Zeilennr.	Zeile
9	lars	1	`<!DOCTYPE HTML>`
		2	`<html>`
		3	`<head>`
		4	`<meta http-equiv="Content-Type" content="text/html; charset=utf-8">`
		5	`<title>Highcharts Example</title>`
		6
		7	`<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>`
		8	`<style type="text/css">`
		9	`${demo.css}`
		10	`</style>`
		11	`<script type="text/javascript">`
		12	`$(function () {`
		13	`$('#container').highcharts({`
		14	`chart: {`
		15	`backgroundColor: 'white',`
		16	`events: {`
		17	`load: function () {`
		18
		19	`// Draw the flow chart`
		20	`var ren = this.renderer,`
		21	`colors = Highcharts.getOptions().colors,`
		22	`rightArrow = ['M', 0, 0, 'L', 100, 0, 'L', 95, 5, 'M', 100, 0, 'L', 95, -5],`
		23	`leftArrow = ['M', 100, 0, 'L', 0, 0, 'L', 5, 5, 'M', 0, 0, 'L', 5, -5];`
		24
		25
		26
		27	`// Separator, client from service`
		28	`ren.path(['M', 120, 40, 'L', 120, 330])`
		29	`.attr({`
		30	`'stroke-width': 2,`
		31	`stroke: 'silver',`
		32	`dashstyle: 'dash'`
		33	`})`
		34	`.add();`
		35
		36	`// Separator, CLI from service`
		37	`ren.path(['M', 420, 40, 'L', 420, 330])`
		38	`.attr({`
		39	`'stroke-width': 2,`
		40	`stroke: 'silver',`
		41	`dashstyle: 'dash'`
		42	`})`
		43	`.add();`
		44
		45	`// Headers`
		46	`ren.label('Web client', 20, 40)`
		47	`.css({`
		48	`fontWeight: 'bold'`
		49	`})`
		50	`.add();`
		51	`ren.label('Web service / CLI', 220, 40)`
		52	`.css({`
		53	`fontWeight: 'bold'`
		54	`})`
		55	`.add();`
		56	`ren.label('Command line client', 440, 40)`
		57	`.css({`
		58	`fontWeight: 'bold'`
		59	`})`
		60	`.add();`
		61
		62	`// SaaS client label`
		63	`ren.label('SaaS client<br/>(browser or<br/>script)', 10, 82)`
		64	`.attr({`
		65	`fill: colors[0],`
		66	`stroke: 'white',`
		67	`'stroke-width': 2,`
		68	`padding: 5,`
		69	`r: 5`
		70	`})`
		71	`.css({`
		72	`color: 'white'`
		73	`})`
		74	`.add()`
		75	`.shadow(true);`
		76
		77	`// Arrow from SaaS client to Phantom JS`
		78	`ren.path(rightArrow)`
		79	`.attr({`
		80	`'stroke-width': 2,`
		81	`stroke: colors[3]`
		82	`})`
		83	`.translate(95, 95)`
		84	`.add();`
		85
		86	`ren.label('POST options in JSON', 90, 75)`
		87	`.css({`
		88	`fontSize: '10px',`
		89	`color: colors[3]`
		90	`})`
		91	`.add();`
		92
		93	`ren.label('PhantomJS', 210, 82)`
		94	`.attr({`
		95	`r: 5,`
		96	`width: 100,`
		97	`fill: colors[1]`
		98	`})`
		99	`.css({`
		100	`color: 'white',`
		101	`fontWeight: 'bold'`
		102	`})`
		103	`.add();`
		104
		105	`// Arrow from Phantom JS to Batik`
		106	`ren.path(['M', 250, 110, 'L', 250, 185, 'L', 245, 180, 'M', 250, 185, 'L', 255, 180])`
		107	`.attr({`
		108	`'stroke-width': 2,`
		109	`stroke: colors[3]`
		110	`})`
		111	`.add();`
		112
		113	`ren.label('SVG', 255, 120)`
		114	`.css({`
		115	`color: colors[3],`
		116	`fontSize: '10px'`
		117	`})`
		118	`.add();`
		119
		120	`ren.label('Batik', 210, 200)`
		121	`.attr({`
		122	`r: 5,`
		123	`width: 100,`
		124	`fill: colors[1]`
		125	`})`
		126	`.css({`
		127	`color: 'white',`
		128	`fontWeight: 'bold'`
		129	`})`
		130	`.add();`
		131
		132	`// Arrow from Batik to SaaS client`
		133	`ren.path(['M', 235, 185, 'L', 235, 155, 'C', 235, 130, 235, 130, 215, 130,`
		134	`'L', 95, 130, 'L', 100, 125, 'M', 95, 130, 'L', 100, 135])`
		135	`.attr({`
		136	`'stroke-width': 2,`
		137	`stroke: colors[3]`
		138	`})`
		139	`.add();`
		140
		141	`ren.label('Rasterized image', 100, 110)`
		142	`.css({`
		143	`color: colors[3],`
		144	`fontSize: '10px'`
		145	`})`
		146	`.add();`
		147
		148	`// Browser label`
		149	`ren.label('Browser<br/>running<br/>Highcharts', 10, 180)`
		150	`.attr({`
		151	`fill: colors[0],`
		152	`stroke: 'white',`
		153	`'stroke-width': 2,`
		154	`padding: 5,`
		155	`r: 5`
		156	`})`
		157	`.css({`
		158	`color: 'white',`
		159	`width: '100px'`
		160	`})`
		161	`.add()`
		162	`.shadow(true);`
		163
		164
		165
		166	`// Arrow from Browser to Batik`
		167	`ren.path(rightArrow)`
		168	`.attr({`
		169	`'stroke-width': 2,`
		170	`stroke: colors[1]`
		171	`})`
		172	`.translate(95, 205)`
		173	`.add();`
		174
		175	`ren.label('POST SVG', 110, 185)`
		176	`.css({`
		177	`color: colors[1],`
		178	`fontSize: '10px'`
		179	`})`
		180	`.add();`
		181
		182	`// Arrow from Batik to Browser`
		183	`ren.path(leftArrow)`
		184	`.attr({`
		185	`'stroke-width': 2,`
		186	`stroke: colors[1]`
		187	`})`
		188	`.translate(95, 215)`
		189	`.add();`
		190
		191	`ren.label('Rasterized image', 100, 215)`
		192	`.css({`
		193	`color: colors[1],`
		194	`fontSize: '10px'`
		195	`})`
		196	`.add();`
		197
		198	`// Script label`
		199	`ren.label('Script', 450, 82)`
		200	`.attr({`
		201	`fill: colors[2],`
		202	`stroke: 'white',`
		203	`'stroke-width': 2,`
		204	`padding: 5,`
		205	`r: 5`
		206	`})`
		207	`.css({`
		208	`color: 'white',`
		209	`width: '100px'`
		210	`})`
		211	`.add()`
		212	`.shadow(true);`
		213
		214	`// Arrow from Script to PhantomJS`
		215	`ren.path(leftArrow)`
		216	`.attr({`
		217	`'stroke-width': 2,`
		218	`stroke: colors[2]`
		219	`})`
		220	`.translate(330, 90)`
		221	`.add();`
		222
		223	`ren.label('Command', 340, 70)`
		224	`.css({`
		225	`color: colors[2],`
		226	`fontSize: '10px'`
		227	`})`
		228	`.add();`
		229
		230	`// Arrow from PhantomJS to Script`
		231	`ren.path(rightArrow)`
		232	`.attr({`
		233	`'stroke-width': 2,`
		234	`stroke: colors[2]`
		235	`})`
		236	`.translate(330, 100)`
		237	`.add();`
		238
		239	`ren.label('Rasterized image', 330, 100)`
		240	`.css({`
		241	`color: colors[2],`
		242	`fontSize: '10px'`
		243	`})`
		244	`.add();`
		245
		246
		247	`}`
		248	`}`
		249	`},`
		250	`title: {`
		251	`text: 'Highcharts export server overview',`
		252	`style: {`
		253	`color: 'black'`
		254	`}`
		255	`}`
		256
		257	`});`
		258	`});`
		259	`</script>`
		260	`</head>`
		261	`<body>`
		262	`<script src="../../js/highcharts.js"></script>`
		263	`<script src="../../js/modules/exporting.js"></script>`
		264
		265	`<div id="container" style="width: 600px; height: 250px; margin: 0 auto"></div>`
		266
		267	`</body>`
		268	`</html>`

Subversion-Projekte lars-tiefland.cienc

(root)/htdocs/backend/js/Highcharts-4.1.8/examples/renderer/index.htm – Revision 9