Index: Dev/branches/Cartis/classes/dbDataSelectionWidget.php
===================================================================
--- Dev/branches/Cartis/classes/dbDataSelectionWidget.php	(revision 226)
+++ Dev/branches/Cartis/classes/dbDataSelectionWidget.php	(revision 227)
@@ -17,4 +17,8 @@
     public $sessions;
     public $gamedata;
+    
+    // toegevoegd questions
+    public $questions;
+    
 
     public function __construct() {
@@ -23,4 +27,7 @@
         $this->sessions = $dbi->get("Session", array());
         $this->gamedata = $dbi->get("Application", array());
+        
+// toegevoegd questions
+        $this->questions = $dbi->get("Question", array());
     }
 
Index: Dev/branches/Cartis/css/visualeditors.css
===================================================================
--- Dev/branches/Cartis/css/visualeditors.css	(revision 226)
+++ Dev/branches/Cartis/css/visualeditors.css	(revision 227)
@@ -488,2 +488,12 @@
     height: 415px;
 }
+
+.graphSelectionButton {
+    width: 75px;
+    height: 50px;
+    background: rgba(255,255,255,0.5);
+    border: 1px solid #FFF;
+    float: left;
+    margin: 0 5px;
+    padding: 2px;
+}
Index: Dev/branches/Cartis/dashboardDataSelection.php
===================================================================
--- Dev/branches/Cartis/dashboardDataSelection.php	(revision 226)
+++ Dev/branches/Cartis/dashboardDataSelection.php	(revision 227)
@@ -38,10 +38,16 @@
                                 <div class="largeTitle">Instance data</div>
                                 <select id="dbSessionInstancesList" multiple class="dbDataList" size="15" onchange="infoPanelTimeout(event);">
+
                                     <?php
-                                    foreach ($dbDataSelectionWidget->sessions as $session) {
-                                        // Fill list
-                                        // First checkbox, then descriptor
-                                        echo "<option value='$session->uid'>$session->title</option>";
-                                    }
+                                    
+                                      //Changed sessions into questions
+                                      // foreach ($dbDataSelectionWidget->survey as $question) {
+                                      foreach ($dbDataSelectionWidget->sessions as $session) {
+                                      // Fill list
+                                      // First checkbox, then descriptor
+                                      echo "<option value='$session->uid'>$session->title</option>";
+                                      }
+                                     
+                                    
                                     ?>
                                 </select>
@@ -78,5 +84,5 @@
                 <div id="rightColumn">
                     <div class="largeFrame Cv" id="dbShoppingCart">
-                        <div class="largeTitle">Shopping cart</div>
+                        <div class="largeTitle">Selected data</div>
                         <div class="content" id="shoppingCartContent">
 
Index: Dev/branches/Cartis/dashboardGraphSelection.php
===================================================================
--- Dev/branches/Cartis/dashboardGraphSelection.php	(revision 226)
+++ Dev/branches/Cartis/dashboardGraphSelection.php	(revision 227)
@@ -8,5 +8,4 @@
 
 $dbDataSelectionWidget = new dbDataSelectionWidget();
-
 $data = JSON_decode($_POST['selectedData']);
 ?>
@@ -17,4 +16,68 @@
         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 
+        <script type="text/javascript" src="js/generalScripts.js"></script>
+        <script type="text/javascript" src="js/dashboardScripts.js"></script>
+        <script src="RGraph/libraries/RGraph.common.core.js" ></script> 
+        <script src="RGraph/libraries/RGraph.common.annotate.js" ></script> 
+        <script src="RGraph/libraries/RGraph.common.context.js" ></script> 
+
+        <script src="RGraph/libraries/RGraph.common.tooltips.js" ></script> 
+        <script src="RGraph/libraries/RGraph.common.resizing.js" ></script> 
+        <script src="RGraph/libraries/RGraph.bar.js" ></script>
+        <script src="RGraph/libraries/RGraph.pie.js" ></script>  
+
+        <script>
+            myGraph.Set('chart.contextmenu', [
+                ['Get PNG', RGraph.showPNG],
+                null,
+                ['Cancel', function () {}]
+            ]);
+        </script>
+
+
+        <script>
+            window.onload = function ()
+            {
+ 
+                var bar1 = new RGraph.Bar('chart1', mockupData.muData3);
+                //bar1.Set('chart.background.barcolor1', 'white');
+                // bar1.Set('chart.background.barcolor2', 'white');
+                bar1.Set('chart.labels', ['1st', '2nd', '3rd', '4th', '5th', '6th']);
+                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', 45);
+                bar1.Draw();
+ 
+                
+            
+                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);
+                }
+ 
+                bar2.Draw();
+                
+            }
+        </script> 
+
         <title>
             Dashboard Graph Selection
@@ -23,5 +86,5 @@
 
     </head>
-    
+
     <body>
         <div id="header">
@@ -39,26 +102,10 @@
                             <div class="largeTitle">Selected data</div>                         
                             <div class="content" style="width: 300px; height: 500px; ">                
+
                                 <?php
                                 print_r($data);
-                                ?>
+                                ?> 
+
                             </div>
-
-                        </div>
-                    </div>
-
-                    <div id="rightColumn">
-                        <div class="largeFrame Cv" style="width: 600px; height: 400px;">
-                            <div class="largeTitle">Graph selection</div>
-                            <div class="content">
-                                <img src="images/icons/nyan.gif" width="595" height="370"></img>
-                            </div>
-
-                        </div>
-                    </div>
-
-
-                    <div class="largeFrame Cu" id="dbInfoPanel" style="width: 930px;">
-                        <div class='largeTitle'>Info panel</div>
-                        <div class="content" id="dbInfoPanelContent" style="height: 100px;">
 
                         </div>
@@ -66,5 +113,42 @@
                 </div>
 
+                <div id="rightColumn">
+                    <div class="largeFrame Cv" style="width: 600px; height: 400px;">
+                        <div class="largeTitle">Graph selection</div>
+                        <div class="topControls" id="graphTypeSelector" style="float: left; clear: left; width: 100%; margin: 0; border: 1px solid #000;">
+                            <div id="btnSelectPieType" class="graphSelectionButton" onclick="changeGraphType('pie')">PIE CHART</div>
+                            <div id="btnSelectBarType" class="graphSelectionButton" onclick="changeGraphType('bar')">BAR CHART</div>
+                            <div id="btnSelectRadarType" class="graphSelectionButton" onclick="changeGraphType('radar')">RADAR CHART</div>
+                        </div>
+                        <div class="content" id="graphDisplay">
 
-                </body>
-                </html>
+                            <canvas id="chart1" width="450" height="200" onclick="RGraph.showPNG(document.getElementById('bar1'));">[No canvas support] </canvas> 
+
+                            <!-- Button to gotoDashboard?? -->                                                            
+
+                        </div>
+
+                        <div class="controls">
+                            <input type="button" class="smallButton" value="Save to dashboard" onClick="addToDashboard()"></input>
+                            <input type="button" class="smallButton" value="Go to Dashboard" onClick="gotoDashboard()"></input>
+
+                        </div>
+
+                    </div>
+                </div>
+
+
+                <div class="largeFrame Cu" id="dbInfoPanel" style="width: 930px;">
+                    <div class='largeTitle'>Info panel</div>
+                    <div class="content" id="dbInfoPanelContent" style="height: 100px;">
+
+                    </div>
+
+
+                </div>
+            </div>
+
+
+
+    </body>
+</html>
Index: Dev/branches/Cartis/js/dashboardScripts.js
===================================================================
--- Dev/branches/Cartis/js/dashboardScripts.js	(revision 226)
+++ Dev/branches/Cartis/js/dashboardScripts.js	(revision 227)
@@ -1,4 +1,4 @@
 dbSelectionInfoTimeout = null;
-currentlySelected = {
+var currentlySelected = {
     titles: [],
     uids: [],
@@ -6,5 +6,5 @@
 }
 
-shoppingCart = {
+var shoppingCart = {
     contents: {
         titles: [],
@@ -12,4 +12,16 @@
         types: []
     }
+}
+
+var graphSelection = {
+    graphType: null,
+    graphData: null,
+    dataAvailable: false
+}
+
+var mockupData = {
+    muData1: [1,2,3,4,5,6], //pie charts
+    muData2: [[1,2,3],[4,5,6]], //bar charts
+    muData3: [[1,2],[3,4],[5,6]]    //radar charts
 }
 
@@ -143,29 +155,29 @@
     // Lastly, refresh
     drawShoppingCart();
-    }
+}
 
 function drawShoppingCart() {
-        var scElement = ge("shoppingCartContent");
-        scElement.innerHTML = "";
-        for (var i = 0; i < shoppingCart.contents.uids.length; i++) {
-            var newLine = ce("div");
-            newLine.className = "shoppingCartItem";
-            newLine.id = "shoppingCartItem"+shoppingCart.contents.uids[i];
-            var icon = ce("image");
-            icon.src = "images/ui/DeleteIcon.gif";
-            icon.addEventListener("click", function(event){
-                // TODO: Actually write this function
-                removeFromList(event);
-            }, false);
-            var titleField = ce("text");
-            titleField.innerHTML = shoppingCart.contents.titles[i];
-            newLine.appendChild(icon);
-            newLine.appendChild(titleField);
-            scElement.appendChild(newLine);
-        }
-    
-        // reset type after empty
-        currentlySelected.type = null;
-    }
+    var scElement = ge("shoppingCartContent");
+    scElement.innerHTML = "";
+    for (var i = 0; i < shoppingCart.contents.uids.length; i++) {
+        var newLine = ce("div");
+        newLine.className = "shoppingCartItem";
+        newLine.id = "shoppingCartItem"+shoppingCart.contents.uids[i];
+        var icon = ce("image");
+        icon.src = "images/ui/DeleteIcon.gif";
+        icon.addEventListener("click", function(event){
+            // TODO: Actually write this function
+            removeFromList(event);
+        }, false);
+        var titleField = ce("text");
+        titleField.innerHTML = shoppingCart.contents.titles[i];
+        newLine.appendChild(icon);
+        newLine.appendChild(titleField);
+        scElement.appendChild(newLine);
+    }
+    
+    // reset type after empty
+    currentlySelected.type = null;
+}
     
 function configureDashboard() {
@@ -182,2 +194,116 @@
     form.submit();
 }
+
+//function goto dashboard
+function gotoDashboard() {
+    var data = JSON.stringify(doorstuurData);
+    var form = ce("form");
+    //changed to dashboardGraphSelection.php
+    form.action = "dashboardOverview.php";
+    form.method = "POST";
+    var input = ce("input");
+    input.type = "hidden";
+    input.name = "doorstuurData";
+    input.value = data;
+    form.appendChild(input);
+    form.submit();
+}
+
+function changeGraphType(type) {
+    // If different graph type, clear canvas 1.
+    
+    switch (type.toLowerCase()){
+        case "bar":
+            graphSelection.graphType = "Bar";
+            break;
+        case "radar":
+            graphSelection.graphType = "Radar";
+            break
+        case "pie":
+            graphSelection.graphType = "Pie";
+            break;
+        default:
+            break;
+    }
+    
+    //alert("Graph type is now: "+graphSelection.graphType);
+    var data = formatGraphData();
+    drawGraph('chart1', 450, 200, graphSelection.graphType, data);
+}
+
+function formatGraphData() {
+    /*
+     * if (data.available == false) {
+     * graphSelection.dataAvailable = false;
+     * insertStandardPlaceholderData();
+     * }
+     * else {
+     * FormatDataCorrectly();
+     * }
+     */
+    // temporary!!!;
+    graphSelection.graphData = mockupData.muData1;
+    return mockupData.muData1;
+    
+//alert("Data is now being formatted");
+}
+
+function drawGraph(name, sizeX, sizeY, type, data) {
+    //delete old graph
+    
+    var oldGraph = ge("chart1");
+    if (oldGraph) oldGraph.parentNode.removeChild(oldGraph);
+    
+    var canvas = ce("canvas");
+    canvas.id = name;
+    canvas.width = sizeX;
+    canvas.height = sizeY;
+    var parentElement = ge("graphDisplay");
+    parentElement.appendChild(canvas);
+    
+    //js calls
+    var chart1;
+    switch (type) {
+        case "Bar":
+            chart1 = new RGraph.Bar(name, data);
+            break;
+        case "Pie":
+            chart1 = new RGraph.Pie(name, data);
+            break;
+        case "Radar":
+            //chart1 = new RGraph.Radar('chart1', graphSelection.graphData);
+            break;
+        default:
+            break;
+    }
+    
+    //chart1.Set('chart.background.barcolor1', 'white');
+    // chart1.Set('chart.background.barcolor2', 'white');
+    chart1.Set('chart.labels', ['1st', '2nd', '3rd', '4th', '5th', '6th']);
+    //chart1.Set('chart.key', ['Aapjes', 'Hertjes']);
+    //chart1.Set('chart.key.position.y', 35);
+    //chart1.Set('chart.key.position', 'gutter');
+    //chart1.Set('chart.key.background', 'rgb(255,255,255)');
+    chart1.Set('chart.colors', ['#77f', '#7f7']);
+    chart1.Set('chart.shadow', true);
+    chart1.Set('chart.shadow.blur', 15);
+    chart1.Set('chart.shadow.offsetx', 0);
+    chart1.Set('chart.shadow.offsety', 0);
+    chart1.Set('chart.shadow.color', '#aaa');
+    chart1.Set('chart.yaxispos', 'right');
+    chart1.Set('chart.strokestyle', 'rgba(0,0,0,0)');
+    chart1.Set('chart.gutter.left', 5);
+    chart1.Set('chart.gutter.right', 45);
+    chart1.Draw();
+    
+}
+
+var doorstuurData = {
+    graphs: [],
+    count: null
+}
+
+function addToDashboard() {
+    doorstuurData.graphs.push(["graph"+doorstuurData.count+1, 450, 200, graphSelection.graphType, graphSelection.graphData]);
+    doorstuurData.count++;
+}
Index: Dev/branches/Cartis/selectSession.php
===================================================================
--- Dev/branches/Cartis/selectSession.php	(revision 226)
+++ Dev/branches/Cartis/selectSession.php	(revision 227)
@@ -115,4 +115,10 @@
                     </fieldset>
                 </form>
+                <div class="LargeFrame">
+                    <div class="content">
+                        <a href="dashboardDataSelection.php"><H3>Ga naar DATA SELECTION</H3></a>
+                    </div>
+                </div>
+                    
             </div>
         </div>
