diff options
| author | Yves Fischer <yvesf-git@xapek.org> | 2011-10-23 21:14:40 +0200 |
|---|---|---|
| committer | Yves Fischer <yvesf-git@xapek.org> | 2011-10-30 11:33:54 +0100 |
| commit | 770ba5201f5c60b2bb36602ff9d359f641e33125 (patch) | |
| tree | 2200757f04efbc281c4b3714bfe2e4fe911193b6 /schall/static/RGraph/examples | |
| parent | 77f5e686612898974e13f2a5df57c20e4e529363 (diff) | |
| download | mini-octopus-770ba5201f5c60b2bb36602ff9d359f641e33125.tar.gz mini-octopus-770ba5201f5c60b2bb36602ff9d359f641e33125.zip | |
Charting with flask, rgraph and custom "timeseries database"
Diffstat (limited to 'schall/static/RGraph/examples')
25 files changed, 3745 insertions, 0 deletions
diff --git a/schall/static/RGraph/examples/bar.html b/schall/static/RGraph/examples/bar.html new file mode 100644 index 0000000..ca1355f --- /dev/null +++ b/schall/static/RGraph/examples/bar.html @@ -0,0 +1,204 @@ +<!DOCTYPE html > +<html> +<head> + <meta http-equiv="X-UA-Compatible" content="chrome=1"> + + <!-- + /** + * o------------------------------------------------------------------------------o + * | This file is part of the RGraph package - you can learn more at: | + * | | + * | http://www.rgraph.net | + * | | + * | This package is licensed under the RGraph license. For all kinds of business | + * | purposes there is a small one-time licensing fee to pay and for non | + * | commercial purposes it is free to use. You can read the full license here: | + * | | + * | http://www.rgraph.net/LICENSE.txt | + * o------------------------------------------------------------------------------o + */ + --> + <title>RGraph: HTML5 Javascript charts library - bar charts</title> + + <meta name="keywords" content="rgraph html5 canvas example bar charts" /> + <meta name="description" content="RGraph: HTML5 Javascript charts library - Bar charts example" /> + + <meta property="og:title" content="RGraph: HTML5 Javascript charts library" /> + <meta property="og:description" content="A javascript charts library based on the HTML5 canvas tag" /> + <meta property="og:image" content="http://www.rgraph.net/images/logo.png"/> + + <link rel="stylesheet" href="../css/website.css" type="text/css" media="screen" /> + <link rel="icon" type="image/png" href="../images/favicon.png"> + + <!-- Place this tag in your head or just before your close body tag --> + <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> + + <script src="../libraries/RGraph.common.core.js" ></script> + <script src="../libraries/RGraph.common.effects.js" ></script> + <script src="../libraries/RGraph.common.tooltips.js" ></script> + <script src="../libraries/RGraph.bar.js" ></script> + <!--[if IE 8]><script src="../excanvas/excanvas.original.js"></script><![endif]--> + + <script> + /** + * The onload function creates the graph + */ + window.onload = function () + { + + var bar1 = new RGraph.Bar('bar1', [ + [0.000092, 0.00008], + [0.000034, 0.000057], + [0.000056, 0.000062], + [0.000055, 0.000045], + [0.000036, 0.000012], + [0.000044, 0.000056], + [0.000051, 0.000066], + [0.000068, 0.000088]]); + bar1.Set('chart.background.barcolor1', 'white'); + bar1.Set('chart.background.barcolor2', 'white'); + bar1.Set('chart.labels', ['1st', '2nd', '3rd', '4th', '5th', '6th', '7th', '8th']); + bar1.Set('chart.key', ['John', 'Bob']); + bar1.Set('chart.key.position.y', 35); + bar1.Set('chart.key.position', 'gutter'); + bar1.Set('chart.key.background', 'rgb(255,255,255)'); + bar1.Set('chart.colors', ['#77f', '#7f7']); + bar1.Set('chart.shadow', true); + bar1.Set('chart.shadow.blur', 15); + bar1.Set('chart.shadow.offsetx', 0); + bar1.Set('chart.shadow.offsety', 0); + bar1.Set('chart.shadow.color', '#aaa'); + bar1.Set('chart.yaxispos', 'right'); + bar1.Set('chart.strokestyle', 'rgba(0,0,0,0)'); + bar1.Set('chart.gutter.left', 5); + bar1.Set('chart.gutter.right', 55); + bar1.Draw(); + + var bar2 = new RGraph.Bar('bar2', [[30,20,19,21], [23,25, 27, 30], [30,25,29, 32], [27,28,35,33], [26,18,29,30], [31,20,25,27], [39,28,28,35], [27,29,28,29], [26,23,26,27], [30,20,19,21], [30,20,19,21], [30,20,19,21]]); + bar2.Set('chart.units.pre', '$'); + bar2.Set('chart.title', 'Sales in the last 8 months (tooltips)'); + bar2.Set('chart.title.vpos', 0.5); + bar2.Set('chart.colors', ['red', 'yellow', 'green', 'orange']); + bar2.Set('chart.gutter.left', 40); + bar2.Set('chart.gutter.right', 5); + bar2.Set('chart.gutter.top', 40); + bar2.Set('chart.gutter.bottom', 50); + bar2.Set('chart.shadow', true); + bar2.Set('chart.shadow.color', '#aaa'); + bar2.Set('chart.background.barcolor1', 'white'); + bar2.Set('chart.background.barcolor2', 'white'); + bar2.Set('chart.background.grid.hsize', 5); + bar2.Set('chart.background.grid.vsize', 5); + bar2.Set('chart.grouping', 'stacked'); + bar2.Set('chart.labels', ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September','October','November','December']); + bar2.Set('chart.labels.above', true); + bar2.Set('chart.key', ['Richard', 'Barbara', 'Johnny', 'Frederick']); + bar2.Set('chart.key.background', 'rgba(255,255,255,0.7)'); + bar2.Set('chart.key.position', 'gutter'); + bar2.Set('chart.key.position.gutter.boxed', false); + bar2.Set('chart.key.position.y', bar2.Get('chart.gutter.top') - 15); + bar2.Set('chart.key.border', false); + bar2.Set('chart.background.grid.width', 0.3); // Decimals are permitted + bar2.Set('chart.text.angle', 35); + bar2.Set('chart.strokestyle', 'rgba(0,0,0,0)'); + bar2.Set('chart.tooltips.event', 'onmousemove'); + + if (!RGraph.isIE8()) { + tooltipFunc = function (i) + { + var r = i % 4; + + if (r == 3) return 'John' + else if (r == 2) return 'Rich'; + else if (r == 1) return 'Jane'; + else if (r == 0) return 'Quentin'; + } + bar2.Set('chart.tooltips', tooltipFunc); + } + + if (!RGraph.isIE8()) { + RGraph.Effects.Bar.Grow(bar2); + } else { + bar2.Draw(); + } + } + </script> + + <script> + var _gaq = _gaq || []; + _gaq.push(['_setAccount', 'UA-54706-2']); + _gaq.push(['_trackPageview']); + + (function() { + var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; + ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; + var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); + })(); + </script> +</head> +<body> + <!-- Social networking buttons --> + <div id="social_icons" class="warning" style="border-radius: 10px; top: 1px; position: fixed; width: 120px; height: 20px"> + <!-- <a title="Bookmark with delicious" href="http://delicious.com/save?jump=close&v=4&noui&jump=close&url=http://www.rgraph.net¬es=RGraph%20is%20a%20HTML5%20based%20javascript%20charts%20library%20supporting%20a%20wide%20range%20of%20different%20chart%20types&title=RGraph:%20Javascript%20charts%20%26%20graph%20library" target="_blank"><img src="../images/delicious.png" alt="Bookmark with delicious" width="22" height="22" border="0" style="position: relative; top: 1px" /></a> --> + <a href="http://twitter.com/home/?status=RGraph%3A%20Javascript+charts+library+http%3A%2F%2Fwww.rgraph.net+%23rgraph+%23html5+%23canvas+%23javascript+%23charts+@_rgraph" target="_blank" title="Mention RGraph on Twitter"><img src="../images/twitter.png" alt="Mention RGraph on Twitter"/></a> + <iframe src="http://www.facebook.com/plugins/like.php?app_id=253862424642173&href=http%3A%2F%2Fwww.rgraph.net&send=false&layout=button_count&width=450&show_faces=false&action=like&colorscheme=light&font=arial&height=21" scrolling="no" frameborder="0" style="width: 80px; height:21px; position: relative; top: 1px"></iframe> + </div> + + <script> + // Opera fix + if (navigator.userAgent.indexOf('Opera') == -1) { + document.getElementById("social_icons").style.position = 'fixed'; + } + </script> + + <div id="google_plusone"> + <!-- Place this tag where you want the +1 button to render --> + <g:plusone href="http://www.rgraph.net"></g:plusone> + </div> + <!-- Social networking buttons --> + + <div id="breadcrumb"> + <a href="../index.html">RGraph: HTML5 Javascript charts library</a> + > + <a href="./index.html">Examples</a> + > + Bar charts + </div> + + <h1>RGraph: <span>HTML5 Javascript charts library</span> - Bar charts</h1> + + <script> + if (RGraph.isIE8()) { + 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.</div>'); + } + </script> + + <div> + <p> + The bar chart is probably one of the most widely used of charts, and also one of the most versatile. It's defined as a chart with + rectangular bars with lengths proportional to the values they represent. The bar chart can be used to represent two + or more values. With grouped and stacked bar charts, you can visualise two or more sets of data. For example two years + worth of sales figures. Doing this you will be able to easily see differences, for example a better year when it comes + to sales. You can also show negative values by having the X axis in the center, like the examples shown. If you use a + grouped or stacked bar chart, a key may be helpful to your users. + </p> + + <p> + By using the tooltips feature, you can provide more detail about what a particular bar represents. The tooltips in + <b>RGraph</b> can contain wide range of HTML, so you can use them to show photos or movies for example. + </p> + + <div> + <ul> + <li><a href="../docs/bar.html">Bar chart API documentation</a></li> + </ul> + </div> + + <div> + <canvas id="bar1" width="450" height="200">[No canvas support]</canvas> + <canvas id="bar2" width="450" height="200">[No canvas support]</canvas> + </div> + </div> + +</body> +</html>
\ No newline at end of file diff --git a/schall/static/RGraph/examples/basic.html b/schall/static/RGraph/examples/basic.html new file mode 100644 index 0000000..cbc5522 --- /dev/null +++ b/schall/static/RGraph/examples/basic.html @@ -0,0 +1,63 @@ +<!DOCTYPE html> +<html> +<head> + <meta http-equiv="X-UA-Compatible" content="chrome=1"> + <!-- + /** + * o------------------------------------------------------------------------------o + * | This file is part of the RGraph package - you can learn more at: | + * | | + * | http://www.rgraph.net | + * | | + * | This package is licensed under the RGraph license. For all kinds of business | + * | purposes there is a small one-time licensing fee to pay and for non | + * | commercial purposes it is free to use. You can read the full license here: | + * | | + * | http://www.rgraph.net/LICENSE.txt | + * o------------------------------------------------------------------------------o + */ + --> + + <title>RGraph: HTML5 Javascript charts library - a basic example</title> + + <meta name="keywords" content="rgraph javascript charts html5 canvas basic example" /> + <meta name="description" content="RGraph: HTML5 Javascript charts library - A basic example" /> + + <!-- 1/3. Include the RGraph libraries --> + <script src="../libraries/RGraph.common.core.js" ></script> + <script src="../libraries/RGraph.bar.js" ></script> + <!--[if IE 8]><script src="../excanvas/excanvas.original.js"></script><![endif]--> + +</head> + +<body> + + <h1>RGraph: HTML5 Javascript charts library - A basic example</h1> + + <!-- 2/3. This is the canvas that the graph is drawn on --> + <canvas id="myBar" width="1000" height="250">[No canvas support]</canvas> + + <!-- + 3/3. This creates and displays the graph. As it is here, you can call this from the window.onload event, + allowing you to put it in your pages header. + --> + <script> + window.onload = function () + { + var bar = new RGraph.Bar('myBar', [12,13,16,15,16,19,19,12,23,16,13,24]); + bar.Set('chart.gutter.left', 35); + bar.Set('chart.colors', ['red']); + bar.Set('chart.title', 'A basic graph'); + bar.Set('chart.labels', ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']); + bar.Draw(); + } + </script> + + <p> + This is a very basic example that does little more than display a chart. If you're trying to understand how RGraph + works, this should help as there is very little happening on this page. To see the source code of this + page simply view the source (Right click > View Source). + </p> + +</body> +</html>
\ No newline at end of file diff --git a/schall/static/RGraph/examples/bipolar.html b/schall/static/RGraph/examples/bipolar.html new file mode 100644 index 0000000..22854c5 --- /dev/null +++ b/schall/static/RGraph/examples/bipolar.html @@ -0,0 +1,152 @@ +<!DOCTYPE html> +<html> +<head> + + <meta http-equiv="X-UA-Compatible" content="chrome=1"> + + <!-- + /** + * o------------------------------------------------------------------------------o + * | This file is part of the RGraph package - you can learn more at: | + * | | + * | http://www.rgraph.net | + * | | + * | This package is licensed under the RGraph license. For all kinds of business | + * | purposes there is a small one-time licensing fee to pay and for non | + * | commercial purposes it is free to use. You can read the full license here: | + * | | + * | http://www.rgraph.net/LICENSE.txt | + * o------------------------------------------------------------------------------o + */ + --> + <title>RGraph: HTML5 Javascript charts library - bi-polar charts</title> + + <meta name="keywords" content="rgraph html5 canvas example bipolar charts" /> + <meta name="description" content="RGraph: HTML5 Javascript charts library - Bipolar charts example" /> + + <meta property="og:title" content="RGraph: HTML5 Javascript charts library" /> + <meta property="og:description" content="A charts library based on the HTML5 canvas tag" /> + <meta property="og:image" content="http://www.rgraph.net/images/logo.png"/> + + <link rel="stylesheet" href="../css/website.css" type="text/css" media="screen" /> + <link rel="icon" type="image/png" href="../images/favicon.png"> + + <!-- Place this tag in your head or just before your close body tag --> + <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> + + <script src="../libraries/RGraph.common.core.js"></script> + <script src="../libraries/RGraph.common.tooltips.js"></script> + <script src="../libraries/RGraph.bipolar.js"></script> + <!--[if IE 8]><script src="../excanvas/excanvas.original.js"></script><![endif]--> + + <script> + window.onload = function () + { + var left = [5,6,8,9,12,13,4,9]; + var right = [5,8,4,11,15,26,13,16]; + + var bipolar1 = new RGraph.Bipolar('bipolar1', left, right); + bipolar1.Set('chart.colors', ['red']); + bipolar1.Set('chart.labels', ['Barry', 'John', 'Fred', 'George', 'Rich', 'Larry', 'John', 'Mike']); + bipolar1.Set('chart.title.left', '2007'); + bipolar1.Set('chart.title.right', '2008'); + bipolar1.Set('chart.title', 'Sales'); + + if (!RGraph.isIE8()) { + bipolar1.Set('chart.tooltips', ['Barry', 'John', 'Fred', 'George', 'Rich', 'Larry', 'John', 'Mike', 'Barry', 'John', 'Fred', 'George', 'Rich', 'Larry', 'John', 'Mike']); + bipolar1.Set('chart.tooltips.effect', 'fade'); + } + + bipolar1.Set('chart.units.post', 'k'); + bipolar1.Set('chart.xmax', 35); + bipolar1.Set('chart.shadow', true); + bipolar1.Set('chart.shadow.offsety', 0); + bipolar1.Set('chart.shadow.offsetx', 0); + bipolar1.Set('chart.shadow.color', '#aaa'); + bipolar1.Set('chart.shadow.blur', 25); + bipolar1.Draw(); + + + + var bipolar2 = new RGraph.Bipolar('bipolar2', left, right); + bipolar2.Set('chart.labels', ['Ferrari', 'Porsche', 'Honda', 'Mazda', 'Aston', 'BMW','Ford','Renault']); + bipolar2.Set('chart.title.left', 'July') + bipolar2.Set('chart.title.right', 'August'); + bipolar2.Set('chart.title', 'Vehicle market share'); + bipolar2.Set('chart.units.post', 'k'); + bipolar2.Draw(); + } + </script> + + <script> + var _gaq = _gaq || []; + _gaq.push(['_setAccount', 'UA-54706-2']); + _gaq.push(['_trackPageview']); + + (function() { + var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; + ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; + var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); + })(); + </script> +</head> +<body> + <!-- Social networking buttons --> + <div id="social_icons" class="warning" style="border-radius: 10px; top: 1px; position: fixed; width: 120px; height: 20px"> + <!-- <a title="Bookmark with delicious" href="http://delicious.com/save?jump=close&v=4&noui&jump=close&url=http://www.rgraph.net¬es=RGraph%20is%20a%20HTML5%20based%20javascript%20charts%20library%20supporting%20a%20wide%20range%20of%20different%20chart%20types&title=RGraph:%20Javascript%20charts%20%26%20graph%20library" target="_blank"><img src="../images/delicious.png" alt="Bookmark with delicious" width="22" height="22" border="0" style="position: relative; top: 1px" /></a> --> + <a href="http://twitter.com/home/?status=RGraph%3A%20Javascript+charts+library+http%3A%2F%2Fwww.rgraph.net+%23rgraph+%23html5+%23canvas+%23javascript+%23charts+@_rgraph" target="_blank" title="Mention RGraph on Twitter"><img src="../images/twitter.png" alt="Mention RGraph on Twitter"/></a> + <iframe src="http://www.facebook.com/plugins/like.php?app_id=253862424642173&href=http%3A%2F%2Fwww.rgraph.net&send=false&layout=button_count&width=450&show_faces=false&action=like&colorscheme=light&font=arial&height=21" scrolling="no" frameborder="0" style="width: 80px; height:21px; position: relative; top: 1px"></iframe> + </div> + + <script> + // Opera fix + if (navigator.userAgent.indexOf('Opera') == -1) { + document.getElementById("social_icons").style.position = 'fixed'; + } + </script> + + <div id="google_plusone"> + <!-- Place this tag where you want the +1 button to render --> + <g:plusone href="http://www.rgraph.net"></g:plusone> + </div> + <!-- Social networking buttons --> + +<div id="breadcrumb"> + <a href="../index.html">RGraph: HTML5 Javascript charts library</a> + > + <a href="./index.html">Examples</a> + > + Bi-polar chart +</div> + + +<h1>RGraph: <span>HTML5 Javascript charts library</span> - Bi-polar charts</h1> + + <script> + if (RGraph.isIE8()) { + 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.</div>'); + } + </script> + + <div> + <p> + The Bi-polar chart is also known as an age-frequency chart or a population pyramid. It allows you to very straight forwardly + compare two sets of data. For example two years worth of sales figues. Using this type of chart abnormalities will become + apparent. Other charts that would also be comparable, include a grouped bar chart, a stacked bar chart, and a multiple + line chart. + </p> + + <div> + <ul> + <li><a href="../docs/bipolar.html">Bi-polar chart API documentation</a></li> + </ul> + </div> + + <div> + <canvas id="bipolar1" width="475" height="250">[No canvas support]</canvas> + <canvas id="bipolar2" width="475" height="250">[No canvas support]</canvas> + </div> + </div> + +</body> +</html>
\ No newline at end of file diff --git a/schall/static/RGraph/examples/donut.html b/schall/static/RGraph/examples/donut.html new file mode 100644 index 0000000..9f8506f --- /dev/null +++ b/schall/static/RGraph/examples/donut.html @@ -0,0 +1,167 @@ +<!DOCTYPE html> +<html> +<head> + <meta http-equiv="X-UA-Compatible" content="chrome=1"> + <!-- + /** + * o------------------------------------------------------------------------------o + * | This file is part of the RGraph package - you can learn more at: | + * | | + * | http://www.rgraph.net | + * | | + * | This package is licensed under the RGraph license. For all kinds of business | + * | purposes there is a small one-time licensing fee to pay and for non | + * | commercial purposes it is free to use. You can read the full license here: | + * | | + * | http://www.rgraph.net/LICENSE.txt | + * o------------------------------------------------------------------------------o + */ + --> + <title>RGraph: HTML5 Javascript charts library - donut charts</title> + + <meta name="keywords" content="rgraph html5 canvas example donut charts" /> + <meta name="description" content="RGraph: HTML5 Javascript charts library - Donut charts examples" /> + + <meta property="og:title" content="RGraph: HTML5 Javascript charts library" /> + <meta property="og:description" content="A charts library based on the HTML5 canvas tag" /> + <meta property="og:image" content="http://www.rgraph.net/images/logo.png"/> + + <link rel="stylesheet" href="../css/website.css" type="text/css" media="screen" /> + <link rel="icon" type="image/png" href="../images/favicon.png"> + + <!-- Place this tag in your head or just before your close body tag --> + <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> + + <script src="../libraries/RGraph.common.core.js" ></script> + <script src="../libraries/RGraph.common.context.js" ></script> + <script src="../libraries/RGraph.common.annotate.js" ></script> + <script src="../libraries/RGraph.common.tooltips.js" ></script> + <script src="../libraries/RGraph.common.zoom.js" ></script> + <script src="../libraries/RGraph.pie.js" ></script> + <!--[if IE 8]><script src="../excanvas/excanvas.original.js"></script><![endif]--> + + <script> + window.onload = function () + { + var donut = new RGraph.Pie('donut1', [41,37,16,3,3]); + donut.Set('chart.variant', 'donut'); + donut.Set('chart.linewidth', 5); + donut.Set('chart.strokestyle', 'white'); + donut.Set('chart.title', "Browser share"); + donut.Set('chart.key', ['MSIE 7 (41%)', 'MSIE 6 (37%)', 'Firefox (16%)', 'Safari (3%)', 'Other (3%)']); + donut.Set('chart.key.shadow', true); + donut.Set('chart.key.shadow.offsetx', 0); + donut.Set('chart.key.shadow.offsety', 0); + donut.Set('chart.key.shadow.blur', 15); + donut.Set('chart.key.shadow.color', '#ccc'); + donut.Set('chart.key.position', 'graph'); + donut.Set('chart.align', 'left'); + donut.Draw(); + + + function getGradient(obj, color) + { + var gradient = obj.context.createRadialGradient(obj.canvas.width / 2, obj.canvas.height / 2, 0, obj.canvas.width / 2, obj.canvas.height / 2, 200); + gradient.addColorStop(0, 'black'); + gradient.addColorStop(0.5, color); + gradient.addColorStop(1, 'black'); + + return RGraph.isIE8() ? color : gradient; + } + + var donut2 = new RGraph.Pie('donut2', [8,6,5,3,8,9,9,4]); + + // Create the gradients + var gradient = getGradient(donut2, 'red'); + var gradient2 = getGradient(donut2, 'green'); + var gradient3 = getGradient(donut2, 'pink'); + var gradient4 = getGradient(donut2, 'yellow'); + var gradient5 = getGradient(donut2, 'grey'); + var gradient6 = getGradient(donut2, 'cyan'); + var gradient7 = getGradient(donut2, 'red'); + var gradient8 = getGradient(donut2, '#ddd'); + var gradient9 = getGradient(donut2, 'blue'); + + donut2.Set('chart.variant', 'donut'); + donut2.Set('chart.labels', ['Flipper', 'Harry', 'Ben', 'Richard', 'Keith', 'Ben', 'George', 'Barry']); + donut2.Set('chart.title', "Sales figures for week 43"); + donut2.Set('chart.gutter.left', 35); + donut2.Set('chart.gutter.right', 35); + donut2.Set('chart.strokestyle', 'rgba(0,0,0,0)'); + donut2.Set('chart.colors', [gradient, gradient2, gradient3, gradient4, gradient5, gradient6, gradient7, gradient8, gradient9]); + donut2.Draw(); + } + </script> + + <script> + var _gaq = _gaq || []; + _gaq.push(['_setAccount', 'UA-54706-2']); + _gaq.push(['_trackPageview']); + + (function() { + var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; + ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; + var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); + })(); + </script> +</head> +<body> + + <!-- Social networking buttons --> + <div id="social_icons" class="warning" style="border-radius: 10px; top: 1px; position: fixed; width: 120px; height: 20px"> + <!-- <a title="Bookmark with delicious" href="http://delicious.com/save?jump=close&v=4&noui&jump=close&url=http://www.rgraph.net¬es=RGraph%20is%20a%20HTML5%20based%20javascript%20charts%20library%20supporting%20a%20wide%20range%20of%20different%20chart%20types&title=RGraph:%20Javascript%20charts%20%26%20graph%20library" target="_blank"><img src="../images/delicious.png" alt="Bookmark with delicious" width="22" height="22" border="0" style="position: relative; top: 1px" /></a> --> + <a href="http://twitter.com/home/?status=RGraph%3A%20Javascript+charts+library+http%3A%2F%2Fwww.rgraph.net+%23rgraph+%23html5+%23canvas+%23javascript+%23charts+@_rgraph" target="_blank" title="Mention RGraph on Twitter"><img src="../images/twitter.png" alt="Mention RGraph on Twitter"/></a> + <iframe src="http://www.facebook.com/plugins/like.php?app_id=253862424642173&href=http%3A%2F%2Fwww.rgraph.net&send=false&layout=button_count&width=450&show_faces=false&action=like&colorscheme=light&font=arial&height=21" scrolling="no" frameborder="0" style="width: 80px; height:21px; position: relative; top: 1px"></iframe> + </div> + + <script> + // Opera fix + if (navigator.userAgent.indexOf('Opera') == -1) { + document.getElementById("social_icons").style.position = 'fixed'; + } + </script> + + <div id="google_plusone"> + <!-- Place this tag where you want the +1 button to render --> + <g:plusone href="http://www.rgraph.net"></g:plusone> + </div> + <!-- Social networking buttons --> + +<div id="breadcrumb"> + <a href="../index.html">RGraph: HTML5 Javascript charts library</a> + > + <a href="./index.html">Examples</a> + > + Donut charts +</div> + +<h1>RGraph: <span>HTML5 Javascript charts library</span> - Donut charts</h1> + + <script> + if (RGraph.isIE8()) { + 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.</div>'); + } + </script> + + <div> + + <p> + Formerly the Donut chart was a separate class, though now it's a variant of the Pie chart. This means smaller downloads and + a much simpler implementation. Essentially it's a Pie chart with a big hole in the middle. + </p> + + <div> + <ul> + <li><a href="../docs/pie.html">Pie charts API documentation</a></li> + </ul> + </div> + + <div> + <canvas id="donut1" width="430" height="350">[No canvas support]</canvas> + <canvas id="donut2" width="450" height="350">[No canvas support]</canvas> + </div> + </div> + + +</body> +</html>
\ No newline at end of file diff --git a/schall/static/RGraph/examples/fuel.html b/schall/static/RGraph/examples/fuel.html new file mode 100644 index 0000000..9a7867c --- /dev/null +++ b/schall/static/RGraph/examples/fuel.html @@ -0,0 +1,132 @@ +<!DOCTYPE html > +<html> +<head> + <meta http-equiv="X-UA-Compatible" content="chrome=1"> + + <!-- + /** + * o------------------------------------------------------------------------------o + * | This file is part of the RGraph package - you can learn more at: | + * | | + * | http://www.rgraph.net | + * | | + * | This package is licensed under the RGraph license. For all kinds of business | + * | purposes there is a small one-time licensing fee to pay and for non | + * | commercial purposes it is free to use. You can read the full license here: | + * | | + * | http://www.rgraph.net/LICENSE.txt | + * o------------------------------------------------------------------------------o + */ + --> + <title>RGraph: HTML5 Javascript charts library - fuel charts</title> + + <meta name="keywords" content="rgraph html5 canvas example fuel chart" /> + <meta name="description" content="RGraph: HTML5 Javascript charts library - Fuel chart example" /> + + <meta property="og:title" content="RGraph: HTML5 Javascript charts library" /> + <meta property="og:description" content="A charts library based on the HTML5 canvas tag" /> + <meta property="og:image" content="http://www.rgraph.net/images/logo.png"/> + + <link rel="stylesheet" href="../css/website.css" type="text/css" media="screen" /> + <link rel="icon" type="image/png" href="../images/favicon.png"> + + <!-- Place this tag in your head or just before your close body tag --> + <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> + + <script src="../libraries/RGraph.common.core.js" ></script> + <script src="../libraries/RGraph.common.effects.js" ></script> + <script src="../libraries/RGraph.fuel.js" ></script> + <!--[if IE 8]><script src="../excanvas/excanvas.original.js"></script><![endif]--> + + <script> + window.onload = function () + { + // MIN, MAX, INDICATED + var fuel1 = new RGraph.Fuel('fuel1',0,100,78); + RGraph.isIE8() ? fuel1.Draw() : RGraph.Effects.Fuel.Grow(fuel1); + + var fuel2 = new RGraph.Fuel('fuel2', 50, 100, 67); + fuel2.Set('chart.needle.color', 'blue'); + fuel2.Set('chart.colors', ['#ddf']); + fuel2.Set('chart.labels.empty', 'Half full\r\n(50l)'); + fuel2.Set('chart.labels.full', 'Full\r\n(100l)'); + fuel2.Set('chart.icon', '/images/water.jpg'); + fuel2.Draw(); + } + </script> + + <script> + var _gaq = _gaq || []; + _gaq.push(['_setAccount', 'UA-54706-2']); + _gaq.push(['_trackPageview']); + + (function() { + var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; + ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; + var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); + })(); + </script> + +</head> +<body> + + + <!-- Social networking buttons --> + <div id="social_icons" class="warning" style="border-radius: 10px; top: 1px; position: fixed; width: 120px; height: 20px"> + <!-- <a title="Bookmark with delicious" href="http://delicious.com/save?jump=close&v=4&noui&jump=close&url=http://www.rgraph.net¬es=RGraph%20is%20a%20HTML5%20based%20javascript%20charts%20library%20supporting%20a%20wide%20range%20of%20different%20chart%20types&title=RGraph:%20Javascript%20charts%20%26%20graph%20library" target="_blank"><img src="../images/delicious.png" alt="Bookmark with delicious" width="22" height="22" border="0" style="position: relative; top: 1px" /></a> --> + <a href="http://twitter.com/home/?status=RGraph%3A%20Javascript+charts+library+http%3A%2F%2Fwww.rgraph.net+%23rgraph+%23html5+%23canvas+%23javascript+%23charts+@_rgraph" target="_blank" title="Mention RGraph on Twitter"><img src="../images/twitter.png" alt="Mention RGraph on Twitter"/></a> + <iframe src="http://www.facebook.com/plugins/like.php?app_id=253862424642173&href=http%3A%2F%2Fwww.rgraph.net&send=false&layout=button_count&width=450&show_faces=false&action=like&colorscheme=light&font=arial&height=21" scrolling="no" frameborder="0" style="width: 80px; height:21px; position: relative; top: 1px"></iframe> + </div> + + <script> + // Opera fix + if (navigator.userAgent.indexOf('Opera') == -1) { + document.getElementById("social_icons").style.position = 'fixed'; + } + </script> + + <div id="google_plusone"> + <!-- Place this tag where you want the +1 button to render --> + <g:plusone href="http://www.rgraph.net"></g:plusone> + </div> + <!-- Social networking buttons --> + + +<div id="breadcrumb"> + <a href="../index.html">RGraph: HTML5 Javascript charts library</a> + > + <a href="./index.html">Examples</a> + > + Fuel Gauge +</div> + +<h1>RGraph: <span>HTML5 Javascript charts library</span> - Fuel Gauge charts</h1> + + <script> + if (RGraph.isIE8()) { + 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.</div>'); + } + </script> + + <div> + <p> + The Fuel Gauge is a variation on the Meter that could be incorporated into a control panel or similar. The center image, + the colors and the text can all be customised as the two examples below show. The border on the second chart is simply + a CSS border on the canvas. The fuel icon is the default icon for the chart and uses a data: URL - ie there's no + external image necessary. + </p> + + <div> + <ul> + <li><a href="../docs/fuel.html">Fuel Gauge API documentation</a></li> + </ul> + </div> + + <div style="text-align: center"> + <canvas id="fuel1" width="200" height="200">[Please wait...]</canvas> + <canvas id="fuel2" width="200" height="200" style="background-color: white; border: 1px solid #ccc">[No canvas support]</canvas> + </div> + </div> + +</body> +</html>
\ No newline at end of file diff --git a/schall/static/RGraph/examples/funnel.html b/schall/static/RGraph/examples/funnel.html new file mode 100644 index 0000000..943e905 --- /dev/null +++ b/schall/static/RGraph/examples/funnel.html @@ -0,0 +1,175 @@ +<!DOCTYPE html> +<html> +<head> + <meta http-equiv="X-UA-Compatible" content="chrome=1"> + <!-- + /** + * o------------------------------------------------------------------------------o + * | This file is part of the RGraph package - you can learn more at: | + * | | + * | http://www.rgraph.net | + * | | + * | This package is licensed under the RGraph license. For all kinds of business | + * | purposes there is a small one-time licensing fee to pay and for non | + * | commercial purposes it is free to use. You can read the full license here: | + * | | + * | http://www.rgraph.net/LICENSE.txt | + * o------------------------------------------------------------------------------o + */ + --> + <title>RGraph: HTML5 Javascript charts library - funnel charts</title> + + <meta name="keywords" content="rgraph html5 canvas example funnel chart" /> + <meta name="description" content="RGraph: HTML5 Javascript charts library - Funnel charts examples" /> + + <meta property="og:title" content="RGraph: HTML5 Javascript charts library" /> + <meta property="og:description" content="A charts library based on the HTML5 canvas tag" /> + <meta property="og:image" content="http://www.rgraph.net/images/logo.png"/> + + <link rel="stylesheet" href="../css/website.css" type="text/css" media="screen" /> + <link rel="icon" type="image/png" href="../images/favicon.png"> + + <!-- Place this tag in your head or just before your close body tag --> + <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> + + <script src="../libraries/RGraph.common.core.js" ></script> + <script src="../libraries/RGraph.common.context.js" ></script> + <script src="../libraries/RGraph.common.annotate.js" ></script> + <script src="../libraries/RGraph.common.tooltips.js" ></script> + <script src="../libraries/RGraph.common.zoom.js" ></script> + <script src="../libraries/RGraph.common.resizing.js" ></script> + <script src="../libraries/RGraph.funnel.js" ></script> + <!--[if IE 8]><script src="../excanvas/excanvas.original.js"></script><![endif]--> + + <script> + /** + * The onload function creates the graph + */ + window.onload = function () + { + var funnel = new RGraph.Funnel('funnel1', [100,45,45,26,24]); + funnel.Set('chart.gutter.top', 40); + funnel.Set('chart.gutter.left', 150); + funnel.Set('chart.text.boxed', false); + funnel.Set('chart.title', 'Leads progressing to sales'); + + funnel.Set('chart.shadow', true); + funnel.Set('chart.shadow.color', 'gray'); + funnel.Set('chart.shadow.blur', 25); + funnel.Set('chart.shadow.offsetx', 0); + funnel.Set('chart.shadow.offsety', 0); + + + if (!RGraph.isIE8()) { + + /** + * This gradient is for the highlight fill + */ + var grad = funnel.context.createLinearGradient(funnel.Get('chart.gutter.left'),0,funnel.canvas.width - funnel.Get('chart.gutter.right'),0); + grad.addColorStop(1, 'white'); + grad.addColorStop(0, 'rgba(255,255,255,0)'); + + funnel.Set('chart.tooltips', [ + 'id:tooltip_contact', + 'id:tooltip_lead', + 'id:tooltip_call', + 'id:tooltip_visit', + 'id:tooltip_sale' + ]); + + funnel.Set('chart.tooltips.effect', 'fade'); + funnel.Set('chart.highlight.fill', grad); + funnel.Set('chart.zoom.hdir', 'center'); + funnel.Set('chart.zoom.vdir', 'up'); + funnel.Set('chart.contextmenu', [['Zoom in', RGraph.Zoom]]); + } + + funnel.Set('chart.labels', ['Initial contact', 'Established lead', 'Telephone contact', 'Site visit', 'Sale finalised']); + funnel.Set('chart.labels.x', 10); + funnel.Set('chart.text.boxed', false); + funnel.Set('chart.strokestyle', 'rgba(0,0,0,0)'); + funnel.Set('chart.labels.sticks', true); + funnel.Set('chart.taper', false); + funnel.Draw(); + } + </script> + + <script> + var _gaq = _gaq || []; + _gaq.push(['_setAccount', 'UA-54706-2']); + _gaq.push(['_trackPageview']); + + (function() { + var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; + ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; + var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); + })(); + </script> +</head> +<body> + + <!-- Social networking buttons --> + <div id="social_icons" class="warning" style="border-radius: 10px; top: 1px; position: fixed; width: 120px; height: 20px"> + <!-- <a title="Bookmark with delicious" href="http://delicious.com/save?jump=close&v=4&noui&jump=close&url=http://www.rgraph.net¬es=RGraph%20is%20a%20HTML5%20based%20javascript%20charts%20library%20supporting%20a%20wide%20range%20of%20different%20chart%20types&title=RGraph:%20Javascript%20charts%20%26%20graph%20library" target="_blank"><img src="../images/delicious.png" alt="Bookmark with delicious" width="22" height="22" border="0" style="position: relative; top: 1px" /></a> --> + <a href="http://twitter.com/home/?status=RGraph%3A%20Javascript+charts+library+http%3A%2F%2Fwww.rgraph.net+%23rgraph+%23html5+%23canvas+%23javascript+%23charts+@_rgraph" target="_blank" title="Mention RGraph on Twitter"><img src="../images/twitter.png" alt="Mention RGraph on Twitter"/></a> + <iframe src="http://www.facebook.com/plugins/like.php?app_id=253862424642173&href=http%3A%2F%2Fwww.rgraph.net&send=false&layout=button_count&width=450&show_faces=false&action=like&colorscheme=light&font=arial&height=21" scrolling="no" frameborder="0" style="width: 80px; height:21px; position: relative; top: 1px"></iframe> + </div> + + <script> + // Opera fix + if (navigator.userAgent.indexOf('Opera') == -1) { + document.getElementById("social_icons").style.position = 'fixed'; + } + </script> + + <div id="google_plusone"> + <!-- Place this tag where you want the +1 button to render --> + <g:plusone href="http://www.rgraph.net"></g:plusone> + </div> + <!-- Social networking buttons --> + + <div id="breadcrumb"> + <a href="../index.html">RGraph: HTML5 Javascript charts library</a> + > + <a href="./index.html">Examples</a> + > + Funnel chart + </div> + + <h1>RGraph: <span>HTML5 Javascript charts library</span> - Funnel chart</h1> + + <script> + if (RGraph.isIE8()) { + 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.</div>'); + } + </script> + + <p> + The funnel chart can be used to show stages in a sales or order process, from initial lead/contact through to actual sale. + It works well if you have a diminishing process, like that shown below. It can show potential revenue in each stage, or + like below, it can show actual numbers. It can also highlight potential problems in an organisations sales and/or order fulfillment + processes. + </p> + + <div> + <div> + <ul> + <li><a href="../docs/funnel.html">Funnel charts API documentation</a></li> + </ul> + </div> + + <div style="text-align: center"> + <canvas id="funnel1" width="500" height="400">[No canvas support]</canvas> + </div> + </div> + + <div style="display: none"> + <div id="tooltip_contact"><b>Initial contact</b><br />All potential cutomers were contacted and<br />interest was established.</div> + <div id="tooltip_lead"><b>Established lead</b><br />Customers who were interested had their details<br />recorded and passed to the sales team.</div> + <div id="tooltip_call"><b>Sales Call</b><br />Interested Customers were called by the<br />sales team.</div> + <div id="tooltip_visit"><b>Site visit</b><br />The Customers site was visited by a representative<br />of the sales core.</div> + <div id="tooltip_sale"><b>Sale finalised</b><br />A sale was finalised by the sales core.</div> + </div> + +</body> +</html>
\ No newline at end of file diff --git a/schall/static/RGraph/examples/gantt.html b/schall/static/RGraph/examples/gantt.html new file mode 100644 index 0000000..2e9bbaf --- /dev/null +++ b/schall/static/RGraph/examples/gantt.html @@ -0,0 +1,189 @@ +<!DOCTYPE html> +<html> +<head> + <meta http-equiv="X-UA-Compatible" content="chrome=1"> + <!-- + /** + * o------------------------------------------------------------------------------o + * | This file is part of the RGraph package - you can learn more at: | + * | | + * | http://www.rgraph.net | + * | | + * | This package is licensed under the RGraph license. For all kinds of business | + * | purposes there is a small one-time licensing fee to pay and for non | + * | commercial purposes it is free to use. You can read the full license here: | + * | | + * | http://www.rgraph.net/LICENSE.txt | + * o------------------------------------------------------------------------------o + */ + --> + <title>RGraph: HTML5 Javascript charts library - gantt charts</title> + + <meta name="keywords" content="rgraph html5 canvas example gantt charts" /> + <meta name="description" content="RGraph: HTML5 Javascript charts library - Gantt charts examples" /> + + <meta property="og:title" content="RGraph: HTML5 Javascript charts library" /> + <meta property="og:description" content="A charts library based on the HTML5 canvas tag" /> + <meta property="og:image" content="http://www.rgraph.net/images/logo.png"/> + + <link rel="stylesheet" href="../css/website.css" type="text/css" media="screen" /> + <link rel="icon" type="image/png" href="../images/favicon.png"> + + <!-- Place this tag in your head or just before your close body tag --> + <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> + + <script src="../libraries/RGraph.common.core.js" ></script> + <script src="../libraries/RGraph.common.tooltips.js" ></script> + <script src="../libraries/RGraph.gantt.js" ></script> + <!--[if IE 8]><script src="../excanvas/excanvas.original.js"></script><![endif]--> + + <style> + .RGraph_tooltip { + color: #00a ! important; + } + + .RGraph_tooltip b { + color: black ! important; + } + </style> + + <script> + window.onload = function () + { + var gantt1 = new RGraph.Gantt('gantt1'); + gantt1.Set('chart.xmax', 122); + gantt1.Set('chart.gutter.right', 35); + gantt1.Set('chart.labels', ['January', 'February', 'March', 'April']); + gantt1.Set('chart.title', 'Work schedule for Xyz Ltd'); + gantt1.Set('chart.defaultcolor', '#faa'); + gantt1.Set('chart.background.grid', false); + + if (!RGraph.isIE8()) { + gantt1.Set('chart.tooltips', ["<b>Richard Crenshaw</b><br />Working through adding something<br /> to the website.", + null, + "<b>Rachel Higgenbottom</b><br />Singing sweetly", + "<b>Rachel Higgenbottom(2)</b><br />Still singing very nicely", + "<b>Fred Bloggs</b><br />Building a new drive", + "<b>Barney Rubble</b><br />Not started adding the new garden", + "<b>Gloria Crockford</b><br />Just started dinner", + "<b>Paul Josford</b><br />Nearly finished the front garden", + "<b>Harry Secjom</b><br />Roughly half way through the book reading", + "<b>Shane Ritchford</b><br />Comedian", + "<b>Kyle Jasford</b><br />Gardening", + "<b>Cynthia Frances</b><br />Not entirely sure what she's doing", + "<b>Mabel Mincy</b><br />Making more lunches", + "<b>Paul MacFord</b><br />Putting everyone off their work", + "<b>Kiffen Longbottom</b><br />Farming Maize", + "<b>John Blussford</b><br />A deer"]); + gantt1.Set('chart.tooltips.effect', 'expand'); + } + + gantt1.Set('chart.events', [ + [[31, 28, 67, 'Richard'], [90,15, 50, null, 'blue', 'red']], + [[0, 28, 50, 'Rachel'], [80,25, 74]], + [12, 28, 45, 'Fred'], + [59, 14, 0, 'Barney'], + [59, 21, 5, 'Gloria'], + [46, 31, 92, 'Paul'], + [80, 21, 46, 'Harry'], + [94, 17, 84, 'Shane'], + [34, 14, 32, 'Kyle'], + [64, 14, 28, 'Cynthia'], + [13, 61, 74, 'Mabel'], + [84, 31, 16, 'Paul'], + [100, 22, 45, 'Kiffen'], + [0, 365, 50, 'John'] + ]); + var color = 'rgba(192,255,192,0.5)'; + gantt1.Set('chart.vbars', [ + [0, 10, color], + [20, 10, color], + [40, 10, color], + [60, 10, color], + [80, 10, color], + [100, 10, color] + ]); + gantt1.Set('chart.borders', false); + gantt1.Set('chart.title.vpos', 0.6); + gantt1.Draw(); + } + </script> + + <script> + var _gaq = _gaq || []; + _gaq.push(['_setAccount', 'UA-54706-2']); + _gaq.push(['_trackPageview']); + + (function() { + var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; + ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; + var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); + })(); + </script> +</head> +<body> + + <!-- Social networking buttons --> + <div id="social_icons" class="warning" style="border-radius: 10px; top: 1px; position: fixed; width: 120px; height: 20px"> + <!-- <a title="Bookmark with delicious" href="http://delicious.com/save?jump=close&v=4&noui&jump=close&url=http://www.rgraph.net¬es=RGraph%20is%20a%20HTML5%20based%20javascript%20charts%20library%20supporting%20a%20wide%20range%20of%20different%20chart%20types&title=RGraph:%20Javascript%20charts%20%26%20graph%20library" target="_blank"><img src="../images/delicious.png" alt="Bookmark with delicious" width="22" height="22" border="0" style="position: relative; top: 1px" /></a> --> + <a href="http://twitter.com/home/?status=RGraph%3A%20Javascript+charts+library+http%3A%2F%2Fwww.rgraph.net+%23rgraph+%23html5+%23canvas+%23javascript+%23charts+@_rgraph" target="_blank" title="Mention RGraph on Twitter"><img src="../images/twitter.png" alt="Mention RGraph on Twitter"/></a> + <iframe src="http://www.facebook.com/plugins/like.php?app_id=253862424642173&href=http%3A%2F%2Fwww.rgraph.net&send=false&layout=button_count&width=450&show_faces=false&action=like&colorscheme=light&font=arial&height=21" scrolling="no" frameborder="0" style="width: 80px; height:21px; position: relative; top: 1px"></iframe> + </div> + + <script> + // Opera fix + if (navigator.userAgent.indexOf('Opera') == -1) { + document.getElementById("social_icons").style.position = 'fixed'; + } + </script> + + <div id="google_plusone"> + <!-- Place this tag where you want the +1 button to render --> + <g:plusone href="http://www.rgraph.net"></g:plusone> + </div> + <!-- Social networking buttons --> + + +<div id="breadcrumb"> + <a href="../index.html">RGraph: HTML5 Javascript charts library</a> + > + <a href="./index.html">Examples</a> + > + Gantt charts +</div> + + <h1>RGraph: <span>HTML5 Javascript charts library</span> - Gantt charts</h1> + + <script> + if (RGraph.isIE8()) { + 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.</div>'); + } + </script> + + <div> + <p> + Gantt charts are used to show scheduling information. It is commonly used in project management but can also be used, + for example, to show holiday schedule information. In this case it would be easy to see when someone is unavailable. + The Gantt chart can have clickable bars that can be used to provide more detail. It can also show vertical bars + that can be used to indicate events, or as in the cases below, can be decorative. + </p> + + <p> + The chart is made of "units", in this case 365. This represents days in a year. The labels are separate, being equally + spaced across the chart. This means you can use more meaningful labels, which are easier to comprehend. As in the + example charts. + </p> + </div> + + <div> + <ul> + <li><a href="../docs/gantt.html">Gantt chart API documentation</a></li> + </ul> + </div> + + <div style="text-align: center"> + <canvas id="gantt1" width="900" height="300">[No canvas support]</canvas> + </div> + +</body> +</html>
\ No newline at end of file diff --git a/schall/static/RGraph/examples/gauge.html b/schall/static/RGraph/examples/gauge.html new file mode 100644 index 0000000..beb8659 --- /dev/null +++ b/schall/static/RGraph/examples/gauge.html @@ -0,0 +1,146 @@ +<!DOCTYPE html> +<html> +<head> + <meta http-equiv="X-UA-Compatible" content="chrome=1"> + <!-- + /** + * o------------------------------------------------------------------------------o + * | This file is part of the RGraph package - you can learn more at: | + * | | + * | http://www.rgraph.net | + * | | + * | This package is licensed under the RGraph license. For all kinds of business | + * | purposes there is a small one-time licensing fee to pay and for non | + * | commercial purposes it is free to use. You can read the full license here: | + * | | + * | http://www.rgraph.net/LICENSE.txt | + * o------------------------------------------------------------------------------o + */ + --> + <title>RGraph: HTML5 Javascript charts library - Gauge charts</title> + + <meta name="keywords" content="rgraph html5 canvas example gauge charts" /> + <meta name="description" content="RGraph: HTML5 Javascript charts library - Gauge charts examples" /> + + <meta property="og:title" content="RGraph: HTML5 Javascript charts library" /> + <meta property="og:description" content="A charts library based on the HTML5 canvas tag" /> + <meta property="og:image" content="http://www.rgraph.net/images/logo.png"/> + + <link rel="stylesheet" href="../css/website.css" type="text/css" media="screen" /> + <link rel="icon" type="image/png" href="../images/favicon.png"> + + <!-- Place this tag in your head or just before your close body tag --> + <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> + + <script src="../libraries/RGraph.common.core.js" ></script> + <script src="../libraries/RGraph.common.effects.js" ></script> + <script src="../libraries/RGraph.gauge.js" ></script> + <!--[if IE 8]><script src="../excanvas/excanvas.original.js"></script><![endif]--> + + <script> + window.onload = function () + { + var gauge1 = new RGraph.Gauge('gauge1', 0, 100, 16); + gauge1.Set('chart.title', 'CPU'); + gauge1.Draw(); + + var gauge2 = new RGraph.Gauge('gauge2', 20, 40, 37); + gauge2.Set('chart.title', 'Bandwidth'); + gauge2.Set('chart.units.post', 'M'); + RGraph.Effects.Gauge.Grow(gauge2); + + function ChangeGauge () + { + gauge1.value = RGraph.random(0,100); + RGraph.Effects.Gauge.Grow(gauge1); + } + setInterval(ChangeGauge, 5000) + + var gauge3 = new RGraph.Gauge('gauge3', 0, 100, 84); + gauge3.Set('chart.title', 'Memory Usage'); + gauge3.Set('chart.units.post', '%'); + gauge3.Set('chart.scale.decimals', 0); + gauge3.Draw(); + } + </script> + + <script> + var _gaq = _gaq || []; + _gaq.push(['_setAccount', 'UA-54706-2']); + _gaq.push(['_trackPageview']); + + (function() { + var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; + ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; + var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); + })(); + </script> +</head> +<body> + + + <!-- Social networking buttons --> + <div id="social_icons" class="warning" style="border-radius: 10px; top: 1px; position: fixed; width: 120px; height: 20px"> + <!-- <a title="Bookmark with delicious" href="http://delicious.com/save?jump=close&v=4&noui&jump=close&url=http://www.rgraph.net¬es=RGraph%20is%20a%20HTML5%20based%20javascript%20charts%20library%20supporting%20a%20wide%20range%20of%20different%20chart%20types&title=RGraph:%20Javascript%20charts%20%26%20graph%20library" target="_blank"><img src="../images/delicious.png" alt="Bookmark with delicious" width="22" height="22" border="0" style="position: relative; top: 1px" /></a> --> + <a href="http://twitter.com/home/?status=RGraph%3A%20Javascript+charts+library+http%3A%2F%2Fwww.rgraph.net+%23rgraph+%23html5+%23canvas+%23javascript+%23charts+@_rgraph" target="_blank" title="Mention RGraph on Twitter"><img src="../images/twitter.png" alt="Mention RGraph on Twitter"/></a> + <iframe src="http://www.facebook.com/plugins/like.php?app_id=253862424642173&href=http%3A%2F%2Fwww.rgraph.net&send=false&layout=button_count&width=450&show_faces=false&action=like&colorscheme=light&font=arial&height=21" scrolling="no" frameborder="0" style="width: 80px; height:21px; position: relative; top: 1px"></iframe> + </div> + + <script> + // Opera fix + if (navigator.userAgent.indexOf('Opera') == -1) { + document.getElementById("social_icons").style.position = 'fixed'; + } + </script> + + <div id="google_plusone"> + <!-- Place this tag where you want the +1 button to render --> + <g:plusone href="http://www.rgraph.net"></g:plusone> + </div> + <!-- Social networking buttons --> + + + <h1>RGraph: <span>HTML5 Javascript charts library</span> - Gauge charts</h1> + + <script> + if (RGraph.isIE8()) { + 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.</div>'); + } + </script> + + + <div id="breadcrumb"> + <a href="../index.html">RGraph: HTML5 Javascript charts library</a> + > + <a href="./index.html">Examples</a> + > + Gauge + </div> + + <div> + <p> + Gauges are another meter variant that may be more suited to your websites design. The Gauges below show how you + could hook them up to some AJAX to get constantly updated gauges. The Gauges below are simply on a timer along + with some random numbers. + </p> + + <p></p> + </div> + + <div> + <ul> + <li><a href="../docs/gauge.html">Gauge charts API documentation</a></li> + </ul> + </div> + + <div style="text-align: center"> + <canvas id="gauge1" width="250" height="250"><div class="canvasfallback">[No canvas support]</div></canvas> + + <canvas id="gauge2" width="250" height="250"><div class="canvasfallback">[No canvas support]</div></canvas> + + <canvas id="gauge3" width="250" height="250">[No canvas support]</canvas> + </script> + </div> + +</body> +</html>
\ No newline at end of file diff --git a/schall/static/RGraph/examples/hbar.html b/schall/static/RGraph/examples/hbar.html new file mode 100644 index 0000000..0e5bbaf --- /dev/null +++ b/schall/static/RGraph/examples/hbar.html @@ -0,0 +1,139 @@ +<!DOCTYPE html> +<html> +<head> + <meta http-equiv="X-UA-Compatible" content="chrome=1"> + <!-- + /** + * o------------------------------------------------------------------------------o + * | This file is part of the RGraph package - you can learn more at: | + * | | + * | http://www.rgraph.net | + * | | + * | This package is licensed under the RGraph license. For all kinds of business | + * | purposes there is a small one-time licensing fee to pay and for non | + * | commercial purposes it is free to use. You can read the full license here: | + * | | + * | http://www.rgraph.net/LICENSE.txt | + * o------------------------------------------------------------------------------o + */ + --> + <title>RGraph: HTML5 Javascript charts library - horizontal bar charts</title> + + <meta name="keywords" content="rgraph html5 canvas example horizontal bar charts" /> + <meta name="description" content="RGraph: HTML5 Javascript charts library - Horizontal Bar charts example" /> + + <meta property="og:title" content="RGraph: HTML5 Javascript charts library" /> + <meta property="og:description" content="A charts library based on the HTML5 canvas tag" /> + <meta property="og:image" content="http://www.rgraph.net/images/logo.png"/> + + <link rel="stylesheet" href="../css/website.css" type="text/css" media="screen" /> + <link rel="icon" type="image/png" href="../images/favicon.png"> + + <!-- Place this tag in your head or just before your close body tag --> + <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> + + <script src="../libraries/RGraph.common.core.js" ></script> + <script src="../libraries/RGraph.common.tooltips.js" ></script> + <script src="../libraries/RGraph.common.effects.js" ></script> + <script src="../libraries/RGraph.hbar.js" ></script> + <!--[if IE 8]><script src="../excanvas/excanvas.original.js"></script><![endif]--> + + <script> + /** + * The onload function creates the chart + */ + window.onload = function () + { + + var hbar1 = new RGraph.HBar('hbar1', [55.11, 21.63, 11.94, 7.15, 2.14, 1.11, 0.91]); + + var grad = hbar1.context.createLinearGradient(275,0,900, 0); + grad.addColorStop(0, 'white'); + grad.addColorStop(1, 'blue'); + + hbar1.Set('chart.strokestyle', 'rgba(0,0,0,0)'); + hbar1.Set('chart.gutter.left', 275); + hbar1.Set('chart.gutter.right', 10); + hbar1.Set('chart.background.grid.autofit', true); + hbar1.Set('chart.title', 'Browser usage (NetApps) in May 2011'); + hbar1.Set('chart.labels', ['Microsoft Internet Explorer (55.11%)','Mozilla Firefox (21.63%)', 'Google Chrome (11.94)','Apple Safari (7.15%)','Opera (2.14%)','Opera Mini (1.11)','Other (0.91%)']); + hbar1.Set('chart.shadow', true); + hbar1.Set('chart.shadow.color', 'gray'); + hbar1.Set('chart.shadow.offsetx', 0); + hbar1.Set('chart.shadow.offsety', 0); + hbar1.Set('chart.shadow.blur', 15); + hbar1.Set('chart.colors', [grad]); + + if (RGraph.isIE8()) { + hbar1.Draw(); + } else { + RGraph.Effects.HBar.Grow(hbar1); + } + } + </script> + + <script> + var _gaq = _gaq || []; + _gaq.push(['_setAccount', 'UA-54706-2']); + _gaq.push(['_trackPageview']); + + (function() { + var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; + ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; + var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); + })(); + </script> +</head> +<body> + + + <!-- Social networking buttons --> + <div id="social_icons" class="warning" style="border-radius: 10px; top: 1px; position: fixed; width: 120px; height: 20px"> + <!-- <a title="Bookmark with delicious" href="http://delicious.com/save?jump=close&v=4&noui&jump=close&url=http://www.rgraph.net¬es=RGraph%20is%20a%20HTML5%20based%20javascript%20charts%20library%20supporting%20a%20wide%20range%20of%20different%20chart%20types&title=RGraph:%20Javascript%20charts%20%26%20graph%20library" target="_blank"><img src="../images/delicious.png" alt="Bookmark with delicious" width="22" height="22" border="0" style="position: relative; top: 1px" /></a> --> + <a href="http://twitter.com/home/?status=RGraph%3A%20Javascript+charts+library+http%3A%2F%2Fwww.rgraph.net+%23rgraph+%23html5+%23canvas+%23javascript+%23charts+@_rgraph" target="_blank" title="Mention RGraph on Twitter"><img src="../images/twitter.png" alt="Mention RGraph on Twitter"/></a> + <iframe src="http://www.facebook.com/plugins/like.php?app_id=253862424642173&href=http%3A%2F%2Fwww.rgraph.net&send=false&layout=button_count&width=450&show_faces=false&action=like&colorscheme=light&font=arial&height=21" scrolling="no" frameborder="0" style="width: 80px; height:21px; position: relative; top: 1px"></iframe> + </div> + + <script> + // Opera fix + if (navigator.userAgent.indexOf('Opera') == -1) { + document.getElementById("social_icons").style.position = 'fixed'; + } + </script> + + <div id="google_plusone"> + <!-- Place this tag where you want the +1 button to render --> + <g:plusone href="http://www.rgraph.net"></g:plusone> + </div> + <!-- Social networking buttons --> + + <div id="breadcrumb"> + <a href="../index.html">RGraph: HTML5 Javascript charts library</a> + > + <a href="./index.html">Examples</a> + > + Horizontal Bar charts + </div> + + + <h1>RGraph: <span>HTML5 Javascript charts library</span> - Horizontal bar charts</h1> + + <script> + if (RGraph.isIE8()) { + 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.</div>'); + } + </script> + + <p> + A horizontal bar chart can be useful when your labels are too big for regular bar charts. + </p> + + <ul> + <li><a href="../docs/hbar.html">The API documentation</a></li> + </ul> + + <a name="gutter-example"></a> + <canvas id="hbar1" width="900" height="400">[No canvas support]</canvas> + +</body> +</html>
\ No newline at end of file diff --git a/schall/static/RGraph/examples/hprogress.html b/schall/static/RGraph/examples/hprogress.html new file mode 100644 index 0000000..ddef02c --- /dev/null +++ b/schall/static/RGraph/examples/hprogress.html @@ -0,0 +1,133 @@ +<!DOCTYPE html> +<html> +<head> + <meta http-equiv="X-UA-Compatible" content="chrome=1"> + <!-- + /** + * o------------------------------------------------------------------------------o + * | This file is part of the RGraph package - you can learn more at: | + * | | + * | http://www.rgraph.net | + * | | + * | This package is licensed under the RGraph license. For all kinds of business | + * | purposes there is a small one-time licensing fee to pay and for non | + * | commercial purposes it is free to use. You can read the full license here: | + * | | + * | http://www.rgraph.net/LICENSE.txt | + * o------------------------------------------------------------------------------o + */ + --> + <title>RGraph: HTML5 Javascript charts library - horizontal progress bar</title> + + <meta name="keywords" content="rgraph html5 canvas example horizontal progress bar" /> + <meta name="description" content="RGraph: HTML5 Javascript charts library - Horizontal Progress Bar example" /> + + <meta property="og:title" content="RGraph: HTML5 Javascript charts library" /> + <meta property="og:description" content="A charts library based on the HTML5 canvas tag" /> + <meta property="og:image" content="http://www.rgraph.net/images/logo.png"/> + + <link rel="stylesheet" href="../css/website.css" type="text/css" media="screen" /> + <link rel="icon" type="image/png" href="../images/favicon.png"> + + <!-- Place this tag in your head or just before your close body tag --> + <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> + + <script src="../libraries/RGraph.common.core.js"></script> + <script src="../libraries/RGraph.common.tooltips.js" ></script> + <script src="../libraries/RGraph.hprogress.js"></script> + <!--[if IE 8]><script src="../excanvas/excanvas.original.js"></script><![endif]--> + + + <script> + window.onload = function () + { + var data = [59.65, 22.96, 7.98, 5.27, 4.09]; + var progress1 = new RGraph.HProgress('progress1',data, 100); + progress1.Set('chart.colors', ['blue', 'red', 'yellow', 'green','black']); + progress1.Set('chart.key', ['Microsoft Internet Explorer (59.65%)', 'Mozilla Firefox (22.96%)', 'Google Chrome (7.98%)', 'Apple Safari (5.27%)','Other (4.09%)']); + progress1.Set('chart.tooltips', ['Microsoft Internet Explorer (59.65%)', 'Mozilla Firefox (22.96%)', 'Google Chrome (7.98%)', 'Apple Safari (5.27%)','Other (4.09%)']); + progress1.Set('chart.units.post', '%'); + progress1.Set('chart.tickmarks.zerostart', true); + progress1.Draw(); + } + </script> + + <script> + var _gaq = _gaq || []; + _gaq.push(['_setAccount', 'UA-54706-2']); + _gaq.push(['_trackPageview']); + + (function() { + var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; + ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; + var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); + })(); + </script> +</head> +<body> + + + <!-- Social networking buttons --> + <div id="social_icons" class="warning" style="border-radius: 10px; top: 1px; position: fixed; width: 120px; height: 20px"> + <!-- <a title="Bookmark with delicious" href="http://delicious.com/save?jump=close&v=4&noui&jump=close&url=http://www.rgraph.net¬es=RGraph%20is%20a%20HTML5%20based%20javascript%20charts%20library%20supporting%20a%20wide%20range%20of%20different%20chart%20types&title=RGraph:%20Javascript%20charts%20%26%20graph%20library" target="_blank"><img src="../images/delicious.png" alt="Bookmark with delicious" width="22" height="22" border="0" style="position: relative; top: 1px" /></a> --> + <a href="http://twitter.com/home/?status=RGraph%3A%20Javascript+charts+library+http%3A%2F%2Fwww.rgraph.net+%23rgraph+%23html5+%23canvas+%23javascript+%23charts+@_rgraph" target="_blank" title="Mention RGraph on Twitter"><img src="../images/twitter.png" alt="Mention RGraph on Twitter"/></a> + <iframe src="http://www.facebook.com/plugins/like.php?app_id=253862424642173&href=http%3A%2F%2Fwww.rgraph.net&send=false&layout=button_count&width=450&show_faces=false&action=like&colorscheme=light&font=arial&height=21" scrolling="no" frameborder="0" style="width: 80px; height:21px; position: relative; top: 1px"></iframe> + </div> + + <script> + // Opera fix + if (navigator.userAgent.indexOf('Opera') == -1) { + document.getElementById("social_icons").style.position = 'fixed'; + } + </script> + + <div id="google_plusone"> + <!-- Place this tag where you want the +1 button to render --> + <g:plusone href="http://www.rgraph.net"></g:plusone> + </div> + <!-- Social networking buttons --> + + +<div id="breadcrumb"> + <a href="../index.html">RGraph: HTML5 Javascript charts library</a> + > + <a href="./index.html">Examples</a> + > + Horizontal Progress bar +</div> + + <h1>RGraph: <span>HTML5 Javascript charts library</span> - Horizontal Progress bar</h1> + + <script> + if (RGraph.isIE8()) { + 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.</div>'); + } + </script> + + <p> + This is a Progress Bar for showing state. You can show anything with it - use it to show load on your server, + or percentage space free on your servers disk drive. You could even incorporate it with some AJAX to retrieve status information + from your webserver dynamically, making the Progress Bar realtime. To redraw the progress bar simply call <i>RGraph.Clear()</i> + (which clears the canvas) and then call <i>myProgress.Draw()</i> again. + </p> + + <p> + The colours, title and scale are configurable, allowing you to represent a wide range of values. + </p> + + <div> + <ul> + <li><a href="../docs/hprogress.html">Horizontal Progress bar API documentation</a></li> + <li><a href="vprogress.html">Vertical progress bar</a></li> + </ul> + </div> + + + <div style="text-align: center"> + <b>Browser market share in September (custom highlight)</b> + <canvas id="progress1" width="1000" height="80">[No canvas support]</canvas> + </div> + + +</body> +</html>
\ No newline at end of file diff --git a/schall/static/RGraph/examples/index.html b/schall/static/RGraph/examples/index.html new file mode 100644 index 0000000..7543a9a --- /dev/null +++ b/schall/static/RGraph/examples/index.html @@ -0,0 +1,182 @@ +<!DOCTYPE html> +<!-- + /** + * o------------------------------------------------------------------------------o + * | This file is part of the RGraph package - you can learn more at: | + * | | + * | http://www.rgraph.net | + * | | + * | This package is licensed under the RGraph license. For all kinds of business | + * | purposes there is a small one-time licensing fee to pay and for non | + * | commercial purposes it is free to use. You can read the full license here: | + * | | + * | http://www.rgraph.net/LICENSE.txt | + * o------------------------------------------------------------------------------o + */ +--> +<html> +<head> + <title>RGraph: HTML5 Javascript charts library - example charts</title> + + <link rel="stylesheet" href="../css/website.css" type="text/css" media="screen" /> + <link rel="icon" type="image/png" href="../images/favicon.png"> + + <meta name="keywords" content="rgraph charts html5 javascript charts canvas" /> + <meta name="description" content="RGraph: HTML5 Javascript charts library - examples" /> + + <meta property="og:title" content="RGraph: HTML5 Javascript charts library" /> + <meta property="og:description" content="A charts library based on the HTML5 canvas tag" /> + <meta property="og:image" content="http://www.rgraph.net/images/logo.png"/> + + <!-- Place this tag in your head or just before your close body tag --> + <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> + + <script src="../libraries/RGraph.common.core.js" ></script> + <script src="../libraries/RGraph.common.effects.js" ></script> + <script src="../libraries/RGraph.rose.js" ></script> + <!--[if IE 8]><script src="../excanvas/excanvas.original.js"></script><![endif]--> + + <script> + var _gaq = _gaq || []; + _gaq.push(['_setAccount', 'UA-54706-2']); + _gaq.push(['_trackPageview']); + + (function() { + var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; + ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; + var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); + })(); + </script> + + <script> + window.onload = function () + { + var rose1 = new RGraph.Rose('cvs', [41,37,16,3,3,45,26,25,24,12,34,60,36,24,23,22]); + rose1.Set('chart.colors.alpha', 0.5); + rose1.Set('chart.colors', ['#0c0', 'red']); + rose1.Set('chart.gutter.top', 30); + rose1.Set('chart.margin', 2); + rose1.Set('chart.labels', ['Bev','Ben','Violet','Olga','Wez','Tristan','Hoolio','Nevil','Gary','Pete','Lou','Jim','Rich','Dave','Kevin','Jamie']); + + if (!RGraph.isIE8()) { + rose1.Set('chart.tooltips', ['Bev','Ben','Violet','Olga','Wez','Tristan','Hoolio','Nevil','Gary','Pete','Lou','Jim','Rich','Dave','Kevin','Jamie']); + } + + RGraph.isIE8() ? rose1.Draw() : RGraph.Effects.Rose.Grow(rose1); + } + + </script> +</head> +<body> + + + <!-- Social networking buttons --> + <div id="social_icons" class="warning" style="border-radius: 10px; top: 1px; position: fixed; width: 120px; height: 20px"> + <!-- <a title="Bookmark with delicious" href="http://delicious.com/save?jump=close&v=4&noui&jump=close&url=http://www.rgraph.net¬es=RGraph%20is%20a%20HTML5%20based%20javascript%20charts%20library%20supporting%20a%20wide%20range%20of%20different%20chart%20types&title=RGraph:%20Javascript%20charts%20%26%20graph%20library" target="_blank"><img src="../images/delicious.png" alt="Bookmark with delicious" width="22" height="22" border="0" style="position: relative; top: 1px" /></a> --> + <a href="http://twitter.com/home/?status=RGraph%3A%20Javascript+charts+library+http%3A%2F%2Fwww.rgraph.net+%23rgraph+%23html5+%23canvas+%23javascript+%23charts+@_rgraph" target="_blank" title="Mention RGraph on Twitter"><img src="../images/twitter.png" alt="Mention RGraph on Twitter"/></a> + <iframe src="http://www.facebook.com/plugins/like.php?app_id=253862424642173&href=http%3A%2F%2Fwww.rgraph.net&send=false&layout=button_count&width=450&show_faces=false&action=like&colorscheme=light&font=arial&height=21" scrolling="no" frameborder="0" style="width: 80px; height:21px; position: relative; top: 1px"></iframe> + </div> + + <script> + // Opera fix + if (navigator.userAgent.indexOf('Opera') == -1) { + document.getElementById("social_icons").style.position = 'fixed'; + } + </script> + + <div id="google_plusone"> + <!-- Place this tag where you want the +1 button to render --> + <g:plusone href="http://www.rgraph.net"></g:plusone> + </div> + <!-- Social networking buttons --> + + +<div id="breadcrumb"> + <a href="../index.html">RGraph: HTML5 Javascript charts library</a> + > + Example charts +</div> + +<h1>RGraph: <span>HTML5 Javascript charts library</span> - Example charts</h1> + + <script> + if (RGraph.isIE8()) { + 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.</div>'); + } + </script> + + <div style="text-align: center"> + <div class="warning" style="display: inline; display: inline-block"> + Need something that RGraph doesn't currently support? RGraph license holders can usually be accomodated - please + <a href="mailto:licensing@rgraph.net"><b>contact support</b></a> to discuss your requirements. + </div> + </div> + +<p> + The following HTML5 examples are available. The charts are made with the HTML5 canvas tag so they're quick to load and interactive. +</p> + +<div style="float: right; text-align: center; width: 430px"> + <b>A Rose chart of sales statistics</b> + <canvas id="cvs" width="430" height="400" style="margin-right: 100px">[No canvas support]</canvas> +</div> +</div> + + <div style="width: 600px"> + <div style="float: left; width: 275px"> + <h4>Bar, Line and Pie charts</h4> + <ul> + <li><a href="bar.html">Bar charts</a></li> + <li><a href="bipolar.html">Bi-polar charts</a></li> + <li><a href="hbar.html">Horizontal Bar charts</a></li> + <li><a href="line.html">Line charts</a></li> + <li><a href="pie.html">Pie charts</a></li> + <li><a href="donut.html">Donut charts</a></li> + </ul> + + <h4>Planning and management charts</h4> + <ul> + <li><a href="gantt.html">Gantt charts</a></li> + <li><a href="funnel.html">Funnel charts</a></li> + <li><a href="waterfall.html">Waterfall charts</a></li> + </ul> + </div> + <div style="float: left; width: 275px"> + <h4>Meters and gauges</h4> + <ul> + <li><a href="fuel.html">Fuel gauges</a></li> + <li><a href="gauge.html">Gauge charts</a></li> + <li><a href="hprogress.html">Horizontal progress bar</a></li> + <li><a href="meter.html">Meter charts</a></li> + <li><a href="odo.html">Odometer charts</a></li> + <li><a href="thermometer.html">Thermometer charts</a></li> + <li><a href="vprogress.html">Vertical progress bar</a></li> + </ul> + + <h4>Other chart types</h4> + <ul> + <li><a href="led.html">LED grid</a></li> + <li><a href="radar.html">Radar charts</a></li> + <li><a href="rscatter.html">Radial scatter charts</a></li> + <li><a href="rose.html">Rose charts</a></li> + <li><a href="scatter.html">Scatter charts</a></li> + </ul> + </div> + </div> + +<h4>Basic examples</h4> + +<ul> + <li><a href="basic.html">A basic example (for implementation help)</a></li> + <li><a href="../docs/basic_tooltips.html">A basic example of charts in tooltips</a></li> + <li><a href="../docs/basic_combined.html">A basic example of a combined Bar & Line chart</a></li> +</ul> + + <h4>More examples</h4> + + <p> + There are more usage examples as well as a few general HTML5 examples in the <a href="../docs/index.html">documentation</a>. + </p> + +</body> +</html>
\ No newline at end of file diff --git a/schall/static/RGraph/examples/led.html b/schall/static/RGraph/examples/led.html new file mode 100644 index 0000000..c7b0311 --- /dev/null +++ b/schall/static/RGraph/examples/led.html @@ -0,0 +1,121 @@ +<!DOCTYPE html> +<html> +<head> + <meta http-equiv="X-UA-Compatible" content="chrome=1"> + <!-- + /** + * o------------------------------------------------------------------------------o + * | This file is part of the RGraph package - you can learn more at: | + * | | + * | http://www.rgraph.net | + * | | + * | This package is licensed under the RGraph license. For all kinds of business | + * | purposes there is a small one-time licensing fee to pay and for non | + * | commercial purposes it is free to use. You can read the full license here: | + * | | + * | http://www.rgraph.net/LICENSE.txt | + * o------------------------------------------------------------------------------o + */ + --> + <title>RGraph: HTML5 Javascript charts library - LED grid</title> + + <meta name="keywords" content="rgraph html5 canvas example led grid" /> + <meta name="description" content="RGraph: HTML5 Javascript charts library - LED grid example" /> + + <meta property="og:title" content="RGraph: HTML5 Javascript charts library" /> + <meta property="og:description" content="A charts library based on the HTML5 canvas tag" /> + <meta property="og:image" content="http://www.rgraph.net/images/logo.png"/> + + <link rel="stylesheet" href="../css/website.css" type="text/css" media="screen" /> + <link rel="icon" type="image/png" href="../images/favicon.png"> + + <!-- Place this tag in your head or just before your close body tag --> + <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> + + <script src="../libraries/RGraph.common.core.js" ></script> + <script src="../libraries/RGraph.led.js" ></script> + <!--[if IE 8]><script src="../excanvas/excanvas.original.js"></script><![endif]--> + + <script> + window.onload = function () + { + var led1 = new RGraph.LED('led1', 'an led display'); + led1.Set('chart.zoom.hdir', 'center'); + led1.Set('chart.zoom.vdir', 'center'); + led1.Set('chart.light', 'red'); + led1.Draw(); + } + </script> + + <script> + var _gaq = _gaq || []; + _gaq.push(['_setAccount', 'UA-54706-2']); + _gaq.push(['_trackPageview']); + + (function() { + var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; + ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; + var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); + })(); + </script> +</head> +<body> + + + <!-- Social networking buttons --> + <div id="social_icons" class="warning" style="border-radius: 10px; top: 1px; position: fixed; width: 120px; height: 20px"> + <!-- <a title="Bookmark with delicious" href="http://delicious.com/save?jump=close&v=4&noui&jump=close&url=http://www.rgraph.net¬es=RGraph%20is%20a%20HTML5%20based%20javascript%20charts%20library%20supporting%20a%20wide%20range%20of%20different%20chart%20types&title=RGraph:%20Javascript%20charts%20%26%20graph%20library" target="_blank"><img src="../images/delicious.png" alt="Bookmark with delicious" width="22" height="22" border="0" style="position: relative; top: 1px" /></a> --> + <a href="http://twitter.com/home/?status=RGraph%3A%20Javascript+charts+library+http%3A%2F%2Fwww.rgraph.net+%23rgraph+%23html5+%23canvas+%23javascript+%23charts+@_rgraph" target="_blank" title="Mention RGraph on Twitter"><img src="../images/twitter.png" alt="Mention RGraph on Twitter"/></a> + <iframe src="http://www.facebook.com/plugins/like.php?app_id=253862424642173&href=http%3A%2F%2Fwww.rgraph.net&send=false&layout=button_count&width=450&show_faces=false&action=like&colorscheme=light&font=arial&height=21" scrolling="no" frameborder="0" style="width: 80px; height:21px; position: relative; top: 1px"></iframe> + </div> + + <script> + // Opera fix + if (navigator.userAgent.indexOf('Opera') == -1) { + document.getElementById("social_icons").style.position = 'fixed'; + } + </script> + + <div id="google_plusone"> + <!-- Place this tag where you want the +1 button to render --> + <g:plusone href="http://www.rgraph.net"></g:plusone> + </div> + <!-- Social networking buttons --> + + +<div id="breadcrumb"> + <a href="../index.html">RGraph: HTML5 Javascript charts library</a> + > + <a href="./index.html">Examples</a> + > + LED Grid +</div> + +<h1>RGraph: <span>HTML5 Javascript charts library</span> - LED Grid</h1> + + <script> + if (RGraph.isIE8()) { + 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.</div>'); + } + </script> + + <p> + An LED grid, that could be used to show a multitude of things. Could be used as a website counter for example. + It supports the A-Z, 0-9 and space characters. As you can see the colors are also user-definable. It also + supports the context menu, and therefore the zoom. The first LED grid demonstrates this. + </p> + + <div> + <ul> + <li><a href="../docs/led.html">LED Grid API documentation</a></li> + </ul> + </div> + + <div style="width: 50%; margin-left: 250px; text-align: center"> + <canvas id="led1" width="500" height="60">[No canvas support]</canvas> + </div> + + <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> + +</body> +</html>
\ No newline at end of file diff --git a/schall/static/RGraph/examples/line.html b/schall/static/RGraph/examples/line.html new file mode 100644 index 0000000..7899448 --- /dev/null +++ b/schall/static/RGraph/examples/line.html @@ -0,0 +1,175 @@ +<!DOCTYPE html > +<html> +<head> + <meta http-equiv="X-UA-Compatible" content="chrome=1"> + + <!-- + /** + * o------------------------------------------------------------------------------o + * | This file is part of the RGraph package - you can learn more at: | + * | | + * | http://www.rgraph.net | + * | | + * | This package is licensed under the RGraph license. For all kinds of business | + * | purposes there is a small one-time licensing fee to pay and for non | + * | commercial purposes it is free to use. You can read the full license here: | + * | | + * | http://www.rgraph.net/LICENSE.txt | + * o------------------------------------------------------------------------------o + */ + --> + <title>RGraph: HTML5 Javascript charts library - line charts</title> + + <meta name="keywords" content="rgraph html5 canvas example line chart" /> + <meta name="description" content="RGraph: HTML5 Javascript charts library - Line chart example" /> + + <meta property="og:title" content="RGraph: HTML5 Javascript charts library" /> + <meta property="og:description" content="A charts library based on the HTML5 canvas tag" /> + <meta property="og:image" content="http://www.rgraph.net/images/logo.png"/> + + <link rel="stylesheet" href="../css/website.css" type="text/css" media="screen" /> + <link rel="icon" type="image/png" href="../images/favicon.png"> + + <!-- Place this tag in your head or just before your close body tag --> + <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> + + <script src="../libraries/RGraph.common.core.js" ></script> + <script src="../libraries/RGraph.common.context.js" ></script> + <script src="../libraries/RGraph.common.annotate.js" ></script> + <script src="../libraries/RGraph.common.tooltips.js" ></script> + <script src="../libraries/RGraph.common.zoom.js" ></script> + <script src="../libraries/RGraph.common.effects.js" ></script> + <script src="../libraries/RGraph.line.js" ></script> + <!--[if IE 8]><script src="../excanvas/excanvas.original.js"></script><![endif]--> + <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" ></script> + + <script> + window.onload = function () + { + var line1 = new RGraph.Line('line1', [56,45,43,52,56,65,21,23,34,15,21,-12,-13,-31,-25], [35,43,41,41,42,46,42,39,46,41,45,65,54,54,41,41]); + line1.Set('chart.background.grid', true); + line1.Set('chart.linewidth', 5); + line1.Set('chart.gutter.left', 35); + line1.Set('chart.hmargin', 5); + if (RGraph.isIE9up()) { + line1.Set('chart.shadow', true); + } + line1.Set('chart.tickmarks', null); + line1.Set('chart.units.post', 'k'); + line1.Set('chart.xticks', 8); + line1.Set('chart.colors', ['red', 'green']); + line1.Set('chart.key', ['Sales (not good)','Costs (reasonably consistent)']); + line1.Set('chart.key.shadow', true); + line1.Set('chart.key.shadow.offsetx', 0); + line1.Set('chart.key.shadow.offsety', 0); + line1.Set('chart.key.shadow.blur', 15); + line1.Set('chart.key.shadow.color', '#ddd'); + line1.Set('chart.key.rounded', true); + line1.Set('chart.key.position', 'graph'); + line1.Set('chart.key.position.x', line1.Get('chart.gutter.left') + 4); + line1.Set('chart.key.position.y', (line1.canvas.height / 2) + 5); + line1.Set('chart.xaxispos', 'center'); + line1.Set('chart.background.grid.autofit', true); + line1.Set('chart.background.grid.autofit.numhlines', 10); + line1.Set('chart.title', 'Sales last year'); + line1.Set('chart.curvy', true); + line1.Set('chart.curvy.factor', 0.25); + line1.Set('chart.animation.unfold.x', true); + line1.Set('chart.animation.unfold.y',true); + line1.Set('chart.animation.unfold.initial',0); // Default is 2 + RGraph.Effects.Line.Unfold(line1); + + var line2 = new RGraph.Line('line2', [6,5,4,5,6,4,1,2,3], [7,8,9,9,8,7,8,7,6]); + line2.Set('chart.labels', ['13th','14th','15th','16th','15th','16th','17th','18th','19th']); + line2.Set('chart.title', 'Range of fuel consumption'); + line2.Set('chart.title.vpos', 0.5); + line2.Set('chart.background.grid.autofit.align', true); + line2.Set('chart.filled', true); + line2.Set('chart.filled.range', true); + line2.Set('chart.fillstyle', 'rgba(128,255,128,0.5)'); + line2.Set('chart.linewidth', 2); + line2.Set('chart.colors', ['green']); + line2.Set('chart.hmargin', 5); + line2.Set('chart.gutter.left', 50); + //line2.Draw(); + RGraph.Effects.Line.jQuery.Trace(line2); + } + </script> + + <script> + var _gaq = _gaq || []; + _gaq.push(['_setAccount', 'UA-54706-2']); + _gaq.push(['_trackPageview']); + + (function() { + var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; + ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; + var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); + })(); + </script> + +</head> +<body> + + + <!-- Social networking buttons --> + <div id="social_icons" class="warning" style="border-radius: 10px; top: 1px; position: fixed; width: 120px; height: 20px"> + <!-- <a title="Bookmark with delicious" href="http://delicious.com/save?jump=close&v=4&noui&jump=close&url=http://www.rgraph.net¬es=RGraph%20is%20a%20HTML5%20based%20javascript%20charts%20library%20supporting%20a%20wide%20range%20of%20different%20chart%20types&title=RGraph:%20Javascript%20charts%20%26%20graph%20library" target="_blank"><img src="../images/delicious.png" alt="Bookmark with delicious" width="22" height="22" border="0" style="position: relative; top: 1px" /></a> --> + <a href="http://twitter.com/home/?status=RGraph%3A%20Javascript+charts+library+http%3A%2F%2Fwww.rgraph.net+%23rgraph+%23html5+%23canvas+%23javascript+%23charts+@_rgraph" target="_blank" title="Mention RGraph on Twitter"><img src="../images/twitter.png" alt="Mention RGraph on Twitter"/></a> + <iframe src="http://www.facebook.com/plugins/like.php?app_id=253862424642173&href=http%3A%2F%2Fwww.rgraph.net&send=false&layout=button_count&width=450&show_faces=false&action=like&colorscheme=light&font=arial&height=21" scrolling="no" frameborder="0" style="width: 80px; height:21px; position: relative; top: 1px"></iframe> + </div> + + <script> + // Opera fix + if (navigator.userAgent.indexOf('Opera') == -1) { + document.getElementById("social_icons").style.position = 'fixed'; + } + </script> + + <div id="google_plusone"> + <!-- Place this tag where you want the +1 button to render --> + <g:plusone href="http://www.rgraph.net"></g:plusone> + </div> + <!-- Social networking buttons --> + + +<div id="breadcrumb"> + <a href="../index.html">RGraph: HTML5 Javascript charts library</a> + > + <a href="./index.html">Examples</a> + > + Line chart +</div> + +<h1>RGraph: <span>HTML5 Javascript charts library</span> - Line charts</h1> + + <script> + if (RGraph.isIE8()) { + 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.</div>'); + } + </script> + + <div> + <p> + Like Bar charts, Line charts are some of the most versatile chart types. It is similar, but can indicate chronological + data better. Line charts are good if, for example, you want to illustrate sales figures over a year (or any period of + time). You'll then be able to easily see whether sales are going up, down or are stagnant. It will also become apparent + which months are busier than others. By using a multiple line chart you can add multiple sets of data (eg two or more years + of figures) to your chart. You can customise the line chart by stipulating it as being filled, having drop shadows, keys, + having the X axis in the centre, different colors, different tickmark styles and tooltips etc. + </p> + + <div> + <ul> + <li><a href="../docs/line.html">Line charts API documentation</a></li> + </ul> + </div> + + <div> + <canvas id="line1" width="475" height="250">[Please wait...]</canvas> + <canvas id="line2" width="475" height="250">[Please wait...]</canvas> + </div> + </div> + +</body> +</html>
\ No newline at end of file diff --git a/schall/static/RGraph/examples/meter.html b/schall/static/RGraph/examples/meter.html new file mode 100644 index 0000000..9c6f172 --- /dev/null +++ b/schall/static/RGraph/examples/meter.html @@ -0,0 +1,178 @@ +<!DOCTYPE html> +<html> +<head> + <meta http-equiv="X-UA-Compatible" content="chrome=1"> + <!-- + /** + * o------------------------------------------------------------------------------o + * | This file is part of the RGraph package - you can learn more at: | + * | | + * | http://www.rgraph.net | + * | | + * | This package is licensed under the RGraph license. For all kinds of business | + * | purposes there is a small one-time licensing fee to pay and for non | + * | commercial purposes it is free to use. You can read the full license here: | + * | | + * | http://www.rgraph.net/LICENSE.txt | + * o------------------------------------------------------------------------------o + */ + --> + <title>RGraph: HTML5 Javascript charts library - meter charts</title> + + <meta name="keywords" content="rgraph html5 canvas example meter charts" /> + <meta name="description" content="RGraph: HTML5 Javascript charts library - Meter charts examples" /> + + <meta property="og:title" content="RGraph: HTML5 Javascript charts library" /> + <meta property="og:description" content="A charts library based on the HTML5 canvas tag" /> + <meta property="og:image" content="http://www.rgraph.net/images/logo.png"/> + + <link rel="stylesheet" href="../css/website.css" type="text/css" media="screen" /> + <link rel="icon" type="image/png" href="../images/favicon.png"> + + <!-- Place this tag in your head or just before your close body tag --> + <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> + + <script src="../libraries/RGraph.common.core.js" ></script> + <script src="../libraries/RGraph.common.effects.js" ></script> + <script src="../libraries/RGraph.common.context.js" ></script> + <script src="../libraries/RGraph.common.annotate.js" ></script> + <script src="../libraries/RGraph.common.tooltips.js" ></script> + <script src="../libraries/RGraph.common.zoom.js" ></script> + <script src="../libraries/RGraph.common.resizing.js" ></script> + <script src="../libraries/RGraph.meter.js" ></script> + <!--[if IE 8]><script src="../excanvas/excanvas.original.js"></script><![endif]--> + + <script> + window.onload = function () + { + var min = 0; + var max = 100; + + var meter1 = new RGraph.Meter('meter1', min, max, RGraph.random(min, max)); + + var grad1 = meter1.context.createRadialGradient(meter1.canvas.width / 2,meter1.canvas.height - 25,0,meter1.canvas.width / 2,meter1.canvas.height - 25,200); + grad1.addColorStop(0, 'green'); + grad1.addColorStop(1, 'white'); + + var grad2 = meter1.context.createRadialGradient(meter1.canvas.width / 2, meter1.canvas.height - 25,0,meter1.canvas.width / 2, meter1.canvas.height - 25,200); + grad2.addColorStop(0, 'yellow'); + grad2.addColorStop(1, 'white'); + + var grad3 = meter1.context.createRadialGradient(meter1.canvas.width / 2, meter1.canvas.height - 25,0,meter1.canvas.width / 2, meter1.canvas.height - 25,200); + grad3.addColorStop(0, 'red'); + grad3.addColorStop(1, 'white'); + + meter1.Set('chart.labels.position', 'inside'); + meter1.Set('chart.title', 'A sample measurement'); + meter1.Set('chart.title.vpos', 0.5); + meter1.Set('chart.title.color', 'black'); + meter1.Set('chart.green.color', grad1); + meter1.Set('chart.yellow.color', grad2); + meter1.Set('chart.red.color', grad3); + meter1.Set('chart.border', false); + meter1.Set('chart.needle.linewidth', 5); + meter1.Set('chart.needle.tail', true); + meter1.Set('chart.tickmarks.big.num', 0); + meter1.Set('chart.tickmarks.small.num', 0); + meter1.Set('chart.segment.radius.start', 100); + meter1.Set('chart.needle.radius', 80); + meter1.Set('chart.needle.linewidth', 2); + meter1.Set('chart.linewidth.segments', 15); + meter1.Set('chart.strokestyle', 'white'); + meter1.Set('chart.text.size', 14); + RGraph.Effects.Meter.Grow(meter1); + //meter1.Draw(); + setInterval(function () + { + meter1.value = RGraph.random(min,max); + RGraph.Effects.Meter.Grow(meter1); + }, 5000) + + var meter2 = new RGraph.Meter('meter2', 0, 10, 5); + meter2.Set('chart.units.post', 'kg'); + meter2.Set('chart.red.start', 0); + meter2.Set('chart.red.end', 3); + meter2.Set('chart.yellow.start', 3); + meter2.Set('chart.yellow.end', 6); + meter2.Set('chart.green.start', 6); + meter2.Set('chart.green.end', 10); + meter2.Draw(); + } + </script> + + <script> + var _gaq = _gaq || []; + _gaq.push(['_setAccount', 'UA-54706-2']); + _gaq.push(['_trackPageview']); + + (function() { + var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; + ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; + var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); + })(); + </script> +</head> +<body> + + + <!-- Social networking buttons --> + <div id="social_icons" class="warning" style="border-radius: 10px; top: 1px; position: fixed; width: 120px; height: 20px"> + <!-- <a title="Bookmark with delicious" href="http://delicious.com/save?jump=close&v=4&noui&jump=close&url=http://www.rgraph.net¬es=RGraph%20is%20a%20HTML5%20based%20javascript%20charts%20library%20supporting%20a%20wide%20range%20of%20different%20chart%20types&title=RGraph:%20Javascript%20charts%20%26%20graph%20library" target="_blank"><img src="../images/delicious.png" alt="Bookmark with delicious" width="22" height="22" border="0" style="position: relative; top: 1px" /></a> --> + <a href="http://twitter.com/home/?status=RGraph%3A%20Javascript+charts+library+http%3A%2F%2Fwww.rgraph.net+%23rgraph+%23html5+%23canvas+%23javascript+%23charts+@_rgraph" target="_blank" title="Mention RGraph on Twitter"><img src="../images/twitter.png" alt="Mention RGraph on Twitter"/></a> + <iframe src="http://www.facebook.com/plugins/like.php?app_id=253862424642173&href=http%3A%2F%2Fwww.rgraph.net&send=false&layout=button_count&width=450&show_faces=false&action=like&colorscheme=light&font=arial&height=21" scrolling="no" frameborder="0" style="width: 80px; height:21px; position: relative; top: 1px"></iframe> + </div> + + <script> + // Opera fix + if (navigator.userAgent.indexOf('Opera') == -1) { + document.getElementById("social_icons").style.position = 'fixed'; + } + </script> + + <div id="google_plusone"> + <!-- Place this tag where you want the +1 button to render --> + <g:plusone href="http://www.rgraph.net"></g:plusone> + </div> + <!-- Social networking buttons --> + + + <h1>RGraph: <span>HTML5 Javascript charts library</span> - Meter charts</h1> + + <script> + if (RGraph.isIE8()) { + 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.</div>'); + } + </script> + + + <div id="breadcrumb"> + <a href="../index.html">RGraph: HTML5 Javascript charts library</a> + > + <a href="./index.html">Examples</a> + > + Meter + </div> + + <div> + <p> + Meter charts are similar to Odometer charts albeit only a semi-circle and not a full circle. It can be better when trying illustrate + a particular level, but only have a limited amount of space. It could also be quite effective as part of a control panel. + </p> + + <p></p> + </div> + + <div> + <ul> + <li><a href="../docs/meter.html">Meter charts API documentation</a></li> + </ul> + </div> + + <div style="text-align: center"> + <canvas id="meter1" width="400" height="250"><div class="canvasfallback">[No canvas support]</div></canvas> + + <canvas id="meter2" width="400" height="250"><div class="canvasfallback">[No canvas support]</div></canvas> + </div> + +</body> +</html>
\ No newline at end of file diff --git a/schall/static/RGraph/examples/odo.html b/schall/static/RGraph/examples/odo.html new file mode 100644 index 0000000..8c582d0 --- /dev/null +++ b/schall/static/RGraph/examples/odo.html @@ -0,0 +1,173 @@ +<!DOCTYPE html> +<html> +<head> + <meta http-equiv="X-UA-Compatible" content="chrome=1"> + <!-- + /** + * o------------------------------------------------------------------------------o + * | This file is part of the RGraph package - you can learn more at: | + * | | + * | http://www.rgraph.net | + * | | + * | This package is licensed under the RGraph license. For all kinds of business | + * | purposes there is a small one-time licensing fee to pay and for non | + * | commercial purposes it is free to use. You can read the full license here: | + * | | + * | http://www.rgraph.net/LICENSE.txt | + * o------------------------------------------------------------------------------o + */ + --> + <title>RGraph: HTML5 Javascript charts library - odometer charts</title> + + <meta name="keywords" content="rgraph html5 canvas example odometer charts" /> + <meta name="description" content="RGraph: HTML5 Javascript charts library - Odometer charts example" /> + + <meta property="og:title" content="RGraph: HTML5 Javascript charts library" /> + <meta property="og:description" content="A charts library based on the HTML5 canvas tag" /> + <meta property="og:image" content="http://www.rgraph.net/images/logo.png"/> + + <link rel="stylesheet" href="../css/website.css" type="text/css" media="screen" /> + <link rel="icon" type="image/png" href="../images/favicon.png"> + + <!-- Place this tag in your head or just before your close body tag --> + <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> + + <script src="../libraries/RGraph.common.core.js" ></script> + <script src="../libraries/RGraph.odo.js" ></script> + <!--[if IE 8]><script src="../excanvas/excanvas.original.js"></script><![endif]--> + + <script> + window.onload = function () + { + // ID, MINIMUM, MAXIMUM, INDICATED VALUE + var odo1 = new RGraph.Odometer('odo1', 0, 12,9.5); + odo1.Set('chart.labels', ['12', '1','2','3','4','5','6','7','8','9','10','11']); + odo1.Set('chart.needle.thickness', 5); + odo1.Set('chart.needle.color', 'black'); + odo1.Set('chart.needle.extra', [[6, 'black', 50]]); + odo1.Set('chart.needle.head', false); + odo1.Set('chart.label.area', 40); + odo1.Set('chart.shadow.outer', true); + odo1.Set('chart.needle.tail', false); + + odo1.Set('chart.green.color', 'gray'); + odo1.Set('chart.yellow.color', 'gray'); + odo1.Set('chart.red.color', 'gray'); + + RGraph.AddCustomEventListener(odo1, 'ondraw', + function (obj) + { + var context = obj.context; + context.strokeStyle = 'black'; + context.fillStyle = 'white'; + context.beginPath(); + context.moveTo(obj.centerx, obj.centery); + context.arc(obj.centerx, obj.centery, 10, 0, 6.28, 0); + context.stroke(); + context.fill(); + } + ); + + odo1.Draw(); + + var odo2 = new RGraph.Odometer('odo2', 0, 360, 56); + odo2.Set('chart.needle.color', 'black'); + odo2.Set('chart.needle.tail', false); + odo2.Set('chart.label.area', 35); + odo2.Set('chart.border', RGraph.isIE8() ? false : true); + odo2.Set('chart.labels', ['N','NE','E','SE','S','SW','W','NW']); + odo2.Set('chart.red.min', 360); + odo2.Set('chart.red.color', 'gray'); + odo2.Set('chart.value.text', true); + odo2.Set('chart.value.units.post', '°'); + odo2.Draw(); + + + var odo3 = new RGraph.Odometer('odo3',0, 200, 160); + odo3.Set('chart.green.max', 150); + odo3.Set('chart.red.min', 175); + odo3.Set('chart.shadow.inner', true); + odo3.Set('chart.value.text', true); + odo3.Set('chart.value.units.post', ' litres'); + odo3.Draw(); + } + </script> + + <script> + var _gaq = _gaq || []; + _gaq.push(['_setAccount', 'UA-54706-2']); + _gaq.push(['_trackPageview']); + + (function() { + var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; + ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; + var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); + })(); + </script> +</head> +<body> + + + <!-- Social networking buttons --> + <div id="social_icons" class="warning" style="border-radius: 10px; top: 1px; position: fixed; width: 120px; height: 20px"> + <!-- <a title="Bookmark with delicious" href="http://delicious.com/save?jump=close&v=4&noui&jump=close&url=http://www.rgraph.net¬es=RGraph%20is%20a%20HTML5%20based%20javascript%20charts%20library%20supporting%20a%20wide%20range%20of%20different%20chart%20types&title=RGraph:%20Javascript%20charts%20%26%20graph%20library" target="_blank"><img src="../images/delicious.png" alt="Bookmark with delicious" width="22" height="22" border="0" style="position: relative; top: 1px" /></a> --> + <a href="http://twitter.com/home/?status=RGraph%3A%20Javascript+charts+library+http%3A%2F%2Fwww.rgraph.net+%23rgraph+%23html5+%23canvas+%23javascript+%23charts+@_rgraph" target="_blank" title="Mention RGraph on Twitter"><img src="../images/twitter.png" alt="Mention RGraph on Twitter"/></a> + <iframe src="http://www.facebook.com/plugins/like.php?app_id=253862424642173&href=http%3A%2F%2Fwww.rgraph.net&send=false&layout=button_count&width=450&show_faces=false&action=like&colorscheme=light&font=arial&height=21" scrolling="no" frameborder="0" style="width: 80px; height:21px; position: relative; top: 1px"></iframe> + </div> + + <script> + // Opera fix + if (navigator.userAgent.indexOf('Opera') == -1) { + document.getElementById("social_icons").style.position = 'fixed'; + } + </script> + + <div id="google_plusone"> + <!-- Place this tag where you want the +1 button to render --> + <g:plusone href="http://www.rgraph.net"></g:plusone> + </div> + <!-- Social networking buttons --> + + + <h1>RGraph: <span>HTML5 Javascript charts library</span> - Odometer charts</h1> + + <script> + if (RGraph.isIE8()) { + 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.</div>'); + } + </script> + + + <div id="breadcrumb"> + <a href="../index.html">RGraph: HTML5 Javascript charts library</a> + > + <a href="./index.html">Examples</a> + > + Odometer charts + </div> + + <div> + <p> + Odometer charts can be used to provide an indication of a particular value. For example you could easily use them to + represent values for a control panel that shows information about a server. Odometer charts indicating how much disk + space is used for example, would be more visual than a simple number. + </p> + + <p> + The green, yellow and red areas are configurable, allowing you to add some level of urgency into your figures + (as are the colors). The + figures are also configurable, so it can go from 0-10, or from 0-100. + </p> + </div> + + <div> + <ul> + <li><a href="../docs/odo.html">Odometer charts API documentation</a></li> + </ul> + </div> + + <canvas id="odo1" width="300" height="300">[No canvas support]</canvas> + <canvas id="odo2" width="300" height="300">[No canvas support]</canvas> + <canvas id="odo3" width="300" height="300">[No canvas support]</canvas> +</body> +</html>
\ No newline at end of file diff --git a/schall/static/RGraph/examples/pie.html b/schall/static/RGraph/examples/pie.html new file mode 100644 index 0000000..e8bf4bf --- /dev/null +++ b/schall/static/RGraph/examples/pie.html @@ -0,0 +1,170 @@ +<!DOCTYPE html> +<html> +<head> + <meta http-equiv="X-UA-Compatible" content="chrome=1"> + <!-- + /** + * o------------------------------------------------------------------------------o + * | This file is part of the RGraph package - you can learn more at: | + * | | + * | http://www.rgraph.net | + * | | + * | This package is licensed under the RGraph license. For all kinds of business | + * | purposes there is a small one-time licensing fee to pay and for non | + * | commercial purposes it is free to use. You can read the full license here: | + * | | + * | http://www.rgraph.net/LICENSE.txt | + * o------------------------------------------------------------------------------o + */ + --> + <title>RGraph: HTML5 Javascript charts library - pie charts</title> + + <meta name="keywords" content="rgraph html5 canvas example pie charts" /> + <meta name="description" content="RGraph: HTML5 Javascript charts library - Pie charts example" /> + + <meta property="og:title" content="RGraph: HTML5 Javascript charts library" /> + <meta property="og:description" content="A charts library based on the HTML5 canvas tag" /> + <meta property="og:image" content="http://www.rgraph.net/images/logo.png"/> + + <link rel="stylesheet" href="../css/website.css" type="text/css" media="screen" /> + <link rel="icon" type="image/png" href="../images/favicon.png"> + + <!-- Place this tag in your head or just before your close body tag --> + <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> + + <script src="../libraries/RGraph.common.core.js" ></script> + <script src="../libraries/RGraph.common.tooltips.js" ></script> + <script src="../libraries/RGraph.common.effects.js" ></script> + <script src="../libraries/RGraph.pie.js" ></script> + <!--[if IE 8]><script src="../excanvas/excanvas.original.js"></script><![endif]--> + + <script> + window.onload = function () + { + /** + * These are not angles - these are values. The appropriate angles are calculated + */ + var pie1 = new RGraph.Pie('pie1', [41,37,16,6]); // Create the pie object + pie1.Set('chart.labels', ['MSIE 7 (41%)', 'MSIE 6 (37%)', 'Firefox (16%)', 'Safari (3%)']); + //pie1.Set('chart.labels.sticks', true); + pie1.Set('chart.gutter.left', 30); + pie1.Set('chart.gutter.right', 30); + pie1.Set('chart.gutter.top', 35); + pie1.Set('chart.gutter.bottom', 35); + pie1.Set('chart.title', "Browser share"); + pie1.Set('chart.title.vpos', 0.3); + pie1.Set('chart.shadow', false); + pie1.Set('chart.tooltips.effect', 'fade'); + pie1.Set('chart.tooltips.event', 'onmousemove'); + pie1.Set('chart.tooltips', pie1.Get('chart.labels')); + pie1.Set('chart.highlight.style', '2d'); + pie1.Set('chart.linewidth', 2); + pie1.Set('chart.strokestyle', 'white'); + pie1.Set('chart.shadow', true); + pie1.Set('chart.shadow.offsetx', 0); + pie1.Set('chart.shadow.offsety', 0); + pie1.Set('chart.shadow.blur', 15); + pie1.Draw(); + + var pie2 = new RGraph.Pie('pie2', [12,29,45,17,7]); // Create the pie object + pie2.Set('chart.gutter.left', 45); + pie2.Set('chart.colors', ['red', 'pink', '#6f6', 'blue', 'yellow']); + pie2.Set('chart.key', ['John (2%)', 'Richard (29%)', 'Fred (45%)', 'Brian (17%)', 'Peter (7%)']); + pie2.Set('chart.key.background', 'white'); + pie2.Set('chart.strokestyle', 'white'); + pie2.Set('chart.linewidth', 3); + pie2.Set('chart.exploded', [10,10,10,20,20]); + pie2.Set('chart.shadow', true); + pie2.Set('chart.shadow.offsetx', 0); + pie2.Set('chart.shadow.offsety', 0); + pie2.Set('chart.shadow.blur', 25); + + if (RGraph.isIE8()) { + pie2.Draw(); + } else { + RGraph.Effects.Pie.RoundRobin(pie2); + } + } + </script> + + <script> + var _gaq = _gaq || []; + _gaq.push(['_setAccount', 'UA-54706-2']); + _gaq.push(['_trackPageview']); + + (function() { + var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; + ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; + var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); + })(); + </script> +</head> +<body> + + + <!-- Social networking buttons --> + <div id="social_icons" class="warning" style="border-radius: 10px; top: 1px; position: fixed; width: 120px; height: 20px"> + <!-- <a title="Bookmark with delicious" href="http://delicious.com/save?jump=close&v=4&noui&jump=close&url=http://www.rgraph.net¬es=RGraph%20is%20a%20HTML5%20based%20javascript%20charts%20library%20supporting%20a%20wide%20range%20of%20different%20chart%20types&title=RGraph:%20Javascript%20charts%20%26%20graph%20library" target="_blank"><img src="../images/delicious.png" alt="Bookmark with delicious" width="22" height="22" border="0" style="position: relative; top: 1px" /></a> --> + <a href="http://twitter.com/home/?status=RGraph%3A%20Javascript+charts+library+http%3A%2F%2Fwww.rgraph.net+%23rgraph+%23html5+%23canvas+%23javascript+%23charts+@_rgraph" target="_blank" title="Mention RGraph on Twitter"><img src="../images/twitter.png" alt="Mention RGraph on Twitter"/></a> + <iframe src="http://www.facebook.com/plugins/like.php?app_id=253862424642173&href=http%3A%2F%2Fwww.rgraph.net&send=false&layout=button_count&width=450&show_faces=false&action=like&colorscheme=light&font=arial&height=21" scrolling="no" frameborder="0" style="width: 80px; height:21px; position: relative; top: 1px"></iframe> + </div> + + <script> + // Opera fix + if (navigator.userAgent.indexOf('Opera') == -1) { + document.getElementById("social_icons").style.position = 'fixed'; + } + </script> + + <div id="google_plusone"> + <!-- Place this tag where you want the +1 button to render --> + <g:plusone href="http://www.rgraph.net"></g:plusone> + </div> + <!-- Social networking buttons --> + + +<div id="breadcrumb"> + <a href="../index.html">RGraph: HTML5 Javascript charts library</a> + > + <a href="./index.html">Examples</a> + > + Pie chart +</div> + + <h1>RGraph: <span>HTML5 Javascript charts library</span> - Pie charts</h1> + + <script> + if (RGraph.isIE8()) { + 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.</div>'); + } + </script> + + <div> + + <p> + Pie charts can be used when you need to represent a value as part of a whole. It is commonly used to represent percentages, + relative magnitudes or relative frequencies. If your intent is to compare a particular value (slice) against the whole of + the Pie chart, then it can be quite effective. If however you want to compare two seperate segments, then it can get + more difficult. If this is the case, you may want to consider a bar chart for example. + </p> + + <p> + The colours can be customised, as can the borders (using the same color as the background and a line width of + about 5 gives the effect of segment separation. The chart can also have a drop shadow if you want one, but this shouldn't + be used in conjunction with segment seperation. + </p> + </div> + + <div> + <ul> + <li><a href="../docs/pie.html">Pie charts API documentation</a></li> + </ul> + </div> + + <div style="text-align: center"> + <canvas id="pie1" width="450" height="300">[No canvas support]</canvas> + <canvas id="pie2" width="450" height="300">[No canvas support]</canvas> + </div> + +</body> +</html>
\ No newline at end of file diff --git a/schall/static/RGraph/examples/radar.html b/schall/static/RGraph/examples/radar.html new file mode 100644 index 0000000..7b0a8a0 --- /dev/null +++ b/schall/static/RGraph/examples/radar.html @@ -0,0 +1,193 @@ +<!DOCTYPE html> +<html> +<head> + <meta http-equiv="X-UA-Compatible" content="chrome=1"> + <!-- + /** + * o------------------------------------------------------------------------------o + * | This file is part of the RGraph package - you can learn more at: | + * | | + * | http://www.rgraph.net | + * | | + * | This package is licensed under the RGraph license. For all kinds of business | + * | purposes there is a small one-time licensing fee to pay and for non | + * | commercial purposes it is free to use. You can read the full license here: | + * | | + * | http://www.rgraph.net/LICENSE.txt | + * o------------------------------------------------------------------------------o + */ + --> + + <title>RGraph: HTML5 Javascript charts library - Radar charts</title> + + <meta name="keywords" content="rgraph html5 canvas example radar charts" /> + <meta name="description" content="RGraph: HTML5 Javascript charts library - Radar charts" /> + + <meta property="og:title" content="RGraph: HTML5 Javascript charts library" /> + <meta property="og:description" content="A charts library based on the HTML5 canvas tag" /> + <meta property="og:image" content="http://www.rgraph.net/images/logo.png"/> + + <link rel="stylesheet" href="../css/website.css" type="text/css" media="screen" /> + <link rel="icon" type="image/png" href="../images/favicon.png"> + + <!-- Place this tag in your head or just before your close body tag --> + <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> + + <script src="../libraries/RGraph.common.core.js" ></script> + <script src="../libraries/RGraph.common.context.js" ></script> + <script src="../libraries/RGraph.common.annotate.js" ></script> + <script src="../libraries/RGraph.common.tooltips.js" ></script> + <script src="../libraries/RGraph.common.zoom.js" ></script> + <script src="../libraries/RGraph.radar.js" ></script> + <!--[if IE 8]><script src="../excanvas/excanvas.original.js"></script><![endif]--> + + <script> + window.onload = function () + { + if (RGraph.isIE8()) { + ShowGraph1(); + ShowGraph2(); + ShowGraph3(); + } + } + + function ShowGraph1 () + { + var radar1 = new RGraph.Radar('radar5', [43,84,54,64,34,21,21], [52,30,51,41,22,23,56]); + radar1.Set('chart.colors', ['rgba(255,0,0,0.3)']); + radar1.Set('chart.labels.axes', 'n'); + radar1.Set('chart.circle', 50); + radar1.Set('chart.circle.fill', 'rgba(0, 0, 255, 0.3)'); + radar1.Set('chart.tooltips', [ + 'Dave (43)', 'John (84)', 'Kiffen (54)', 'Peter (64)', 'Lou (34)', 'Igor (21)', 'John (21)', + 'Dave (52)', 'John (30)', 'Kiffen (51)', 'Peter (41)', 'Lou (22)', 'Igor (23)', 'John (56)', + ]); + radar1.Set('chart.colors', ['green', 'red']); + radar1.Set('chart.colors.alpha', 0.5); + radar1.Set('chart.title', 'The results of the competition'); + radar1.Set('chart.labels', ['Dave (43)', 'John (84)', 'Kiffen (54)', 'Peter (64)', 'Lou (34)', 'Igor (21)', 'John (21)']); + radar1.Set('chart.tooltips.effect', 'fade'); + radar1.Draw(); + } + + function ShowGraph2 () + { + var radar = new RGraph.Radar('radar2', [7,6,6,7,8], [6,7,7,6,6], [4,5,6,10,4]); + radar.Set('chart.strokestyle', 'black'); + radar.Set('chart.colors.alpha', 0.3); + radar.Set('chart.colors', ['red', 'green', 'yellow']); + radar.Set('chart.title', 'Multiple datasets, key'); + radar.Set('chart.tooltips.effect', 'snap'); + radar.Set('chart.tooltips', [ + 'Pete in 2000','Lou in 2000','Jim in 2000','Jack in 2000','Fred in 2000', + 'Pete in 2001','Lou in 2001','Jim in 2001','Jack in 2001','Fred in 2001', + 'Pete in 2002','Lou in 2002','Jim in 2002','Jack in 2002','Fred in 2002' + ]); + radar.Set('chart.key', ['2000','2001','2002']); + radar.Set('chart.key.position', 'graph'); + radar.Set('chart.labels', ['Pete','Lou','Jim','Jack','Fred']); + radar.Set('chart.gutter.top', 35); + radar.Draw(); + } + </script> + + <script> + var _gaq = _gaq || []; + _gaq.push(['_setAccount', 'UA-54706-2']); + _gaq.push(['_trackPageview']); + + (function() { + var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; + ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; + var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); + })(); + </script> +</head> +<body> + + + <!-- Social networking buttons --> + <div id="social_icons" class="warning" style="border-radius: 10px; top: 1px; position: fixed; width: 120px; height: 20px"> + <!-- <a title="Bookmark with delicious" href="http://delicious.com/save?jump=close&v=4&noui&jump=close&url=http://www.rgraph.net¬es=RGraph%20is%20a%20HTML5%20based%20javascript%20charts%20library%20supporting%20a%20wide%20range%20of%20different%20chart%20types&title=RGraph:%20Javascript%20charts%20%26%20graph%20library" target="_blank"><img src="../images/delicious.png" alt="Bookmark with delicious" width="22" height="22" border="0" style="position: relative; top: 1px" /></a> --> + <a href="http://twitter.com/home/?status=RGraph%3A%20Javascript+charts+library+http%3A%2F%2Fwww.rgraph.net+%23rgraph+%23html5+%23canvas+%23javascript+%23charts+@_rgraph" target="_blank" title="Mention RGraph on Twitter"><img src="../images/twitter.png" alt="Mention RGraph on Twitter"/></a> + <iframe src="http://www.facebook.com/plugins/like.php?app_id=253862424642173&href=http%3A%2F%2Fwww.rgraph.net&send=false&layout=button_count&width=450&show_faces=false&action=like&colorscheme=light&font=arial&height=21" scrolling="no" frameborder="0" style="width: 80px; height:21px; position: relative; top: 1px"></iframe> + </div> + + <script> + // Opera fix + if (navigator.userAgent.indexOf('Opera') == -1) { + document.getElementById("social_icons").style.position = 'fixed'; + } + </script> + + <div id="google_plusone"> + <!-- Place this tag where you want the +1 button to render --> + <g:plusone href="http://www.rgraph.net"></g:plusone> + </div> + <!-- Social networking buttons --> + + +<div id="breadcrumb"> + <a href="../index.html">RGraph: HTML5 Javascript charts library</a> + > + <a href="./index.html">Examples</a> + > + Radar charts +</div> + +<h1>RGraph: <span>HTML5 Javascript charts library</span> - Radar charts</h1> + + <div style="background-color: #ffb; border: 2px dashed #000; padding: 3px"> + This chart used to be called the Tradar chart (T standing for "Traditional" - there used to be two Radar charts in RGraph), + however now (July 2011), it has been renamed to the "Radar" chart to make it easier for people to identify. If you use it + you will need to update your code accordingly. Keep in mind that if you use the .type property - this has been updated too + (to <i>radar</i>). + </div> + + <script> + if (RGraph.isIE8()) { + 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.</div>'); + } + </script> + + <div style="float: right; width: 450px"> + </div> + + <p> + Radar charts, that are similar to Rose charts. Each of the data points is + arranged equally in terms of angle, whilst the magnitude of each point is shown by the distance from the centre. Thus, + data points of a higher magnitude can be seen as they are more distant from the centre. + </p> + + <p> + Suitable for many datasets, but not all. If not, then Rose charts may be more apt. + </p> + + <p> + The circle, as can be seen in the second example, could be used to indicate a threshold of sorts. In the example, + it could be minimum sales required for a particular month. Months that fall below this threshold can be clearly seen. + </p> + + <div> + <ul> + <li><a href="../docs/radar.html">Radar charts API documentation</a></li> + <li><a href="rose.html">Rose charts examples</a></li> + </ul> + </div> + + <div> + <canvas id="radar2" width="450" height="300">[No canvas support]</canvas> + <canvas id="radar5" width="450" height="300">[No canvas support]</canvas> + </div> + + + + <script> + if (!RGraph.isIE8()) { + ShowGraph1(); + ShowGraph2(); + } + </script> + +</body> +</html>
\ No newline at end of file diff --git a/schall/static/RGraph/examples/rose.html b/schall/static/RGraph/examples/rose.html new file mode 100644 index 0000000..3726b19 --- /dev/null +++ b/schall/static/RGraph/examples/rose.html @@ -0,0 +1,145 @@ +<!DOCTYPE html> +<html> +<head> + <meta http-equiv="X-UA-Compatible" content="chrome=1"> + <!-- + /** + * o------------------------------------------------------------------------------o + * | This file is part of the RGraph package - you can learn more at: | + * | | + * | http://www.rgraph.net | + * | | + * | This package is licensed under the RGraph license. For all kinds of business | + * | purposes there is a small one-time licensing fee to pay and for non | + * | commercial purposes it is free to use. You can read the full license here: | + * | | + * | http://www.rgraph.net/LICENSE.txt | + * o------------------------------------------------------------------------------o + */ + --> + <title>RGraph: HTML5 Javascript charts library - rose charts</title> + + <meta name="keywords" content="rgraph html5 canvas example rose charts" /> + <meta name="description" content="RGraph: HTML5 Javascript charts library - Rose charts example" /> + + <meta property="og:title" content="RGraph: HTML5 Javascript charts library" /> + <meta property="og:description" content="A charts library based on the HTML5 canvas tag" /> + <meta property="og:image" content="http://www.rgraph.net/images/logo.png"/> + + <link rel="stylesheet" href="../css/website.css" type="text/css" media="screen" /> + <link rel="icon" type="image/png" href="../images/favicon.png"> + + <!-- Place this tag in your head or just before your close body tag --> + <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> + + <script src="../libraries/RGraph.common.core.js" ></script> + <script src="../libraries/RGraph.common.tooltips.js" ></script> + <script src="../libraries/RGraph.common.effects.js" ></script> + <script src="../libraries/RGraph.rose.js" ></script> + <!--[if IE 8]><script src="../excanvas/excanvas.original.js"></script><![endif]--> + + <script> + window.onload = function () + { + var rose1 = new RGraph.Rose('rose3', [[4,5,2],[3,5,4],[2,9,4],[1,8,5],[3,6,7],[4,8,5],[6,5,8],[6,9,8]]); + + // Rose chart now supports functions as tooltips + rose1.Set('chart.tooltips', + function (index) + { + if (index % 3 == 0) { + return 'Julie'; + } else if (index % 3 == 1) { + return 'Frederick'; + } else if (index % 3 == 2) { + return 'Jobe'; + } + } + ); + rose1.Set('chart.colors.alpha', 0.5); + rose1.Set('chart.labels', ['NE','E','SE','S','SW','W','NW','']); + rose1.Set('chart.labels.position', 'edge'); + rose1.Set('chart.margin', 5); + //rose1.Draw(); + RGraph.Effects.Rose.Grow(rose1); + + var rose2= new RGraph.Rose('rose4', [[45,75],[45,23],[45,26],[78,4],[49,12],[49,21],[40,18],[48,12],[43,23],[45,12]]); + rose2.Set('chart.colors.alpha', 0.5); + rose2.Set('chart.colors.sequential', true); + rose2.Set('chart.labels', ['Fred','Julie','Denise','Cynthia','Peter','Wez','Noddy','James','Jimmy','Craig']); + rose2.Set('chart.labels.position', 'edge'); + rose2.Set('chart.variant', 'non-equi-angular'); + rose2.Set('chart.tooltips', ['Fred','Julie','Denise','Cynthia','Peter','Wez','Noddy','James','Jimmy','Craig']); + rose2.Draw(); + } + </script> + + <script> + var _gaq = _gaq || []; + _gaq.push(['_setAccount', 'UA-54706-2']); + _gaq.push(['_trackPageview']); + + (function() { + var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; + ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; + var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); + })(); + </script> +</head> +<body> + <!-- Social networking buttons --> + <div id="social_icons" class="warning" style="border-radius: 10px; top: 1px; position: fixed; width: 120px; height: 20px"> + <!-- <a title="Bookmark with delicious" href="http://delicious.com/save?jump=close&v=4&noui&jump=close&url=http://www.rgraph.net¬es=RGraph%20is%20a%20HTML5%20based%20javascript%20charts%20library%20supporting%20a%20wide%20range%20of%20different%20chart%20types&title=RGraph:%20Javascript%20charts%20%26%20graph%20library" target="_blank"><img src="../images/delicious.png" alt="Bookmark with delicious" width="22" height="22" border="0" style="position: relative; top: 1px" /></a> --> + <a href="http://twitter.com/home/?status=RGraph%3A%20Javascript+charts+library+http%3A%2F%2Fwww.rgraph.net+%23rgraph+%23html5+%23canvas+%23javascript+%23charts+@_rgraph" target="_blank" title="Mention RGraph on Twitter"><img src="../images/twitter.png" alt="Mention RGraph on Twitter"/></a> + <iframe src="http://www.facebook.com/plugins/like.php?app_id=253862424642173&href=http%3A%2F%2Fwww.rgraph.net&send=false&layout=button_count&width=450&show_faces=false&action=like&colorscheme=light&font=arial&height=21" scrolling="no" frameborder="0" style="width: 80px; height:21px; position: relative; top: 1px"></iframe> + </div> + + <script> + // Opera fix + if (navigator.userAgent.indexOf('Opera') == -1) { + document.getElementById("social_icons").style.position = 'fixed'; + } + </script> + + <div id="google_plusone"> + <!-- Place this tag where you want the +1 button to render --> + <g:plusone href="http://www.rgraph.net"></g:plusone> + </div> + <!-- Social networking buttons --> + + +<div id="breadcrumb"> + <a href="../index.html">RGraph: HTML5 Javascript charts library</a> + > + <a href="./index.html">Examples</a> + > + Rose charts +</div> + +<h1>RGraph: <span>HTML5 Javascript charts library</span> - Rose charts</h1> + + <script> + if (RGraph.isIE8()) { + 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.</div>'); + } + </script> + + <p> + The Rose chart was formally called the Pseudo-Radar chart. + </p> + + <ul> + <li><a href="../docs/rose.html">Rose charts API documentation</a></li> + </ul> + <div style="display: inline-block; text-align: center; font-family: Verdana"> + <b>A stacked Rose chart</b><br /> + <canvas id="rose3" width="450" height="350">[No canvas support]</canvas> + </div> + + <div style="display: inline-block; text-align: center; font-family: Verdana"> + <b>A "non-equi-angular" Rose chart</b><br /> + <canvas id="rose4" width="450" height="350">[No canvas support]</canvas> + </div> + +</body> +</html>
\ No newline at end of file diff --git a/schall/static/RGraph/examples/rscatter.html b/schall/static/RGraph/examples/rscatter.html new file mode 100644 index 0000000..416e4c1 --- /dev/null +++ b/schall/static/RGraph/examples/rscatter.html @@ -0,0 +1,144 @@ +<!DOCTYPE html > +<html> +<head> + <meta http-equiv="X-UA-Compatible" content="chrome=1"> + <!-- + /** + * o------------------------------------------------------------------------------o + * | This file is part of the RGraph package - you can learn more at: | + * | | + * | http://www.rgraph.net | + * | | + * | This package is licensed under the RGraph license. For all kinds of business | + * | purposes there is a small one-time licensing fee to pay and for non | + * | commercial purposes it is free to use. You can read the full license here: | + * | | + * | http://www.rgraph.net/LICENSE.txt | + * o------------------------------------------------------------------------------o + */ + --> + + <title>RGraph: HTML5 Javascript charts library - Radial scatter charts</title> + + <meta name="keywords" content="rgraph html5 canvas example radial scatter chart" /> + <meta name="description" content="RGraph: HTML5 Javascript charts library - Radial scatter chart example" /> + + <meta property="og:title" content="RGraph: HTML5 Javascript charts library" /> + <meta property="og:description" content="A charts library based on the HTML5 canvas tag" /> + <meta property="og:image" content="http://www.rgraph.net/images/logo.png"/> + + <link rel="stylesheet" href="../css/website.css" type="text/css" media="screen" /> + <link rel="icon" type="image/png" href="../images/favicon.png"> + + <!-- Place this tag in your head or just before your close body tag --> + <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> + + <script src="../libraries/RGraph.common.core.js" ></script> + <script src="../libraries/RGraph.common.tooltips.js" ></script> + <script src="../libraries/RGraph.rscatter.js" ></script> + <!--[if IE 8]><script src="../excanvas/excanvas.original.js"></script><![endif]--> + + <script> + window.onload = function () + { + // Create the data + var data = []; + for (var i=0; i<75; i++) { + data.push([RGraph.random(0, 360), i * RGraph.random(0, 10), null, String('Index: ' + i)]); + } + + var rscatter1 = new RGraph.Rscatter('cvs', data); + rscatter1.Set('chart.labels.axes', 'n'); + rscatter1.Set('chart.labels.position', 'edge'); + rscatter1.Set('chart.labels', ['NE', 'E', 'SE', 'S', 'SW', 'W', 'NW', '']); + rscatter1.Set('chart.tickmarks', 'plus'); + rscatter1.Set('chart.tooltips.effect', 'contract'); + rscatter1.Set('chart.title', 'Direction and magnitude'); + rscatter1.Set('chart.title.color', 'black'); + rscatter1.Set('chart.title.vpos', 0.3); + rscatter1.Draw(); + + var rscatter2 = new RGraph.Rscatter('cvs2', [ + [30, 120, 'red'], + [350, 100, 'blue'], + [456, 97, 'black'], + [125, 67, 'red'], + [245, 84, 'green'] + ]); + rscatter2.Set('chart.title', 'Another Radial scatter chart'); + rscatter2.Set('chart.title.color', 'black'); + rscatter2.Set('chart.title.vpos', 0.3); + rscatter2.Draw(); + } + </script> + + <script> + var _gaq = _gaq || []; + _gaq.push(['_setAccount', 'UA-54706-2']); + _gaq.push(['_trackPageview']); + + (function() { + var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; + ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; + var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); + })(); + </script> +</head> +<body> + + + <!-- Social networking buttons --> + <div id="social_icons" class="warning" style="border-radius: 10px; top: 1px; position: fixed; width: 120px; height: 20px"> + <!-- <a title="Bookmark with delicious" href="http://delicious.com/save?jump=close&v=4&noui&jump=close&url=http://www.rgraph.net¬es=RGraph%20is%20a%20HTML5%20based%20javascript%20charts%20library%20supporting%20a%20wide%20range%20of%20different%20chart%20types&title=RGraph:%20Javascript%20charts%20%26%20graph%20library" target="_blank"><img src="../images/delicious.png" alt="Bookmark with delicious" width="22" height="22" border="0" style="position: relative; top: 1px" /></a> --> + <a href="http://twitter.com/home/?status=RGraph%3A%20Javascript+charts+library+http%3A%2F%2Fwww.rgraph.net+%23rgraph+%23html5+%23canvas+%23javascript+%23charts+@_rgraph" target="_blank" title="Mention RGraph on Twitter"><img src="../images/twitter.png" alt="Mention RGraph on Twitter"/></a> + <iframe src="http://www.facebook.com/plugins/like.php?app_id=253862424642173&href=http%3A%2F%2Fwww.rgraph.net&send=false&layout=button_count&width=450&show_faces=false&action=like&colorscheme=light&font=arial&height=21" scrolling="no" frameborder="0" style="width: 80px; height:21px; position: relative; top: 1px"></iframe> + </div> + + <script> + // Opera fix + if (navigator.userAgent.indexOf('Opera') == -1) { + document.getElementById("social_icons").style.position = 'fixed'; + } + </script> + + <div id="google_plusone"> + <!-- Place this tag where you want the +1 button to render --> + <g:plusone href="http://www.rgraph.net"></g:plusone> + </div> + <!-- Social networking buttons --> + + +<div id="breadcrumb"> + <a href="../index.html">RGraph: HTML5 Javascript charts library</a> + > + <a href="./index.html">Examples</a> + > + Radial scatter charts +</div> + +<h1>RGraph: <span>HTML5 Javascript charts library</span> - Radial scatter charts</h1> + + <script> + if (RGraph.isIE8()) { + 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.</div>'); + } + </script> + + <p> + Radial scatter charts are a circular variant of regular Scatter charts, and as the name suggests, circular. They + may be more suited to your dataset than regular scatter charts. + </p> + + <div> + <ul> + <li><a href="../docs/rscatter.html">Radial scatter charts API documentation</a></li> + </ul> + </div> + + <div style="text-align: center"> + <canvas id="cvs" width="350" height="350">[No canvas support]</canvas> + <canvas id="cvs2" width="350" height="350">[No canvas support]</canvas> + </div> + +</body> +</html>
\ No newline at end of file diff --git a/schall/static/RGraph/examples/scatter.html b/schall/static/RGraph/examples/scatter.html new file mode 100644 index 0000000..301837b --- /dev/null +++ b/schall/static/RGraph/examples/scatter.html @@ -0,0 +1,161 @@ +<!DOCTYPE html> +<html> +<head> + <meta http-equiv="X-UA-Compatible" content="chrome=1"> + <!-- + /** + * o------------------------------------------------------------------------------o + * | This file is part of the RGraph package - you can learn more at: | + * | | + * | http://www.rgraph.net | + * | | + * | This package is licensed under the RGraph license. For all kinds of business | + * | purposes there is a small one-time licensing fee to pay and for non | + * | commercial purposes it is free to use. You can read the full license here: | + * | | + * | http://www.rgraph.net/LICENSE.txt | + * o------------------------------------------------------------------------------o + */ + --> + + <title>RGraph: HTML5 Javascript charts library - scatter charts</title> + + <meta name="keywords" content="rgraph html5 canvas example scatter chart" /> + <meta name="description" content="RGraph: HTML5 Javascript charts library - Scatter charts example" /> + + <meta property="og:title" content="RGraph: HTML5 Javascript charts library" /> + <meta property="og:description" content="A charts library based on the HTML5 canvas tag" /> + <meta property="og:image" content="http://www.rgraph.net/images/logo.png"/> + + <link rel="stylesheet" href="../css/website.css" type="text/css" media="screen" /> + <link rel="icon" type="image/png" href="../images/favicon.png"> + + <!-- Place this tag in your head or just before your close body tag --> + <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> + + <script src="../libraries/RGraph.common.core.js" ></script> + <script src="../libraries/RGraph.common.tooltips.js" ></script> + <script src="../libraries/RGraph.scatter.js" ></script> + <!--[if IE 8]><script src="../excanvas/excanvas.original.js"></script><![endif]--> + + <script> + window.onload = function () + { + + var data = [ + [10,15,'red'],[13,16,'red'],[12,11,'red'],[15,16,'red'],[20,19,'red'],[19,16,'red'],[13,15,'red'],[11,12,'red'],[13,16,'red'],[5,19,'red'],[16,15,'red'],[13,15,'red'],[14,14,'red'],[12,12,'red'], + [5,4,'green'],[6,14,'green'],[19,12,'green'],[3,5,'green'],[1,16,'green'],[13,5,'green'],[15,15,'green'],[13,5,'green'],[4,9,'green'],[16,6,'green'],[13,18,'green'],[18,12,'green'],[19,18,'green'],[13,16,'green'],[15,14,'green'], + [12,4,'blue'],[4,23,'blue'],[13,8,'blue'],[12,12,'blue'],[18,4,'blue'],[4,18,'blue'],[11,2,'blue'],[4,3,'blue'],[5,8,'blue'],[1,9,'blue'],[4,6,'blue'],[16,8,'blue'],[17,8,'blue'],[19,9,'blue'],[13,5,'blue'],[16,21,'blue'], + [12,4],[13,12],[11,16],[4,19],[4,3],[5,6],[1,9],[4,12],[6,12],[8,8],[16,6],[13,5],[15,13],[23,23,'red'], [1,1, 'gray'], + [1,4,'gray'], [2,3,'gray'], [1,6,'gray'], [2,3,'gray'], [2,5,'gray'], [3,7,'gray'], [1,4,'gray'], [2,7,'gray'] + ]; + + var scatter1 = new RGraph.Scatter('scatter1', data); + scatter1.Set('chart.ylabels.count', 10); + scatter1.Set('chart.background.hbars', [[0,null,'rgba(0,255,0,0.3)']]); + scatter1.Set('chart.background.grid.autofit.numhlines', 10); + scatter1.Set('chart.background.grid.autofit.numvlines', 28); + scatter1.Set('chart.labels', [['Week 1', 0], ['Week 2', 7], ['Week 3', 14], ['Week 4', 21]]); + scatter1.Set('chart.labels.specific.align', 'center'); + scatter1.Set('chart.xmax', 28); // Necessary + scatter1.Set('chart.defaultcolor', 'black'); // Optional + scatter1.Set('chart.title', 'This months sales'); + scatter1.Set('chart.gutter.left', 40); + scatter1.Set('chart.tickmarks', 'square'); + scatter1.Set('chart.ticksize', 4); + scatter1.Set('chart.ymax', 30); + scatter1.Set('chart.units.pre', '$'); + scatter1.Set('chart.line.colors', ['red','blue','black']); + scatter1.Set('chart.key', ['Bob','Fred','Gaz']); + scatter1.Draw(); + + + + var scatter2 = new RGraph.Scatter('scatter2', [[10,[21,22,26,31,35, 'red', 'green',35], 'red', 'A tooltip'],[250,45, 'red', 'A fourth tooltip']], + [[50,[5,22,26,31,35, '#000', '#000'], '#000', 'A second tooltip'],[150,45, 'blue', 'A third tooltip']] // Dataset 2 + ); + scatter2.Set('chart.title', 'A Scatter chart boxplot'); + scatter2.Set('chart.boxplot.capped', false); + scatter2.Set('chart.labels', ['Q1', 'Q2', 'Q3', 'Q4']); + scatter2.Set('chart.xmax', 365); + scatter2.Set('chart.ymax', 50); + scatter2.Set('chart.boxplot.width', 12); // The default width + //scatter2.Set('chart.background.vbars', [[182.5, 91.125, 'rgba(0,255,0,0.5)']]); +scatter2.Set('chart.ylabels.inside', true); +scatter2.Set('chart.yaxispos', 'left'); + scatter2.Draw(); + } + </script> + + <script> + var _gaq = _gaq || []; + _gaq.push(['_setAccount', 'UA-54706-2']); + _gaq.push(['_trackPageview']); + + (function() { + var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; + ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; + var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); + })(); + </script> +</head> +<body> + + + <!-- Social networking buttons --> + <div id="social_icons" class="warning" style="border-radius: 10px; top: 1px; position: fixed; width: 120px; height: 20px"> + <!-- <a title="Bookmark with delicious" href="http://delicious.com/save?jump=close&v=4&noui&jump=close&url=http://www.rgraph.net¬es=RGraph%20is%20a%20HTML5%20based%20javascript%20charts%20library%20supporting%20a%20wide%20range%20of%20different%20chart%20types&title=RGraph:%20Javascript%20charts%20%26%20graph%20library" target="_blank"><img src="../images/delicious.png" alt="Bookmark with delicious" width="22" height="22" border="0" style="position: relative; top: 1px" /></a> --> + <a href="http://twitter.com/home/?status=RGraph%3A%20Javascript+charts+library+http%3A%2F%2Fwww.rgraph.net+%23rgraph+%23html5+%23canvas+%23javascript+%23charts+@_rgraph" target="_blank" title="Mention RGraph on Twitter"><img src="../images/twitter.png" alt="Mention RGraph on Twitter"/></a> + <iframe src="http://www.facebook.com/plugins/like.php?app_id=253862424642173&href=http%3A%2F%2Fwww.rgraph.net&send=false&layout=button_count&width=450&show_faces=false&action=like&colorscheme=light&font=arial&height=21" scrolling="no" frameborder="0" style="width: 80px; height:21px; position: relative; top: 1px"></iframe> + </div> + + <script> + // Opera fix + if (navigator.userAgent.indexOf('Opera') == -1) { + document.getElementById("social_icons").style.position = 'fixed'; + } + </script> + + <div id="google_plusone"> + <!-- Place this tag where you want the +1 button to render --> + <g:plusone href="http://www.rgraph.net"></g:plusone> + </div> + <!-- Social networking buttons --> + + +<div id="breadcrumb"> + <a href="../index.html">RGraph: HTML5 Javascript charts library</a> + > + <a href="./index.html">Examples</a> + > + Scatter charts +</div> + +<h1>RGraph: <span>HTML5 Javascript charts library</span> - Scatter charts</h1> + + <script> + if (RGraph.isIE8()) { + 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.</div>'); + } + </script> + + <p> + Scatter charts use two variables to plot points and makes it clear where there are congregations. The data points + make up the X and Y coordinates. The labels on the X axis are separate from the X units, allowing you to "group" them. For + example, like the example, you could set the maxium X value to be 365, but only have four labels. That way you would + have a granularity of a day, but the X axis would only have four labels. Like the example. + </p> + + <div> + <ul> + <li><a href="../docs/scatter.html">Scatter charts API documentation</a></li> + </ul> + </div> + + <canvas id="scatter1" width="450" height="200">[No canvas support]</canvas> + <canvas id="scatter2" width="450" height="200">[No canvas support]</canvas> + + + +</body> +</html>
\ No newline at end of file diff --git a/schall/static/RGraph/examples/showcase.html b/schall/static/RGraph/examples/showcase.html new file mode 100644 index 0000000..0a9342b --- /dev/null +++ b/schall/static/RGraph/examples/showcase.html @@ -0,0 +1,19 @@ +<!-- Social networking buttons --> + <div id="social_icons" class="warning" style="border-radius: 10px; top: 1px; position: fixed; width: 120px; height: 20px"> + <!-- <a title="Bookmark with delicious" href="http://delicious.com/save?jump=close&v=4&noui&jump=close&url=http://www.rgraph.net¬es=RGraph%20is%20a%20HTML5%20based%20javascript%20charts%20library%20supporting%20a%20wide%20range%20of%20different%20chart%20types&title=RGraph:%20Javascript%20charts%20%26%20graph%20library" target="_blank"><img src="../images/delicious.png" alt="Bookmark with delicious" width="22" height="22" border="0" style="position: relative; top: 1px" /></a> --> + <a href="http://twitter.com/home/?status=RGraph%3A%20Javascript+charts+library+http%3A%2F%2Fwww.rgraph.net+%23rgraph+%23html5+%23canvas+%23javascript+%23charts+@_rgraph" target="_blank" title="Mention RGraph on Twitter"><img src="../images/twitter.png" alt="Mention RGraph on Twitter"/></a> + <iframe src="http://www.facebook.com/plugins/like.php?app_id=253862424642173&href=http%3A%2F%2Fwww.rgraph.net&send=false&layout=button_count&width=450&show_faces=false&action=like&colorscheme=light&font=arial&height=21" scrolling="no" frameborder="0" style="width: 80px; height:21px; position: relative; top: 1px"></iframe> + </div> + + <script> + // Opera fix + if (navigator.userAgent.indexOf('Opera') == -1) { + document.getElementById("social_icons").style.position = 'fixed'; + } + </script> + + <div id="google_plusone"> + <!-- Place this tag where you want the +1 button to render --> + <g:plusone href="http://www.rgraph.net"></g:plusone> + </div> +
\ No newline at end of file diff --git a/schall/static/RGraph/examples/text.html b/schall/static/RGraph/examples/text.html new file mode 100644 index 0000000..c334d2f --- /dev/null +++ b/schall/static/RGraph/examples/text.html @@ -0,0 +1,133 @@ +<!DOCTYPE html> +<html> +<head> + <meta http-equiv="X-UA-Compatible" content="chrome=1"> + <!-- + /** + * o------------------------------------------------------------------------------o + * | This file is part of the RGraph package - you can learn more at: | + * | | + * | http://www.rgraph.net | + * | | + * | This package is licensed under the RGraph license. For all kinds of business | + * | purposes there is a small one-time licensing fee to pay and for non | + * | commercial purposes it is free to use. You can read the full license here: | + * | | + * | http://www.rgraph.net/LICENSE.txt | + * o------------------------------------------------------------------------------o + */ + --> + <title>RGraph: Javascript charts & HTML5 canvas charts library - Animated rotating text with the RGraph software</title> + + <link rel="stylesheet" href="../css/website.css" type="text/css" media="screen" /> + <link rel="icon" type="image/png" href="../images/favicon.png"> + + <script src="../libraries/RGraph.common.core.js" ></script> + + <script> + __pause = false; // Provide a way to pause the rotation + __RGraph_rotate = 0; // A record of the angle (IN DEGREES) we're at currently + __RGraph_rotate2 = 0; // Ditto, but this is controlled by the buttons + + window.onload = function () + { + + if (!__pause) { + var canvas = document.getElementById("myc"); + var context = canvas.getContext('2d'); + + RGraph.Clear(canvas); // Clears the canvas + + context.beginPath(); + context.fillStyle = 'black'; + + RGraph.Text(context, 'Verdana',10,canvas.width/2,canvas.height/2,'Magic text! (' + __RGraph_rotate + ')','center','center',false, ++__RGraph_rotate); + RGraph.Text(context, 'Verdana', 16, 50, 50, 'This is making me dizzy... (' + (__RGraph_rotate * 5) + ')', 'center', 'left', false, __RGraph_rotate * 2); + RGraph.Text(context, 'Verdana', 20, 50, 200, 'Some user controllable text (' + __RGraph_rotate2 + ')', 'center', 'center', false, __RGraph_rotate2); + + context.stroke(); + context.fill(); + } + + setTimeout(window.onload, 1); + } + </script> + + <script> + var _gaq = _gaq || []; + _gaq.push(['_setAccount', 'UA-54706-2']); + _gaq.push(['_trackPageview']); + + (function() { + var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; + ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; + var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); + })(); + </script> +</head> +<body> + +<div id="breadcrumb"> + <a href="../index.html">RGraph: Javascript charts & HTML5 canvas charts library</a> + > + <a href="./index.html">Examples</a> + > + Rotating text +</div> + +<h1>RGraph: Javascript charts & HTML5 canvas charts - A text function that does horizontal and vertical alignment (and spins)</h1> + + + +<table border="0" style="float: left; margin-right: 10px"> + <tr> + <td colspan="2"><canvas id="myc" width="300" height="300" style="border: 1px dashed gray">The fallback HTML</canvas></td> + </tr> + + <tr> + <td align="center"> + <button style="width: 100px; margin: 5px" onclick="__RGraph_rotate2 -= 5">« Rotate left</button> + <button style="margin: 5px" onclick="if (this.innerHTML == 'Pause') {__pause = true; this.innerHTML = 'Play'} else {this.innerHTML = 'Pause'; __pause = false; }">Pause</button> + <button style="width: 100px; margin: 5px" onclick="__RGraph_rotate2 += 5">Rotate right»</button> + </td> + </tr> +</table> + +<p> + RGraph.Text() is a text drawing function that allows vertical and horizontal alignment, and allows you to specify the angle of the + text too. The animation is done by a simple gobal variable, setTimeout() and redrawing the entire + canvas every frame. Perhaps not the most efficient of methods, but remember that your Javascript will likely be + running on computers that have more processing power than + some small countries... <a href="javascript: location.href = location.href">Reset the page</a> +</p> + +<p> + In a similar vein you could easily make some text that bounces from one side of the screen to the other, + hurrah - the return of <marquee>! +</p> + + <div> + More examples can be found on the individual <a href="/examples/index.html">example pages</a>, and a more complete + reference to the Text() function can be found in the <a href="../docs/api.html#functions.other">API docs</a>. + </div> + +</body> +</html><!-- Social networking buttons --> + <div id="social_icons" class="warning" style="border-radius: 10px; top: 1px; position: fixed; width: 120px; height: 20px"> + <!-- <a title="Bookmark with delicious" href="http://delicious.com/save?jump=close&v=4&noui&jump=close&url=http://www.rgraph.net¬es=RGraph%20is%20a%20HTML5%20based%20javascript%20charts%20library%20supporting%20a%20wide%20range%20of%20different%20chart%20types&title=RGraph:%20Javascript%20charts%20%26%20graph%20library" target="_blank"><img src="../images/delicious.png" alt="Bookmark with delicious" width="22" height="22" border="0" style="position: relative; top: 1px" /></a> --> + <a href="http://twitter.com/home/?status=RGraph%3A%20Javascript+charts+library+http%3A%2F%2Fwww.rgraph.net+%23rgraph+%23html5+%23canvas+%23javascript+%23charts+@_rgraph" target="_blank" title="Mention RGraph on Twitter"><img src="../images/twitter.png" alt="Mention RGraph on Twitter"/></a> + <iframe src="http://www.facebook.com/plugins/like.php?app_id=253862424642173&href=http%3A%2F%2Fwww.rgraph.net&send=false&layout=button_count&width=450&show_faces=false&action=like&colorscheme=light&font=arial&height=21" scrolling="no" frameborder="0" style="width: 80px; height:21px; position: relative; top: 1px"></iframe> + </div> + + <script> + // Opera fix + if (navigator.userAgent.indexOf('Opera') == -1) { + document.getElementById("social_icons").style.position = 'fixed'; + } + </script> + + <div id="google_plusone"> + <!-- Place this tag where you want the +1 button to render --> + <g:plusone href="http://www.rgraph.net"></g:plusone> + </div> +
\ No newline at end of file diff --git a/schall/static/RGraph/examples/thermometer.html b/schall/static/RGraph/examples/thermometer.html new file mode 100644 index 0000000..ee0fe87 --- /dev/null +++ b/schall/static/RGraph/examples/thermometer.html @@ -0,0 +1,143 @@ +<!DOCTYPE html> +<html> +<head> + <meta http-equiv="X-UA-Compatible" content="chrome=1"> + <!-- + /** + * o------------------------------------------------------------------------------o + * | This file is part of the RGraph package - you can learn more at: | + * | | + * | http://www.rgraph.net | + * | | + * | This package is licensed under the RGraph license. For all kinds of business | + * | purposes there is a small one-time licensing fee to pay and for non | + * | commercial purposes it is free to use. You can read the full license here: | + * | | + * | http://www.rgraph.net/LICENSE.txt | + * o------------------------------------------------------------------------------o + */ + --> + + <title>RGraph: HTML5 Javascript charts library - Thermometer charts</title> + + <meta name="keywords" content="rgraph html5 canvas example thermometer charts" /> + <meta name="description" content="RGraph: HTML5 Javascript charts library - Thermometer charts" /> + + <meta property="og:title" content="RGraph: HTML5 Javascript charts library" /> + <meta property="og:description" content="A charts library based on the HTML5 canvas tag" /> + <meta property="og:image" content="http://www.rgraph.net/images/logo.png"/> + + <link rel="stylesheet" href="../css/website.css" type="text/css" media="screen" /> + <link rel="icon" type="image/png" href="../images/favicon.png"> + + <!-- Place this tag in your head or just before your close body tag --> + <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> + + <script src="../libraries/RGraph.common.core.js" ></script> + <script src="../libraries/RGraph.thermometer.js" ></script> + <!--[if IE 8]><script src="../excanvas/excanvas.original.js"></script><![endif]--> + + <script> + var _gaq = _gaq || []; + _gaq.push(['_setAccount', 'UA-54706-2']); + _gaq.push(['_trackPageview']); + + (function() { + var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; + ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; + var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); + })(); + </script> +</head> +<body> + + + <!-- Social networking buttons --> + <div id="social_icons" class="warning" style="border-radius: 10px; top: 1px; position: fixed; width: 120px; height: 20px"> + <!-- <a title="Bookmark with delicious" href="http://delicious.com/save?jump=close&v=4&noui&jump=close&url=http://www.rgraph.net¬es=RGraph%20is%20a%20HTML5%20based%20javascript%20charts%20library%20supporting%20a%20wide%20range%20of%20different%20chart%20types&title=RGraph:%20Javascript%20charts%20%26%20graph%20library" target="_blank"><img src="../images/delicious.png" alt="Bookmark with delicious" width="22" height="22" border="0" style="position: relative; top: 1px" /></a> --> + <a href="http://twitter.com/home/?status=RGraph%3A%20Javascript+charts+library+http%3A%2F%2Fwww.rgraph.net+%23rgraph+%23html5+%23canvas+%23javascript+%23charts+@_rgraph" target="_blank" title="Mention RGraph on Twitter"><img src="../images/twitter.png" alt="Mention RGraph on Twitter"/></a> + <iframe src="http://www.facebook.com/plugins/like.php?app_id=253862424642173&href=http%3A%2F%2Fwww.rgraph.net&send=false&layout=button_count&width=450&show_faces=false&action=like&colorscheme=light&font=arial&height=21" scrolling="no" frameborder="0" style="width: 80px; height:21px; position: relative; top: 1px"></iframe> + </div> + + <script> + // Opera fix + if (navigator.userAgent.indexOf('Opera') == -1) { + document.getElementById("social_icons").style.position = 'fixed'; + } + </script> + + <div id="google_plusone"> + <!-- Place this tag where you want the +1 button to render --> + <g:plusone href="http://www.rgraph.net"></g:plusone> + </div> + <!-- Social networking buttons --> + + +<div id="breadcrumb"> + <a href="../index.html">RGraph: HTML5 Javascript charts library</a> + > + <a href="./index.html">Examples</a> + > + Thermometer charts +</div> + +<h1>RGraph: <span>HTML5 Javascript charts library</span> - Thermometer charts</h1> + + <script> + if (RGraph.isIE8()) { + 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.</div>'); + } + </script> + + + <p> + The thermometer chart/gauge is a variation on the <a href="vprogress.html">Vertical Progress Bar</a>, that may suit your + design better than a regular progress bar. The thermometer is only available in a vertical orientation. + </p> + + <div> + <ul> + <li><a href="../docs/thermometer.html">Thermometer charts API documentation</a></li> + </ul> + </div> + + <div style="text-align: center"> + <canvas id="thermo1" width="100" height="350">[No canvas support]</canvas> + <canvas id="thermo2" width="100" height="350" style="margin-left: 150px; margin-right: 150px">[No canvas support]</canvas> + <canvas id="thermo3" width="100" height="350">[No canvas support]</canvas> + </div> + <script> + window.onload = function () + { + var thermometer = new RGraph.Thermometer('thermo1', 0,1,0.14); + thermometer.Set('chart.colors', ['green']); + thermometer.Set('chart.title.side', 'This servers load'); + thermometer.Draw(); + + var thermometer2 = new RGraph.Thermometer('thermo2', 0,100,16); + thermometer2.Set('chart.colors', ['blue']); + thermometer2.Set('chart.title.side', 'Mould level'); + thermometer2.Draw(); + + + grad = thermometer2.context.createLinearGradient(0,0,100,0); + grad.addColorStop(1, '#a00'); + grad.addColorStop(0.5, '#f00'); + grad.addColorStop(0, '#a00'); + + var thermometer3 = new RGraph.Thermometer('thermo3', 0,100,84); + thermometer3.Set('chart.colors', [grad]); + thermometer3.Set('chart.title.side', 'Temperature'); + thermometer3.Set('chart.shadow', true); + thermometer3.Set('chart.shadow.offsetx', 0); + thermometer3.Set('chart.shadow.offsety', 0); + thermometer3.Set('chart.shadow.blur', 15); + thermometer3.Set('chart.shadow.color', 'green'); + thermometer3.Set('chart.text.color', 'green'); + thermometer3.Set('chart.value.label', false); + thermometer3.Draw(); + } + </script> + +</body> +</html>
\ No newline at end of file diff --git a/schall/static/RGraph/examples/vprogress.html b/schall/static/RGraph/examples/vprogress.html new file mode 100644 index 0000000..9195199 --- /dev/null +++ b/schall/static/RGraph/examples/vprogress.html @@ -0,0 +1,162 @@ +<!DOCTYPE html> +<html> +<head> + <meta http-equiv="X-UA-Compatible" content="chrome=1"> + <!-- + /** + * o------------------------------------------------------------------------------o + * | This file is part of the RGraph package - you can learn more at: | + * | | + * | http://www.rgraph.net | + * | | + * | This package is licensed under the RGraph license. For all kinds of business | + * | purposes there is a small one-time licensing fee to pay and for non | + * | commercial purposes it is free to use. You can read the full license here: | + * | | + * | http://www.rgraph.net/LICENSE.txt | + * o------------------------------------------------------------------------------o + */ + --> + <title>RGraph: HTML5 Javascript charts library - vertical progress bar</title> + + <meta name="keywords" content="rgraph html5 canvas example vertical progress bar" /> + <meta name="description" content="RGraph: HTML5 Javascript charts library - Vertical Progress Bar example" /> + + <meta property="og:title" content="RGraph: HTML5 Javascript charts library" /> + <meta property="og:description" content="A charts library based on the HTML5 canvas tag" /> + <meta property="og:image" content="http://www.rgraph.net/images/logo.png"/> + + <link rel="stylesheet" href="../css/website.css" type="text/css" media="screen" /> + <link rel="icon" type="image/png" href="../images/favicon.png"> + + <!-- Place this tag in your head or just before your close body tag --> + <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> + + <script src="../libraries/RGraph.common.core.js"></script> + <script src="../libraries/RGraph.common.tooltips.js" ></script> + <script src="../libraries/RGraph.vprogress.js"></script> + <!--[if IE 8]><script src="../excanvas/excanvas.original.js"></script><![endif]--> + + <script> + window.onload = function () + { + var progress1 = new RGraph.VProgress('progress1', 63, 100); + progress1.Set('chart.tickmarks', false); + progress1.Set('chart.margin', 3); + progress1.Set('chart.tickmarks.inner', true); + progress1.Set('chart.label.inner', true); + progress1.Set('chart.gutter.left', 30); + progress1.Set('chart.gutter.right', 30); + progress1.Set('chart.units.post', '%'); + + progress1.Draw(); + + var progress2 = new RGraph.VProgress('progress2', [6.5, 1, 2], 10); + progress2.Set('chart.colors', ['red', '#cfc', 'blue']); + //progress2.Set('chart.shadow', true); + //progress2.Set('chart.shadow.color', '#666'); + //progress2.Set('chart.shadow.offsetx', 0); + //progress2.Set('chart.shadow.offsety', 0); + //progress2.Set('chart.shadow.blur', 15); + //progress2.Set('chart.margin', 3); + //progress2.Set('chart.tooltips', ['John', 'Fred', 'Pete']); + //progress2.Set('chart.tooltips.effect', 'contract'); + //progress2.Set('chart.tickmarks', true); + //progress2.Set('chart.tickmarks.inner', true); + //progress2.Set('chart.tickmarks.color', '#333'); + progress2.Draw(); + + var progress3 = new RGraph.VProgress('progress3', [1.455, 13, 42], 100); + progress3.Set('chart.colors', ['red', '#cfc', 'blue']); + progress3.Set('chart.margin', 3); + progress3.Set('chart.tooltips', ['John', 'Fred', 'Pete']); + progress3.Set('chart.tooltips.effect', 'fade'); + progress3.Set('chart.tickmarks', true); + progress3.Set('chart.tickmarks.inner', true); + progress3.Set('chart.tickmarks.color', '#333'); + progress3.Set('chart.key', ['Richard','Fred','Bob']); + progress3.Set('chart.key.position.x', progress3.canvas.width - 90); + progress3.Set('chart.tickmarks.zerostart', true); + progress3.Set('chart.gutter.right', 125); + progress3.Set('chart.scale.decimals', 2); + progress3.Draw(); + } + </script> + + <script> + var _gaq = _gaq || []; + _gaq.push(['_setAccount', 'UA-54706-2']); + _gaq.push(['_trackPageview']); + + (function() { + var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; + ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; + var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); + })(); + </script> +</head> +<body> + + <!-- Social networking buttons --> + <div id="social_icons" class="warning" style="border-radius: 10px; top: 1px; position: fixed; width: 120px; height: 20px"> + <!-- <a title="Bookmark with delicious" href="http://delicious.com/save?jump=close&v=4&noui&jump=close&url=http://www.rgraph.net¬es=RGraph%20is%20a%20HTML5%20based%20javascript%20charts%20library%20supporting%20a%20wide%20range%20of%20different%20chart%20types&title=RGraph:%20Javascript%20charts%20%26%20graph%20library" target="_blank"><img src="../images/delicious.png" alt="Bookmark with delicious" width="22" height="22" border="0" style="position: relative; top: 1px" /></a> --> + <a href="http://twitter.com/home/?status=RGraph%3A%20Javascript+charts+library+http%3A%2F%2Fwww.rgraph.net+%23rgraph+%23html5+%23canvas+%23javascript+%23charts+@_rgraph" target="_blank" title="Mention RGraph on Twitter"><img src="../images/twitter.png" alt="Mention RGraph on Twitter"/></a> + <iframe src="http://www.facebook.com/plugins/like.php?app_id=253862424642173&href=http%3A%2F%2Fwww.rgraph.net&send=false&layout=button_count&width=450&show_faces=false&action=like&colorscheme=light&font=arial&height=21" scrolling="no" frameborder="0" style="width: 80px; height:21px; position: relative; top: 1px"></iframe> + </div> + + <script> + // Opera fix + if (navigator.userAgent.indexOf('Opera') == -1) { + document.getElementById("social_icons").style.position = 'fixed'; + } + </script> + + <div id="google_plusone"> + <!-- Place this tag where you want the +1 button to render --> + <g:plusone href="http://www.rgraph.net"></g:plusone> + </div> + <!-- Social networking buttons --> + + +<div id="breadcrumb"> + <a href="../index.html">RGraph: HTML5 Javascript charts library</a> + > + <a href="./index.html">Examples</a> + > + Vertical Progress bar +</div> + + <h1>RGraph: <span>HTML5 Javascript charts library</span> - Vertical Progress bar</h1> + + <script> + if (RGraph.isIE8()) { + 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.</div>'); + } + </script> + + <p> + This is a Progress Bar for showing state. You can show anything with it - use it to show load on your server, + or percentage space free on your servers disk drive. You could even incorporate it with some AJAX to retrieve status information + from your webserver dynamically, making the Progress Bar realtime. To redraw the progress bar simply call <i>RGraph.Clear()</i> + (which clears the canvas) and then call <i>myProgress.Draw()</i> again. + </p> + + <p> + The colours, title and scale are configurable, allowing you to represent a wide range of values. + </p> + + <div> + <ul> + <li><a href="../docs/vprogress.html">Vertical Progress bar API documentation</a></li> + <li><a href="hprogress.html">Horizontal Progress bar</a></li> + </ul> + </div> + + <div style="text-align: center"> + <canvas width="125" height="450" id="progress1">[No canvas support]</canvas> + <canvas width="125" height="450" id="progress2" style="margin-left: 100px; margin-right: 100px">[No canvas support]</canvas> + <canvas width="210" height="450" id="progress3">[No canvas support]</canvas> + </div> + +</body> +</html>
\ No newline at end of file diff --git a/schall/static/RGraph/examples/waterfall.html b/schall/static/RGraph/examples/waterfall.html new file mode 100644 index 0000000..3459615 --- /dev/null +++ b/schall/static/RGraph/examples/waterfall.html @@ -0,0 +1,146 @@ +<!DOCTYPE html> +<html> +<head> + <meta http-equiv="X-UA-Compatible" content="chrome=1"> + <!-- + /** + * o------------------------------------------------------------------------------o + * | This file is part of the RGraph package - you can learn more at: | + * | | + * | http://www.rgraph.net | + * | | + * | This package is licensed under the RGraph license. For all kinds of business | + * | purposes there is a small one-time licensing fee to pay and for non | + * | commercial purposes it is free to use. You can read the full license here: | + * | | + * | http://www.rgraph.net/LICENSE.txt | + * o------------------------------------------------------------------------------o + */ + --> + <title>RGraph: HTML5 Javascript charts library - waterfall charts</title> + + <meta name="keywords" content="rgraph html5 canvas example waterfall charts" /> + <meta name="description" content="RGraph: HTML5 Javascript charts library - Waterfall chart example" /> + + <meta property="og:title" content="RGraph: HTML5 Javascript charts library" /> + <meta property="og:description" content="A charts library based on the HTML5 canvas tag" /> + <meta property="og:image" content="http://www.rgraph.net/images/logo.png"/> + + <link rel="stylesheet" href="../css/website.css" type="text/css" media="screen" /> + <link rel="icon" type="image/png" href="../images/favicon.png"> + + <!-- Place this tag in your head or just before your close body tag --> + <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> + + <script src="../libraries/RGraph.common.core.js"></script> + <script src="../libraries/RGraph.common.tooltips.js" ></script> + <script src="../libraries/RGraph.waterfall.js"></script> + <!--[if IE 8]><script src="../excanvas/excanvas.original.js"></script><![endif]--> + + <script> + window.onload = function () + { + var waterfall1 = new RGraph.Waterfall('waterfall1', [50,12,-50,-19, -130, 230]) + waterfall1.Set('chart.background.grid.autofit', true); + waterfall1.Set('chart.background.grid.autofit.numhlines', 10); + waterfall1.Set('chart.background.grid.autofit.numvlines', 25); + waterfall1.Set('chart.title', 'A chart showing income/expenditure'); + waterfall1.Set('chart.colors', ['black','red','blue']); + waterfall1.Set('chart.strokestyle', 'rgba(0,0,0,0)'); + waterfall1.Set('chart.units.pre', '$'); + waterfall1.Set('chart.units.post', 'k'); + waterfall1.Set('chart.total', true); + waterfall1.Set('chart.labels', ['Sales', + 'Misc income', + 'Salaries', + 'Running costs', + 'Snacks', + 'Bake sales', + 'Gross']); + waterfall1.Set('chart.tooltips', ['Traditional sales from the shops', + 'Miscellaneous income from neer-do-wells', + 'Salaries of the henchmen', + 'Running costs including fuel for the cars', + 'Sweets and snacks for the office', + 'Bake sales', + 'Gross before "tax"']); + waterfall1.Set('chart.highlight.stroke', 'rgba(0,0,0,0)'); + waterfall1.Set('chart.shadow', true); + waterfall1.Set('chart.shadow.color', '#aaa'); + waterfall1.Set('chart.shadow.blur', 5); + waterfall1.Set('chart.shadow.offsetx', 0); + waterfall1.Set('chart.shadow.offsety', 0); + waterfall1.Set('chart.gutter.left', 50); + waterfall1.Set('chart.xaxispos', 'center'); + waterfall1.Draw(); + } + </script> + + <script> + var _gaq = _gaq || []; + _gaq.push(['_setAccount', 'UA-54706-2']); + _gaq.push(['_trackPageview']); + + (function() { + var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; + ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; + var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); + })(); + </script> +</head> +<body> + + <!-- Social networking buttons --> + <div id="social_icons" class="warning" style="border-radius: 10px; top: 1px; position: fixed; width: 120px; height: 20px"> + <!-- <a title="Bookmark with delicious" href="http://delicious.com/save?jump=close&v=4&noui&jump=close&url=http://www.rgraph.net¬es=RGraph%20is%20a%20HTML5%20based%20javascript%20charts%20library%20supporting%20a%20wide%20range%20of%20different%20chart%20types&title=RGraph:%20Javascript%20charts%20%26%20graph%20library" target="_blank"><img src="../images/delicious.png" alt="Bookmark with delicious" width="22" height="22" border="0" style="position: relative; top: 1px" /></a> --> + <a href="http://twitter.com/home/?status=RGraph%3A%20Javascript+charts+library+http%3A%2F%2Fwww.rgraph.net+%23rgraph+%23html5+%23canvas+%23javascript+%23charts+@_rgraph" target="_blank" title="Mention RGraph on Twitter"><img src="../images/twitter.png" alt="Mention RGraph on Twitter"/></a> + <iframe src="http://www.facebook.com/plugins/like.php?app_id=253862424642173&href=http%3A%2F%2Fwww.rgraph.net&send=false&layout=button_count&width=450&show_faces=false&action=like&colorscheme=light&font=arial&height=21" scrolling="no" frameborder="0" style="width: 80px; height:21px; position: relative; top: 1px"></iframe> + </div> + + <script> + // Opera fix + if (navigator.userAgent.indexOf('Opera') == -1) { + document.getElementById("social_icons").style.position = 'fixed'; + } + </script> + + <div id="google_plusone"> + <!-- Place this tag where you want the +1 button to render --> + <g:plusone href="http://www.rgraph.net"></g:plusone> + </div> + <!-- Social networking buttons --> + + +<div id="breadcrumb"> + <a href="../index.html">RGraph: HTML5 Javascript charts library</a> + > + <a href="./index.html">Examples</a> + > + Waterfall chart +</div> + + <h1>RGraph: <span>HTML5 Javascript charts library</span> - Waterfall charts</h1> + + <script> + if (RGraph.isIE8()) { + 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.</div>'); + } + </script> + + <p> + Waterfall charts can be used to represent sales and expenditure for an entity. More information can be found here: + <a href="http://en.wikipedia.org/wiki/Waterfall_chart" target="_blank">http://en.wikipedia.org/wiki/Waterfall_chart</a> + </p> + + <div> + <ul> + <li><a href="../docs/waterfall.html">Waterfall charts API documentation</a></li> + </ul> + </div> + + <div> + <canvas width="900" height="300" id="waterfall1">[No canvas support]</canvas> + </div> + +</body> +</html>
\ No newline at end of file |