Context Navigation

source: Dev/branches/jQueryUI/client/RGraph/docs/external.html @ 249

Last change on this file since 249 was 249, checked in by hendrikvanantwerpen, 13 years ago

This one's for Subversion, because it's so close...

First widget (stripped down sequencer).
Seperated client and server code in two direcotry trees.

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: