Add dataviz capabilities.

Dataviz capability examples added. Data can come from the server as JSON.

webapp/static/css/base.css

@@ -4,7 +4,6 @@
 @import url(http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:300&v2);
 
 html, body {
-    color: #333;
     height: 100%;
 }
 

webapp/static/css/webapp.css

@@ -1,5 +1,19 @@
 @import "base.css";
 
 #page {
+    margin-top: 5%;
 }
 
+.graph {
+    width: 90%;
+    height: 400px;
+    margin-left: 5%;
+}
+
+.graph-controls {
+    background-color: #f3f2f1;
+    border-radius: 5px;
+    margin: 10px 0px;
+    padding: 10px;
+    color: #4f4f4f;
+}

webapp/static/js/app.js

@@ -1,13 +1,13 @@
 /* Author: Hugues Demers
  * Copyrights 2012
 */
-define(["jquery", "underscore", "viewmodel", "knockout"],
-function ($, _, viewmodel) {
+define(["jquery", "underscore", "viewmodel", "graph", "knockout"],
+function ($, _, viewmodel, graph) {
     var exports = {};
 
     exports.initialize = function () {
         console.log("Initializing app.");
-        console.log(viewmodel, ko);
+        graph.initialize("graphContainer1");
         ko.applyBindings(viewmodel);
     };
     return exports;

webapp/static/js/graph.js

@@ -0,0 +1,154 @@
+/* Author: Hugues Demers
+ * Copyrights 2012
+*/
+define(["jquery", "underscore", "viewmodel", "rest", "highcharts"],
+function ($, _, viewmodel, rest) {
+    var exports = {}, chartOptions, serie, chart, 
+        subscribe, 
+        showDirect,
+        showInverse;
+
+    exports.initialize = function () {
+        console.log("Initializing graph.");
+        subscribe();
+        viewmodel.refresh();
+    };
+
+    addSeries = function (data) {
+        _.each(data.data.series, function (serie) {
+            chart.addSeries(serie);
+        });
+        chart.hideLoading();
+    }
+
+    viewmodel.refresh = function () {
+        if (chart) {
+            chart.destroy();
+        }
+        chart = new Highcharts.Chart(chartOptions);
+        chart.showLoading();
+        rest.get("/series", {}, addSeries);
+    };
+
+    subscribe = function () {
+        viewmodel.direct.subscribe(showDirect);
+        viewmodel.inverse.subscribe(showInverse);
+    };
+
+    showDirect = function (checked) {
+        if (checked) {
+            chart.addSeries(directSerie());
+        }
+        else {
+            chart.get("direct").remove();
+        }
+    };
+
+    showInverse = function (checked) {
+        if (checked) {
+            chart.addSeries(inverseSerie());
+        }
+        else {
+            chart.get("inverse").remove();
+        }
+    };
+
+    directSerie = function () {
+        x = [1,2,3,4,5,6];
+        y = [1,2,3,4,5,6];
+        return {
+            name: "direct",
+            id: "direct",
+            data: _.zip(x, y)
+        };
+    };
+
+    inverseSerie = function () {
+        x = [1, 2, 3, 4, 5, 6];
+        y = [6, 5, 4, 3, 2, 1];
+        return {
+            name: "inverse",
+            id: "inverse",
+            data: _.zip(x, y)
+        };
+    };
+
+    // Chart options.
+    chartOptions = {
+        chart: {
+            renderTo: 'graphContainer1',
+            zoomType: 'x',
+            defaultSeriesType: 'line',
+        },
+        colors: ['#094b5c', '#238F00', '#ED561B', '#A4A300', '#24CBE5',
+                '#1B6CFF', '#BE0000', '#00EF1D', '#AB00FE', '#00CCA0'],
+        navigation: {
+            buttonOptions: { 
+                enabled: false
+            }
+        },
+        credits: {
+            enabled: false
+        },
+        loading: {
+            labelStyle: {
+                top: '50%',
+                fontSize: '16px',
+                left: '-5%'
+            }
+        },
+        title: {
+            text: "Example graph",
+            style: {
+                color: '#4f4f4f'
+            }
+        },
+        subtitle: {
+            text: "Linear",
+            style: {
+                color: '#4f4f4f'
+            }
+        },
+        xAxis: {
+            title: {
+                text: 'X axis',
+                style: {
+                    color: '#4f4f4f',
+                    fontSize: "12px"
+                }
+            },
+            lineColor: '#c9c9c9'
+        },
+        yAxis: {
+            title: {
+                text: 'Y axis',
+                style: {
+                    color: '#4f4f4f',
+                    fontSize: "12px"
+                }
+            },
+            lineColor: '#c9c9c9'
+        },
+        legend: {
+            enabled: true,
+            itemStyle: {
+                color: '#4e4e4e'
+            },
+            align: 'top',
+            layout: 'horizontal',
+            borderWidth: 0,
+            verticalAlign: 'top',
+        },
+        plotOptions: {
+            line: {
+                visible: true,
+                marker: {
+                    enabled: false
+                }
+            }
+        }
+    };
+
+    return exports;
+});
+

webapp/static/js/main.js

@@ -8,7 +8,8 @@ require({
         "knockout": "other/knockout-2.0.0",
         "json2": "other/json2",
         "underscore": "other/underscore-min",
-        "domReady": "other/domReady"
+        "domReady": "other/domReady",
+        "highcharts": "other/highcharts"
     }
 });