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

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

            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":
                    _graphObject = new RGraph.Pie(_id, _data);
                    break;
                case "Bar":
                    _graphObject = new RGraph.Bar(_id, _data);
                    _graphObject.Set('chart.labels', ['Jan', 'Piet', 'Shaniqua']);
                    break;
                case "Radar":
                    _graphObject = new RGraph.Radar(_id, _data);
                    break;
                case "Rose":
                    _graphObject = new RGraph.Rose(_id, _data);
                    break;
            }
            
            // Set standard properties.
            _graphObject.Set('chart.text.color', '#fff');
            _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)');
            
            //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]);
            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;
   
});