Changeset 227 for Dev


Ignore:
Timestamp:
01/12/12 17:30:32 (13 years ago)
Author:
cartis
Message:
 
Location:
Dev/branches/Cartis
Files:
6 edited

Legend:

Unmodified
Added
Removed

  • Dev/branches/Cartis/classes/dbDataSelectionWidget.php

    r202 r227  
    1717    public $sessions;
    1818    public $gamedata;
     19   
     20    // toegevoegd questions
     21    public $questions;
     22   
    1923
    2024    public function __construct() {
    … …  
    2327        $this->sessions = $dbi->get("Session", array());
    2428        $this->gamedata = $dbi->get("Application", array());
     29       
     30// toegevoegd questions
     31        $this->questions = $dbi->get("Question", array());
    2532    }
    2633

  • Dev/branches/Cartis/css/visualeditors.css

    r204 r227  
    488488    height: 415px;
    489489}
     490
     491.graphSelectionButton {
     492    width: 75px;
     493    height: 50px;
     494    background: rgba(255,255,255,0.5);
     495    border: 1px solid #FFF;
     496    float: left;
     497    margin: 0 5px;
     498    padding: 2px;
     499}

  • Dev/branches/Cartis/dashboardDataSelection.php

    r204 r227  
    3838                                <div class="largeTitle">Instance data</div>
    3939                                <select id="dbSessionInstancesList" multiple class="dbDataList" size="15" onchange="infoPanelTimeout(event);">
     40
    4041                                    <?php
    41                                     foreach ($dbDataSelectionWidget->sessions as $session) {
    42                                         // Fill list
    43                                         // First checkbox, then descriptor
    44                                         echo "<option value='$session->uid'>$session->title</option>";
    45                                     }
     42                                   
     43                                      //Changed sessions into questions
     44                                      // foreach ($dbDataSelectionWidget->survey as $question) {
     45                                      foreach ($dbDataSelectionWidget->sessions as $session) {
     46                                      // Fill list
     47                                      // First checkbox, then descriptor
     48                                      echo "<option value='$session->uid'>$session->title</option>";
     49                                      }
     50                                     
     51                                   
    4652                                    ?>
    4753                                </select>
    … …  
    7884                <div id="rightColumn">
    7985                    <div class="largeFrame Cv" id="dbShoppingCart">
    80                         <div class="largeTitle">Shopping cart</div>
     86                        <div class="largeTitle">Selected data</div>
    8187                        <div class="content" id="shoppingCartContent">
    8288

  • Dev/branches/Cartis/dashboardGraphSelection.php

    r214 r227  
    88
    99$dbDataSelectionWidget = new dbDataSelectionWidget();
    10 
    1110$data = JSON_decode($_POST['selectedData']);
    1211?>
    … …  
    1716        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    1817
     18        <script type="text/javascript" src="js/generalScripts.js"></script>
     19        <script type="text/javascript" src="js/dashboardScripts.js"></script>
     20        <script src="RGraph/libraries/RGraph.common.core.js" ></script>
     21        <script src="RGraph/libraries/RGraph.common.annotate.js" ></script>
     22        <script src="RGraph/libraries/RGraph.common.context.js" ></script>
     23
     24        <script src="RGraph/libraries/RGraph.common.tooltips.js" ></script>
     25        <script src="RGraph/libraries/RGraph.common.resizing.js" ></script>
     26        <script src="RGraph/libraries/RGraph.bar.js" ></script>
     27        <script src="RGraph/libraries/RGraph.pie.js" ></script> 
     28
     29        <script>
     30            myGraph.Set('chart.contextmenu', [
     31                ['Get PNG', RGraph.showPNG],
     32                null,
     33                ['Cancel', function () {}]
     34            ]);
     35        </script>
     36
     37
     38        <script>
     39            window.onload = function ()
     40            {
     41 
     42                var bar1 = new RGraph.Bar('chart1', mockupData.muData3);
     43                //bar1.Set('chart.background.barcolor1', 'white');
     44                // bar1.Set('chart.background.barcolor2', 'white');
     45                bar1.Set('chart.labels', ['1st', '2nd', '3rd', '4th', '5th', '6th']);
     46                bar1.Set('chart.key', ['John', 'Bob']);
     47                bar1.Set('chart.key.position.y', 35);
     48                bar1.Set('chart.key.position', 'gutter');
     49                bar1.Set('chart.key.background', 'rgb(255,255,255)');
     50                bar1.Set('chart.colors', ['#77f', '#7f7']);
     51                bar1.Set('chart.shadow', true);
     52                bar1.Set('chart.shadow.blur', 15);
     53                bar1.Set('chart.shadow.offsetx', 0);
     54                bar1.Set('chart.shadow.offsety', 0);
     55                bar1.Set('chart.shadow.color', '#aaa');
     56                bar1.Set('chart.yaxispos', 'right');
     57                bar1.Set('chart.strokestyle', 'rgba(0,0,0,0)');
     58                bar1.Set('chart.gutter.left', 5);
     59                bar1.Set('chart.gutter.right', 45);
     60                bar1.Draw();
     61 
     62               
     63           
     64                if (!RGraph.isIE8()) {
     65                    tooltipFunc = function (i)
     66                    {
     67                        var r = i % 4;
     68                   
     69                        if (r == 3) return 'John'
     70                        else if (r == 2) return 'Rich';
     71                        else if (r == 1) return 'Jane';
     72                        else if (r == 0) return 'Quentin';
     73                    }
     74                    bar2.Set('chart.tooltips', tooltipFunc);
     75                }
     76 
     77                bar2.Draw();
     78               
     79            }
     80        </script>
     81
    1982        <title>
    2083            Dashboard Graph Selection
    … …  
    2386
    2487    </head>
    25    
     88
    2689    <body>
    2790        <div id="header">
    … …  
    39102                            <div class="largeTitle">Selected data</div>                         
    40103                            <div class="content" style="width: 300px; height: 500px; ">               
     104
    41105                                <?php
    42106                                print_r($data);
    43                                 ?>
     107                                ?>
     108
    44109                            </div>
    45 
    46                         </div>
    47                     </div>
    48 
    49                     <div id="rightColumn">
    50                         <div class="largeFrame Cv" style="width: 600px; height: 400px;">
    51                             <div class="largeTitle">Graph selection</div>
    52                             <div class="content">
    53                                 <img src="images/icons/nyan.gif" width="595" height="370"></img>
    54                             </div>
    55 
    56                         </div>
    57                     </div>
    58 
    59 
    60                     <div class="largeFrame Cu" id="dbInfoPanel" style="width: 930px;">
    61                         <div class='largeTitle'>Info panel</div>
    62                         <div class="content" id="dbInfoPanelContent" style="height: 100px;">
    63110
    64111                        </div>
    … …  
    66113                </div>
    67114
     115                <div id="rightColumn">
     116                    <div class="largeFrame Cv" style="width: 600px; height: 400px;">
     117                        <div class="largeTitle">Graph selection</div>
     118                        <div class="topControls" id="graphTypeSelector" style="float: left; clear: left; width: 100%; margin: 0; border: 1px solid #000;">
     119                            <div id="btnSelectPieType" class="graphSelectionButton" onclick="changeGraphType('pie')">PIE CHART</div>
     120                            <div id="btnSelectBarType" class="graphSelectionButton" onclick="changeGraphType('bar')">BAR CHART</div>
     121                            <div id="btnSelectRadarType" class="graphSelectionButton" onclick="changeGraphType('radar')">RADAR CHART</div>
     122                        </div>
     123                        <div class="content" id="graphDisplay">
    68124
    69                 </body>
    70                 </html>
     125                            <canvas id="chart1" width="450" height="200" onclick="RGraph.showPNG(document.getElementById('bar1'));">[No canvas support] </canvas>
     126
     127                            <!-- Button to gotoDashboard?? -->                                                           
     128
     129                        </div>
     130
     131                        <div class="controls">
     132                            <input type="button" class="smallButton" value="Save to dashboard" onClick="addToDashboard()"></input>
     133                            <input type="button" class="smallButton" value="Go to Dashboard" onClick="gotoDashboard()"></input>
     134
     135                        </div>
     136
     137                    </div>
     138                </div>
     139
     140
     141                <div class="largeFrame Cu" id="dbInfoPanel" style="width: 930px;">
     142                    <div class='largeTitle'>Info panel</div>
     143                    <div class="content" id="dbInfoPanelContent" style="height: 100px;">
     144
     145                    </div>
     146
     147
     148                </div>
     149            </div>
     150
     151
     152
     153    </body>
     154</html>

  • Dev/branches/Cartis/js/dashboardScripts.js

    r213 r227  
    11dbSelectionInfoTimeout = null;
    2 currentlySelected = {
     2var currentlySelected = {
    33    titles: [],
    44    uids: [],
    … …  
    66}
    77
    8 shoppingCart = {
     8var shoppingCart = {
    99    contents: {
    1010        titles: [],
    … …  
    1212        types: []
    1313    }
     14}
     15
     16var graphSelection = {
     17    graphType: null,
     18    graphData: null,
     19    dataAvailable: false
     20}
     21
     22var mockupData = {
     23    muData1: [1,2,3,4,5,6], //pie charts
     24    muData2: [[1,2,3],[4,5,6]], //bar charts
     25    muData3: [[1,2],[3,4],[5,6]]    //radar charts
    1426}
    1527
    … …  
    143155    // Lastly, refresh
    144156    drawShoppingCart();
    145     }
     157}
    146158
    147159function drawShoppingCart() {
    148         var scElement = ge("shoppingCartContent");
    149         scElement.innerHTML = "";
    150         for (var i = 0; i < shoppingCart.contents.uids.length; i++) {
    151             var newLine = ce("div");
    152             newLine.className = "shoppingCartItem";
    153             newLine.id = "shoppingCartItem"+shoppingCart.contents.uids[i];
    154             var icon = ce("image");
    155             icon.src = "images/ui/DeleteIcon.gif";
    156             icon.addEventListener("click", function(event){
    157                 // TODO: Actually write this function
    158                 removeFromList(event);
    159             }, false);
    160             var titleField = ce("text");
    161             titleField.innerHTML = shoppingCart.contents.titles[i];
    162             newLine.appendChild(icon);
    163             newLine.appendChild(titleField);
    164             scElement.appendChild(newLine);
    165         }
    166    
    167         // reset type after empty
    168         currentlySelected.type = null;
    169     }
     160    var scElement = ge("shoppingCartContent");
     161    scElement.innerHTML = "";
     162    for (var i = 0; i < shoppingCart.contents.uids.length; i++) {
     163        var newLine = ce("div");
     164        newLine.className = "shoppingCartItem";
     165        newLine.id = "shoppingCartItem"+shoppingCart.contents.uids[i];
     166        var icon = ce("image");
     167        icon.src = "images/ui/DeleteIcon.gif";
     168        icon.addEventListener("click", function(event){
     169            // TODO: Actually write this function
     170            removeFromList(event);
     171        }, false);
     172        var titleField = ce("text");
     173        titleField.innerHTML = shoppingCart.contents.titles[i];
     174        newLine.appendChild(icon);
     175        newLine.appendChild(titleField);
     176        scElement.appendChild(newLine);
     177    }
     178   
     179    // reset type after empty
     180    currentlySelected.type = null;
     181}
    170182   
    171183function configureDashboard() {
    … …  
    182194    form.submit();
    183195}
     196
     197//function goto dashboard
     198function gotoDashboard() {
     199    var data = JSON.stringify(doorstuurData);
     200    var form = ce("form");
     201    //changed to dashboardGraphSelection.php
     202    form.action = "dashboardOverview.php";
     203    form.method = "POST";
     204    var input = ce("input");
     205    input.type = "hidden";
     206    input.name = "doorstuurData";
     207    input.value = data;
     208    form.appendChild(input);
     209    form.submit();
     210}
     211
     212function changeGraphType(type) {
     213    // If different graph type, clear canvas 1.
     214   
     215    switch (type.toLowerCase()){
     216        case "bar":
     217            graphSelection.graphType = "Bar";
     218            break;
     219        case "radar":
     220            graphSelection.graphType = "Radar";
     221            break
     222        case "pie":
     223            graphSelection.graphType = "Pie";
     224            break;
     225        default:
     226            break;
     227    }
     228   
     229    //alert("Graph type is now: "+graphSelection.graphType);
     230    var data = formatGraphData();
     231    drawGraph('chart1', 450, 200, graphSelection.graphType, data);
     232}
     233
     234function formatGraphData() {
     235    /*
     236     * if (data.available == false) {
     237     * graphSelection.dataAvailable = false;
     238     * insertStandardPlaceholderData();
     239     * }
     240     * else {
     241     * FormatDataCorrectly();
     242     * }
     243     */
     244    // temporary!!!;
     245    graphSelection.graphData = mockupData.muData1;
     246    return mockupData.muData1;
     247   
     248//alert("Data is now being formatted");
     249}
     250
     251function drawGraph(name, sizeX, sizeY, type, data) {
     252    //delete old graph
     253   
     254    var oldGraph = ge("chart1");
     255    if (oldGraph) oldGraph.parentNode.removeChild(oldGraph);
     256   
     257    var canvas = ce("canvas");
     258    canvas.id = name;
     259    canvas.width = sizeX;
     260    canvas.height = sizeY;
     261    var parentElement = ge("graphDisplay");
     262    parentElement.appendChild(canvas);
     263   
     264    //js calls
     265    var chart1;
     266    switch (type) {
     267        case "Bar":
     268            chart1 = new RGraph.Bar(name, data);
     269            break;
     270        case "Pie":
     271            chart1 = new RGraph.Pie(name, data);
     272            break;
     273        case "Radar":
     274            //chart1 = new RGraph.Radar('chart1', graphSelection.graphData);
     275            break;
     276        default:
     277            break;
     278    }
     279   
     280    //chart1.Set('chart.background.barcolor1', 'white');
     281    // chart1.Set('chart.background.barcolor2', 'white');
     282    chart1.Set('chart.labels', ['1st', '2nd', '3rd', '4th', '5th', '6th']);
     283    //chart1.Set('chart.key', ['Aapjes', 'Hertjes']);
     284    //chart1.Set('chart.key.position.y', 35);
     285    //chart1.Set('chart.key.position', 'gutter');
     286    //chart1.Set('chart.key.background', 'rgb(255,255,255)');
     287    chart1.Set('chart.colors', ['#77f', '#7f7']);
     288    chart1.Set('chart.shadow', true);
     289    chart1.Set('chart.shadow.blur', 15);
     290    chart1.Set('chart.shadow.offsetx', 0);
     291    chart1.Set('chart.shadow.offsety', 0);
     292    chart1.Set('chart.shadow.color', '#aaa');
     293    chart1.Set('chart.yaxispos', 'right');
     294    chart1.Set('chart.strokestyle', 'rgba(0,0,0,0)');
     295    chart1.Set('chart.gutter.left', 5);
     296    chart1.Set('chart.gutter.right', 45);
     297    chart1.Draw();
     298   
     299}
     300
     301var doorstuurData = {
     302    graphs: [],
     303    count: null
     304}
     305
     306function addToDashboard() {
     307    doorstuurData.graphs.push(["graph"+doorstuurData.count+1, 450, 200, graphSelection.graphType, graphSelection.graphData]);
     308    doorstuurData.count++;
     309}

  • Dev/branches/Cartis/selectSession.php

    r207 r227  
    115115                    </fieldset>
    116116                </form>
     117                <div class="LargeFrame">
     118                    <div class="content">
     119                        <a href="dashboardDataSelection.php"><H3>Ga naar DATA SELECTION</H3></a>
     120                    </div>
     121                </div>
     122                   
    117123            </div>
    118124        </div>
Note: See TracChangeset for help on using the changeset viewer.