Context Navigation

source: Dev/branches/Cartis/Tiles preview/js/RGraph/docs/png.html @ 283

Last change on this file since 283 was 283, checked in by tjcschipper, 13 years ago

Cartis Mockup werkt!

W
I
N
N
I
N
G

File size: 8.7 KB

Line
1	<?php ob_start('ob_gzhandler') ?>
2	<!DOCTYPE html>
3	<html>
4	<head>
5	<meta http-equiv="X-UA-Compatible" content="chrome=1">
6	<!--
7	/**
8	* o------------------------------------------------------------------------------o
9	* \| This file is part of the RGraph package - you can learn more at: \|
10	* \| \|
11	* \| http://www.rgraph.net \|
12	* \| \|
13	* \| This package is licensed under the RGraph license. For all kinds of business \|
14	* \| purposes there is a small one-time licensing fee to pay and for non \|
15	* \| commercial purposes it is free to use. You can read the full license here: \|
16	* \| \|
17	* \| http://www.rgraph.net/LICENSE.txt \|
18	* o------------------------------------------------------------------------------o
19	*/
20	-->
21	<title>RGraph: Javascript charts and graph library - Retrieving a PNG of your graph</title>
22
23	<meta name="keywords" content="rgraph html5 canvas charts docs png image" />
24	<meta name="description" content="RGraph: Javascript charts and graph library - Retrieving a PNG representation of your chart" />
25
26	<meta property="og:title" content="RGraph: Javascript charts and graph library" />
27	<meta property="og:description" content="A charts library based on the HTML5 canvas tag" />
28	<meta property="og:image" content="http://www.rgraph.net/images/logo.jpg"/>
29
30	<link rel="stylesheet" href="../css/website.css" type="text/css" media="screen" />
31	<link rel="icon" type="image/png" href="/favicon.png">
32
33	<script src="../libraries/RGraph.common.core.js" ></script>
34	<script src="../libraries/RGraph.common.context.js" ></script>
35	<script src="../libraries/RGraph.line.js" ></script>
36	<!--[if IE 8]><script src="../excanvas/excanvas.original.js"></script><![endif]-->
37
38	<script>
39	window.onload = function ()
40	{
41	var line = new RGraph.Line('cvs', [4,3,7,4,5,6,7,4,8,9]);
42	line.Set('chart.labels', ['Dez', 'Fliss','Geoff','Hoolio','John','Rich','Kev','Charles','Lou','Bob']);
43	line.Set('chart.hmargin', 5);
44	line.Set('chart.title', 'Retrieving a PNG of your chart (context menu)');
45	line.Set('chart.title.vpos', 0.5);
46	line.Set('chart.tickmarks', 'endcircle');
47
48	line.Set('chart.contextmenu', [
49	['Get PNG', RGraph.showPNG],
50	null,
51	['Cancel', function () {}]
52	]);
53
54	line.Set('chart.linewidth', 2);
55	line.Set('chart.shadow', true);
56	line.Set('chart.shadow.offsetx', 0);
57	line.Set('chart.shadow.offsety', 0);
58	line.Set('chart.shadow.blur', 15);
59	line.Set('chart.shadow.color', 'red');
60
61	RGraph.Clear(line.canvas, 'white'); // This effectively sets the background color to be white
62
63	line.Draw();
64	}
65	</script>
66
67	<script>
68	var _gaq = _gaq \|\| [];
69	_gaq.push(['_setAccount', 'UA-54706-2']);
70	_gaq.push(['_trackPageview']);
71
72	(function() {
73	var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
74	ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
75	var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
76	})();
77	</script>
78
79	</head>
80	<body>
81
82	<!-- Social networking buttons -->
83	<div id="social_icons" class="warning" style="border-radius: 10px; top: 1px; position: fixed">
84	<a title="Bookmark with delicious" href="http://delicious.com/save?jump=close&v=4&noui&jump=close&url=http://www.rgraph.net&notes=RGraph%20is%20a%20HTML5%20based%20javascript%20charts%20library%20supporting%20a%20wide%20range%20of%20different%20charts%20types&title=RGraph:Javascript%20charts%20and%20graphs%20library" target="_blank"><img src="../images/delicious.png" alt="Bookmark with delicious" width="22" height="22" border="0" align="absmiddle" /></a>
85	<a href="http://twitter.com/home/?status=RGraph%3A%20Javascript+charts+and+graph+library+http%3A%2F%2Fwww.rgraph.net+%23rgraph+%23html5+%23canvas+%23javascript+%23charts+@_rgraph" target="_blank"><img src="../images/twitter.png" id="twitter_icon" alt="tweet this site" width="22" height="22" border="0" align="absmiddle" /></a>
86	</div>
87
88	<script>
89	// Opera fix
90	if (navigator.userAgent.indexOf('Opera') == -1) {
91	document.getElementById("social_icons").style.position = 'fixed';
92	}
93	</script>
94	<!-- Social networking buttons -->
95
96
97	<div id="breadcrumb">
98	<a href="../index.html">RGraph: Javascript charts and graph library</a>
99	>
100	<a href="index.html">Documentation</a>
101	>
102	Retrieving a PNG of your chart
103	</div>
104
105	<h1>RGraph: <span>Javascript charts and graph library</span> - Retrieving a PNG of your chart</h1>
106
107	<script>
108	if (RGraph.isIE8()) {
109	document.write('<div style="background-color: #fee; border: 2px dashed red; padding: 5px"><b>Important</b><br /><br /> Internet Explorer 8 does not natively support the HTML5 canvas tag, so if you want to see the charts, you can either:<ul><li>Install <a href="http://code.google.com/chrome/chromeframe/">Google Chrome Frame</a></li><li>Use ExCanvas. This is provided in the RGraph Archive.</li><li>Use another browser entirely. Your choices are Firefox 3.5+, Chrome 2+, Safari 4+ or Opera 10.5+. </li></ul> <b>Note:</b> Internet Explorer 9 fully supports the canvas tag. Click <a href="http://support.rgraph.net/message/rgraph-in-internet-explorer-9.html" target="_blank">here</a> to see some screenshots.</div>');
110	}
111	</script>
112
113	<style>
114	span#png_link {
115	position: absolute;
116	left: 500px;
117	top: 30px;
118	border: 1px black solid;
119	padding: 1px;
120	background-color: rgba(225,225,225,0.5);
121	cursor: pointer;
122	color: blue;
123	font-size: 12pt;
124	}
125	</style>
126
127	<div style="position: relative">
128	<span id="png_link" onclick="RGraph.showPNG(document.getElementById('cvs'), event);">Get PNG</span>
129	<canvas id="cvs" width="600" height="250" style="float: left">[No canvas support]</canvas>
130	</div>
131
132
133	<p>
134	RGraph provides an easy way to get a PNG image of your chart. This allows you to
135	easily save the image locally to use in (for example) a document, spreadsheet or presentation.
136	</p>
137
138	<p>
139	Originally, the function was designed to be used with a context menu, so it is located in the <i>RGraph.common.context.js</i>.
140	Now though, you do not have to use the function with a context menu, and can instead pass in the canvas as the optional argument. There's an
141	example of its usage on the first <a href="../examples/radar.html">Radar example</a href>.
142	</p>
143
144	<br clear="all" />
145
146	<p>Include the context menu code:</p>
147	<pre class="code"><script src="../libraries/RGraph.common.context.js" ></script></pre>
148
149	<p>Add the context menu:</p>
150	<pre class="code">
151	myGraph.Set('chart.contextmenu', [
152	<span style="color: green">['Get PNG', RGraph.showPNG]</span>,
153	null,
154	['Cancel', function () {}]
155	]);</pre>
156
157	<h4>Using the function without a context menu</h4>
158
159	<p>
160	If you want to use the function with a piece of text (or an image) as the "link", optionally positioned over the canvas, you can pass
161	the canvas into the function as an argument, along with the event object.
162	</p>
163
164	<pre class="code">
165	<!-- This CSS positions the link over the top right of the canvas -->
166	<style>
167	span#png_link {
168	position: absolute;
169	left: 450px;
170	top: 30px;
171	border: 1px black solid;
172	padding: 1px;
173	background-color: #eee;
174	cursor: pointer;
175	}
176	</style>
177
178	<div style="position: relative">
179	<span id="png_link" <span style="color: green">onclick="RGraph.showPNG(myCanvas, event)"</span>>Get PNG</span>
180	<canvas id="cvs" width="600" height="250">[No canvas support]</canvas>
181	</div>
182	</pre>
183
184	</body>
185	</html>

Note: See TracBrowser for help on using the repository browser.

Download in other formats: