[DEMO] Graph plotting - we have a first demo page!

c8af4ec8 · Mathieu Rodic · 72bd43e9 · c8af4ec8 · c8af4ec8 · c8af4ec8
Commit c8af4ec8 authored Nov 03, 2014 by Mathieu Rodic
Showing with 636 additions and 597 deletions

index.html tests/charts/index.html +17 -2

plot.js tests/charts/plot.js +564 -0

script.js tests/charts/script.js +47 -595

style.css tests/charts/style.css +8 -0

No files found.
--- a/tests/charts/index.html
+++ b/tests/charts/index.html
@@ -2,11 +2,26 @@
 <html>
    <head>
        <title>Test graphs</title>
+        <link href="style.css" type="text/css" rel="stylesheet" />
    </head>
    <body>
-        <div id="graph" style="box-shadow:inset 3px 3px 10px rgba(0,0,0,.33);background:#FDFEFF"></div>
-        <script type="text/javascript" src="jquery.js"></script>
+        <div class="graphWidget">
+            <h1>Bees vs. Honey</h1>
+            <select name="x">
+                <option value="year">X axis: year of publication</option>
+            </select>
+            <select name="y" style="margin-top:0">
+                <option value="frequency">Y axis: term frequency</option>
+            </select>
+            <select name="view">
+                <option value="line">View mode: curve</option>
+                <option value="histogram">View mode: histogram</option>
+            </select>
+            <div class="graph"></div>
+        </div>
        <script type="text/javascript" src="raphael.js"></script>
+        <script type="text/javascript" src="plot.js"></script>
+        <script type="text/javascript" src="jquery.js"></script>
        <script type="text/javascript" src="script.js"></script>
    </body>
 </html>
\ No newline at end of file
--- a/tests/charts/plot.js
+++ b/tests/charts/plot.js
--- a/tests/charts/script.js
+++ b/tests/charts/script.js
--- a/tests/charts/style.css
+++ b/tests/charts/style.css
+*   {margin:0;outline:0;padding:0;border:0;font-family:sans serif}
+
+.graphWidget   {position:fixed;top:0;left:0;width:100%;height:100%}
+    h1, .graph, select  {margin:2%;width:96%;margin-bottom:0;background:#FDFEFF}
+    h1  {font-size:32px}
+    .graph  {box-shadow:inset 3px 3px 10px rgba(0,0,0,.33);height:60%}
+    select  {box-shadow:3px 3px 10px rgba(0,0,0,.33);height:5%;padding:0 2.5%;font-size:16px;cursor:pointer}
+    select:hover    {background:#EEE}
\ No newline at end of file