Merge branch 'mat-charts' into alex

Intégration du test de Mathieu (charts)

Merge branch 'mat-charts' into alex
Intégration du test de Mathieu (charts)
37e31706 · Administrator · cf07556a · c8af4ec8 · 37e31706 · 37e31706
Commit 37e31706 authored Nov 03, 2014 by Administrator
6 changed files
--- a/tests/charts/index.html
+++ b/tests/charts/index.html
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>Test graphs</title>
+        <link href="style.css" type="text/css" rel="stylesheet" />
+    </head>
+    <body>
+        <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/jquery.js
+++ b/tests/charts/jquery.js
--- a/tests/charts/plot.js
+++ b/tests/charts/plot.js
--- a/tests/charts/raphael.js
+++ b/tests/charts/raphael.js
--- a/tests/charts/script.js
+++ b/tests/charts/script.js
+/**
+ *
+ *  TODO:
+ *
+ *  +   change .plot().plot() into .feed([])
+ *
+ *  +   implement .view()
+ *
+ *  +   add legend, based on data.name
+ *
+ *  -   automatically identify if numeric/discrete,
+ *  +   automatically generate a list of all the possible values
+ *  +   automatically generate axis & grid
+ *
+ *  +   when 'data' is called, check if strings are encountered
+ *      as the first member of points (or second?)
+ *
+ *  +   check if points have 2 or 3 members (number of dimension)
+ *
+ *  -   implement viewing modes for 2D data:
+ *      -   sectors (only average)
+ *      +   histograms (with average & std)
+ *
+ *      -   points
+ *      +   lines
+ *      -   curves
+ *      -   areas
+ *      -   stacked areas
+ *
+ *      -   bars
+ *      -   stacked bars
+ *
+ *  -   implement viewing modes for 3D data:
+ *      -   heatmaps
+ *
+**/
+
+
+var dataList = [];
+for (var i=0; i<4; i++) {
+    var data = [];
+    var y = 3 + 1.5 * Math.random();
+    var dy = 0;
+    for (var x=1964; x<2014; x++) {
+        y += .1 * (Math.random() - .5);
+        // dy += .01 * (Math.random() - .5);
+        // y += dy;
+        if (y < 0) {
+            y = 0;
+        }
+        data.push([x, y]);
+    }
+    dataList.push(data);
+}
+
+var container = $('.graph');
+var graph = new Graph(container[0], container.width(), container.height())
+    .fill('#FFF')
+    .feed([
+        {name:'bees', data: dataList[0], options: {color:'#FC0', size:4}},
+        {name:'honey', data: dataList[1], options: {color:'#CF0', size:4}}
+    ])
+    // .view('lines', ['Year of publication', 'Term frequency'])
+    // .view('histograms', ['Term', 'Term frequency'])
+    // .view('sectors', ['Terms occurences'])
+
+
+$('select[name=view]').change(function(){
+    var value = $(this).val();
+    var options = {
+        'histogram': ['Year of publication', 'Term frequency'],
+        'line': ['Year of publication', 'Term frequency'],
+    };
+    graph.view(value, options[value])
+}).change();
+
+$(window).resize(function(){
+    var width = container.width();
+    var height = container.height();
+    graph.size(width, height);
+});
--- 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