source: Dev/branches/Cartis/Tiles preview/js/classes/graphs.js @ 296

$(function() {
   
    // Graph class
   
    function Graph(containerName) {
        var self = this;
        var _id;
        var _type;
        var _size;
        var _data;
        var _graphObject;
        var _title;
        this._container = document.getElementById(containerName);
        
        this.init = function(id, data, type, size, title) {
            // Draw the graph to the element
            _id = id;
            _data = data;
            _type = type; 
            _size = size;
            if (title) _title = title;

            var canvas = document.createElement("canvas");
            canvas.id = id;
            canvas.className = "graphDisplay";
            canvas.width = _size[0];
            canvas.height = size[1];
            self._container.appendChild(canvas);
            
            switch (_type) {
                case "Pie":
                    // Hardcoded data
                    // Participant age
                    _data = [5,7,9,4];
                    _graphObject = new RGraph.Pie(_id, _data);
                    _graphObject.Set('chart.labels', ['20-30 (20 participants)', '30-40 (28 participants)', '40-50 (36 participants)', '50+ (16 participants)']);
                    _graphObject.Set('chart.text.color', '#fff');
                    break;
                case "Bar":
                    // Hardcoded data
                    // Quality of control
                    _data = [4,20,50,18,8];
                    _graphObject = new RGraph.Bar(_id, _data);
                    _graphObject.Set('chart.labels', ['Bad','Subpar','Average','Above average','Good']);
                    _graphObject.Set('chart.text.color', '#fff');
                    break;
                case "Radar":
                    //Hardcoded data
                    // Gameplay errors
                    _data = [24,20,26,35,36,29,25,16];
                    _graphObject = new RGraph.Radar(_id, _data);                                  
                    _graphObject.Set('chart.labels',['Bram','Paula','Jules','Joel','Tyrone','Henk','Darcy','Frans']);
                    _graphObject.Set('chart.text.color', '#000');
                    _graphObject.Set('chart.strokestyle','black');

                    break;
                case "Rose":
                    _graphObject = new RGraph.Rose(_id, _data);
                    _graphObject.Set('chart.text.color', '#000');
                    break;
            }
            
            // Set standard properties.
            _graphObject.Set('chart.shadow', false);
            _graphObject.Set('chart.colors', ['rgba(240,240,240,0.5)', 'rgba(240,240,240,0.5)', 'rgba(240,240,240,0.5)']);
            _graphObject.Set('chart.axis.color', 'rgba(240,240,240,0.5)');
            _graphObject.Set('chart.strokestyle', 'rgba(240,240,240,1.0)');
            if (title) {
                _graphObject.Set('chart.title', title);
                _graphObject.Set('chart.title.color', 'white');
            }
            
            //enlarge click event
            if (canvas.id == "enlarged") {
                canvas.addEventListener("click", function(event) {
                    self.closeLarge(self);
                }, true);
                canvas.className = "fullGraphDisplay";
            }
            else {
                canvas.addEventListener("click", function(event) {
                    self.enlarge();
                }, true);
            }
            // Draw
            _graphObject.Draw();
        }

        this.getId = function() {
            return _id;
        }
        this.getType = function() {
            return _type;
        }

        this.enlarge = function() {
            // Check if already enlarged?
            debugger;
            var present = document.getElementById("largeContainer");
            if (present != null) return;
            
            var largeContainer = document.createElement("div");
            largeContainer.className = "fullscreenGraphContainer"; // make css!
            largeContainer.id = "largeContainer";
            
            // TESTING!!!! ///////////////////////////////
            $("#content").append(largeContainer);
            $(".basePanel").addClass("hidden");
            
            // END TESTING //////////////////////////
            /*
            $(".basePanel").append(largeContainer);
            */
            var largeGraph = new Graph("largeContainer");
            largeGraph.init("enlarged", _data, _type, [900,550], _title);
            var clearDiv = document.createElement("div");
            $(clearDiv).css("float", "left").css("clear", "both");
            largeGraph._container.appendChild(clearDiv);
        }
    
        this.closeLarge = function(graph) {
            debugger;
            self._container.parentNode.removeChild(self._container);
            $(".basePanel").removeClass('hidden');
        }
    }
    
    window.Graph = Graph;
   
});