Context Navigation

source: Dev/trunk/RGraph/docs/external.html @ 77

Last change on this file since 77 was 77, checked in by fpvanagthoven, 14 years ago
RGraph
File size: 15.5 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 - Integrating RGraph with external libraries</title>
22
23	<meta name="keywords" content="rgraph html5 canvas charts docs external libraries" />
24	<meta name="description" content="RGraph: Javascript charts and graph library - Documentation about integrating RGraph with external libraries" />
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.png"/>
29
30	<link rel="stylesheet" href="../css/website.css" type="text/css" media="screen" />
31	<link rel="icon" type="image/png" href="../images/favicon.png">
32
33	<script src="../libraries/RGraph.modaldialog.js" ></script>
34	<script src="../libraries/RGraph.common.core.js" ></script>
35	<script src="../libraries/RGraph.common.context.js" ></script>
36	<script src="../libraries/RGraph.line.js" ></script>
37	<!--[if IE 8]><script src="../excanvas/excanvas.original.js"></script><![endif]-->
38
39	<script>
40	window.onload = function ()
41	{
42	/**
43	* Draw the line chart
44	*/
45	var line = new RGraph.Line('myLine', [45,12,16,18,44,54,23,21,56,58,33,47]);
46	line.Set('chart.background.barcolor1', 'white');
47	line.Set('chart.background.barcolor2', 'white');
48	line.Set('chart.tickmarks', null);
49	line.Set('chart.hmargin', 10);
50	line.Set('chart.linewidth', 3);
51	line.Set('chart.shadow', true);
52	line.Set('chart.shadow.offset', 2);
53	line.Set('chart.labels', ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']);
54	line.Set('chart.title', 'A line chart with context menu');
55
56	// This defines a context menu which shows the dialog. The commented out
57	// bit defines an onclick handler on the background, so that when you
58	// click it (the background), the dialog is hidden.
59	line.Set('chart.contextmenu', [
60	['Login to admin area...', function () {ModalDialog.Show('myDialog', 300);/ModalDialog.background.onclick = function () {ModalDialog.Close();};/}],
61	null,
62	['Cancel', function () {}]
63	]);
64
65	line.Draw();
66	}
67	</script>
68
69
70	<style>
71	/*
72	* These are the CSS classes that you can use to customise the appearance of the ModalDialog. If you're trying to
73	* override something which the scripts set, then because of the ordering you may need to use the "! important"
74	* modifier.
75	*/
76	.ModalDialog_background {
77	}
78
79	.ModalDialog_dialog {
80	-webkit-box-shadow: gray 0 0 15px ! important;
81	-moz-box-shadow: 0 0 15px gray ! important;
82	box-shadow: 0 0 15px gray ! important;
83	}
84
85	.ModalDialog_topbar {
86	}
87	</style>
88
89	<script>
90	var _gaq = _gaq \|\| [];
91	_gaq.push(['_setAccount', 'UA-54706-2']);
92	_gaq.push(['_trackPageview']);
93
94	(function() {
95	var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
96	ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
97	var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
98	})();
99	</script>
100
101	</head>
102	<body>
103
104
105	<!-- Social networking buttons -->
106	<div id="social_icons" class="warning" style="border-radius: 10px; top: 1px; position: fixed">
107	<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>
108	<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>
109	</div>
110
111	<script>
112	// Opera fix
113	if (navigator.userAgent.indexOf('Opera') == -1) {
114	document.getElementById("social_icons").style.position = 'fixed';
115	}
116	</script>
117	<!-- Social networking buttons -->
118
119
120	<div id="breadcrumb">
121	<a href="../index.html">RGraph: Javascript charts and graph library</a>
122	>
123	<a href="index.html">Documentation</a>
124	>
125	Integrating RGraph with external libraries
126	</div>
127
128	<h1>RGraph: <span>Javascript charts and graph library</span> - Integrating RGraph with external libraries</h1>
129
130	<script>
131	if (RGraph.isIE8()) {
132	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>');
133	}
134	</script>
135
136	<ul>
137	<li><a href="#msie">Note about Microsoft Internet Explorer and the ModalDialog</a></li>
138	<li><a href="#hiding">Hiding the ModalDialog</a></li>
139	<li><a href="#customising">Customising the ModalDialog</a></li>
140	<li><a href="#integration">ModalDialog integration</a></li>
141	<li><a href="#covering">Covering the scroll bars</a></li>
142	</ul>
143
144	<canvas id="myLine" width="400" height="200" style="float: right">[No canvas support]</canvas>
145
146	<p>
147	This page shows you how you can easily integrate the charts with other external Javascript libraries. This particular example
148	adds a context menu to the chart, of which the only option is to show a login dialog. This could, for example, be used to
149	allow logging in to an admin area.
150	</p>
151
152	<p>
153	The dialog doesn't need to require user input - it could just be a static "Please wait..." type dialog, which is shown while a
154	subsequent page loads that takes a few seconds.
155	</p>
156
157	<p>
158	The ModalDialog was originally an external library, however it's now part of the RGraph package. It's also covered by the
159	RGraph license - so if you have an <a href="licensing.html">RGraph license</a>, then the ModalDialog is part of that.
160	</p>
161
162	<br /><br />
163
164	<pre class="code">
165	<script src="RGraph.common.core.js">
166	<script src="RGraph.common.context.js">
167	<script src="RGraph.line.js">
168	<script src="RGraph.modaldialog.js">
169
170	<script>
171	window.onload = function ()
172	{
173	/**
174	* Draw the line chart
175	*/
176	var line = new RGraph.Line('myLine', [45,12,16,18,44,54,23,21,56,58,33,47]);
177	line.Set('chart.background.barcolor1', 'white');
178	line.Set('chart.background.barcolor2', 'white');
179	line.Set('chart.tickmarks', null);
180	line.Set('chart.hmargin', 10);
181	line.Set('chart.linewidth', 3);
182	line.Set('chart.shadow', true);
183	line.Set('chart.shadow.offset', 2);
184	line.Set('chart.labels', ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']);
185	line.Set('chart.title', 'A line chart with context menu');
186	<span style="color: green">
187	// This defines a context menu which calls the given function. This function in turn shows the dialog
188	line.Set('chart.contextmenu', [['Login to admin area...', function () {ModalDialog.Show('myDialog', 300);}}]]);
189	</span>
190	line.Draw();
191	}
192	</script>
193
194	<!-- This is the popup dialog-->
195	<div id="myDialog" class="modalDialog" style="display: none">
196	<b>Please login</b>
197	<p>
198	<table border="0">
199	<tr>
200	<td align="right" style="padding-top: 4px">Email</td>
201	<td><input type="text" size="20" name="email" style="width: 150px" /></td>
202	</tr>
203	<tr>
204	<td align="right" style="padding-top: 4px">Password</td>
205	<td><input type="password" size="20" name="password" style="width: 150px" /></td>
206	</tr>
207	<tr>
208	<td colspan="2" align="right">
209	<input type="reset" value="Cancel" onclick="ModalDialog.Close()">
210	<input type="submit"
211	name="submit"
212	value="Login »"
213	onclick="alert('This is just an example'); event.stopPropagation()">
214	</td>
215	</tr>
216	</table>
217	</p>
218	</div>
219	<!-- End of dialog --></pre>
220
221	<p>
222	If you're interested in using this modal dialog, then you'll probably also want the CSS that styles it. This can be found in the
223	"css" directory.
224	</p>
225
226	<a name="msie"></a>
227	<h3>Note about Microsoft Internet Explorer 8 and the ModalDialog</h3>
228
229	<p>
230	Microsoft Internet Explorer 8 only supports fixed positioning in strict rendering mode, therefore you must specify a DTD
231	when using this browser. Eg:
232	</p>
233
234	<pre class="code">
235	<!DOCTYPE html >
236	</pre>
237
238	<a name="hiding"></a>
239	<h3>Hiding the ModalDialog</h3>
240	<p>
241	To hide the ModalDialog (from a "Cancel" button for example), you can use the Close() method:
242	</p>
243
244	<pre class="code">
245	<input type="reset" value="Cancel" onclick="ModalDialog.Close()">
246	</pre>
247
248	<a name="customising"></a>
249	<h3>Customising the ModalDialog</h3>
250	<p>
251	You can customise the appearance of the ModalDialog by using three CSS classes, which are documented <a href="css.html">here</a>.
252	This page customises the dialog slightly by changing the shadow X/Y offsets:
253	</p>
254
255	<pre class="code">
256	<style>
257	/*
258	* These are the CSS classes that you can use to customise the appearance of the ModalDialog. If you're trying to
259	* override something which the scripts set, then because of the ordering you may need to use the "! important"
260	* modifier.
261	*/
262
263	/**
264	* This is the semi-opaque background
265	*/
266	.ModalDialog_background {
267	}
268
269
270	/**
271	* This is the dialog itself
272	*/
273	.ModalDialog_dialog {
274	-webkit-box-shadow: gray 0 0 15px ! important;
275	-moz-box-shadow: 0 0 15px gray ! important;
276	box-shadow: 0 0 15px gray ! important;
277	}
278
279
280	/**
281	* This is gray bar at the top of the dialog
282	*/
283	.ModalDialog_topbar {
284	}
285	</style>
286	</pre>
287
288	<a name="integration"></a>
289	<h3>ModalDialog integration</h3>
290	<p>
291	To integrate the ModalDialog look at the sample code above (the key line is where the context menu is defined). The method you should call is <b>ModalDialog.Show(id, width)</b>.
292	The <i>id</i> is the <i>id</i> of the layer to use. Only the <i>.innerHTML</i> is used, not the layer itself, so it can be hidden by
293	setting the display CSS <i>display</i> property to <i>none</i>. The <i>width</i> is a number which is used as the width of the dialog.
294	</p>
295
296	<p>
297	The only library needed for the ModalDialog to work is <i>RGraph.modaldialog.js</i> - you do not need to use
298	<i>RGraph.common.js</i>. This makes for far smaller download requirements.
299	</p>
300
301	<a name="covering"></a>
302	<h3>Covering the scroll bars</h3>
303	<p>
304	Normally, a regular DIV lives inside the browser and cannot cover the scroll bars. There is however a way to achieve
305	this but it does mean that restructuring your website may be necessary, and it's done by using an IFRAME. The following
306	steps are involved:
307	</p>
308
309	<ol>
310	<li style="margin-top: 0">The index page of your website creates an IFRAME and sets it to cover the entire window.</li>
311	<li style="margin-top: 0">This IFRAME then loads the website.</li>
312	<li style="margin-top: 0">The DIV then covers the top-most window.</li></li>
313	</ol>
314
315	<p style="margin-bottom: 50px">
316	There is an example of this technique <a href="iframe-setup.html"><b>here</b></a>
317	</p>
318
319	<!-- This is the popup dialog-->
320
321	<div id="myDialog" class="modalDialog" style="display: none">
322
323	<b>Please login</b>
324	<p>
325	<table border="0">
326	<tr>
327	<td align="right" style="padding-top: 4px">Email</td>
328	<td><input type="text" size="20" name="email" style="width: 150px" /></td>
329	</tr>
330
331	<tr>
332	<td align="right" style="padding-top: 4px">Password</td>
333	<td><input type="password" size="20" name="password" style="width: 150px" /></td>
334	</tr>
335
336	<tr>
337	<td colspan="2" align="right">
338	<input type="reset" value="Cancel" onclick="ModalDialog.Close()">
339	<input type="submit" name="submit" value="Login »" onclick="alert('This is just an example'); event.stopPropagation()">
340	</td>
341	</tr>
342	</table>
343	</p>
344	</div>
345
346	<!-- End of dialog -->
347
348	</body>
349	</html>

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

Download in other formats: