mongo3 0.0.1

data/lib/public/javascripts/Jit/Examples/Other/example1.js

@@ -0,0 +1,566 @@
+var Log = {
+    elem: false,
+    write: function(text){
+        if (!this.elem) 
+            this.elem = document.getElementById('log');
+        this.elem.innerHTML = text;
+        this.elem.style.left = (500 - this.elem.offsetWidth / 2) + 'px';
+    }
+};
+
+function addEvent(obj, type, fn) {
+    if (obj.addEventListener) obj.addEventListener(type, fn, false);
+    else obj.attachEvent('on' + type, fn);
+};
+
+
+function init() {
+    //init data
+    var jsonpie = {
+      'id': 'root',
+      'name': 'RGraph based Pie Chart',
+      'data': {
+          '$type': 'none'
+      },
+      'children':[
+        {
+            'id':'pie1',
+            'name': 'pie1',
+            'data': {
+                '$aw': 20,
+                '$color': '#f55'
+            },
+            'children': []
+        },
+        {
+            'id':'pie2',
+            'name': 'pie2',
+            'data': {
+                '$aw': 40,
+                '$color': '#f77'
+            },
+            'children': []
+        },
+        {
+            'id':'pie3',
+            'name': 'pie3',
+            'data': {
+                '$aw': 10,
+                '$color': '#f99'
+            },
+            'children': []
+        },
+        {
+            'id':'pie4',
+            'name': 'pie4',
+            'data': {
+                '$aw': 30,
+                '$color': '#fbb'
+            },
+            'children': []
+        }
+      ]
+    };
+
+    var jsonpie2 = {
+      'id': 'root',
+      'name': 'Making an Extended Pie Chart',
+      'data': {
+          '$type': 'none'
+      },
+      'children':[
+        {
+            'id':'pie10',
+            'name': 'pie1',
+            'data': {
+                '$aw': 20,
+                '$color': '#f55'
+            },
+            'children': [
+                {
+                    'id':'pie100',
+                    'name': 'pc1',
+                    'data': {
+                        '$aw': 20,
+                        '$color': '#55f'
+                    },
+                    'children': []
+                    
+                },
+                {
+                    'id':'pie101',
+                    'name': 'pc2',
+                    'data': {
+                        '$aw': 70,
+                        '$color': '#66f'
+                    },
+                    'children': []
+                    
+                },
+                {
+                    'id':'pie102',
+                    'name': 'pc3',
+                    'data': {
+                        '$aw': 10,
+                        '$color': '#77f'
+                    },
+                    'children': []
+                    
+                }
+            ]
+        },
+        {
+            'id':'pie20',
+            'name': 'pie2',
+            'data': {
+                '$aw': 40,
+                '$color': '#f77'
+            },
+            'children': [
+                {
+                    'id':'pie200',
+                    'name': 'pc1',
+                    'data': {
+                        '$aw': 40,
+                        '$color': '#88f'
+                    },
+                    'children': []
+                    
+                },
+                {
+                    'id':'pie201',
+                    'name': 'pc2',
+                    'data': {
+                        '$aw': 60,
+                        '$color': '#99f'
+                    },
+                    'children': []
+                    
+                }
+            ]
+        },
+        {
+            'id':'pie30',
+            'name': 'pie3',
+            'data': {
+                '$aw': 10,
+                '$color': '#f99'
+            },
+            'children': [
+                {
+                    'id':'pie300',
+                    'name': 'pc1',
+                    'data': {
+                        '$aw': 100,
+                        '$color': '#aaf'
+                    },
+                    'children': []
+                    
+                }
+            ]
+        }
+      ]
+    };
+
+    var jsonpie3 = {
+      'id': 'root1',
+      'name': 'ST Bar Chart',
+      'data': {
+          '$type': 'none',
+          '$width': 80,
+          '$height':20
+      },
+      'children':[
+        {
+            'id':'h1',
+            'name': 'h1',
+            'data': {
+                '$color': '#55f',
+                '$height':30
+            },
+            'children': []
+        },
+        {
+            'id':'h2',
+            'name': 'h2',
+            'data': {
+                '$color': '#66f',
+                '$height':50
+            },
+            'children': []
+        },
+        {
+            'id':'h3',
+            'name': 'h3',
+            'data': {
+                '$color': '#77f',
+                '$height':70
+            },
+            'children': []
+        },
+        {
+            'id':'h4',
+            'name': 'h4',
+            'data': {
+                '$height':90,
+                '$color': '#88f'
+            },
+            'children': []
+        },
+        {
+            'id':'h5',
+            'name': 'h5',
+            'data': {
+                '$height':100,
+                '$color': '#99f'
+            },
+            'children': []
+        },
+        {
+            'id':'h6',
+            'name': 'h6',
+            'data': {
+                '$height':110,
+                '$color': '#aaf'
+            },
+            'children': []
+        },
+        {
+            'id':'h7',
+            'name': 'h7',
+            'data': {
+                '$height':150,
+                '$color': '#bbf'
+            },
+            'children': []
+        },
+        {
+            'id':'h8',
+            'name': 'h8',
+            'data': {
+                '$height':110,
+                '$color': '#aaf'
+            },
+            'children': []
+        },
+        {
+            'id':'h9',
+            'name': 'h9',
+            'data': {
+                '$height':100,
+                '$color': '#99f'
+            },
+            'children': []
+        },
+        {
+            'id':'h10',
+            'name': 'h10',
+            'data': {
+                '$height':90,
+                '$color': '#88f'
+            },
+            'children': []
+        },
+        {
+            'id':'h11',
+            'name': 'h11',
+            'data': {
+                '$height':110,
+                '$color': '#aaf'
+            },
+            'children': []
+        },
+        {
+            'id':'h12',
+            'name': 'h12',
+            'data': {
+                '$height':150,
+                '$color': '#bbf'
+            },
+            'children': []
+        },
+        {
+            'id':'h13',
+            'name': 'h13',
+            'data': {
+                '$height':110,
+                '$color': '#aaf'
+            },
+            'children': []
+        },
+        {
+            'id':'h14',
+            'name': 'h14',
+            'data': {
+                '$height':100,
+                '$color': '#99f'
+            },
+            'children': []
+        },
+        {
+            'id':'h15',
+            'name': 'h15',
+            'data': {
+                '$height':90,
+                '$color': '#88f'
+            },
+            'children': []
+        }
+      ]
+    };
+    //end
+    
+    var infovis = document.getElementById('infovis');
+    var w = infovis.offsetWidth, h = infovis.offsetHeight;
+    
+    //create some containers for the visualizations
+    var container = document.createElement('div');
+    container.id = "infovis1";
+    var style = container.style;
+    style.left = "0px";
+    style.top = "0px";
+    style.width = Math.floor(w / 2) + "px";
+    style.height = Math.floor(h / 2) + "px";
+    style.position = 'absolute';
+    infovis.appendChild(container);
+    
+    container = document.createElement('div');
+    container.id = "infovis2";
+    var style = container.style;
+    style.left = Math.floor(w / 2) + "px";
+    style.top = "0px";
+    style.width = style.left;
+    style.height = Math.floor(h / 2) + "px";
+    style.position = 'absolute';
+    infovis.appendChild(container);
+
+    container = document.createElement('div');
+    container.id = "infovis3";
+    var style = container.style;
+    style.left = "0px";
+    style.top = Math.floor(h / 2) + "px";
+    style.width = w + "px";
+    style.height = Math.floor(h / 2) + "px";
+    style.position = 'absolute';
+    infovis.appendChild(container);
+    
+    //init canvas
+    //Create new canvas instances.
+    var canvas1 = new Canvas('mycanvas1', {
+        'injectInto': 'infovis1',
+        'width': w/2,
+        'height': h/2
+    });
+
+    var canvas2 = new Canvas('mycanvas2', {
+        'injectInto': 'infovis2',
+        'width': w/2,
+        'height': h/2
+    });
+
+    var canvas3 = new Canvas('mycanvas3', {
+        'injectInto': 'infovis3',
+        'width': w,
+        'height': h/2,
+        'backgroundColor': '#1a1a1a'
+    });
+    //end
+
+    //init nodetypes
+    //Here we implement custom node rendering types for the RGraph
+    //Using this feature requires some javascript and canvas experience.
+    RGraph.Plot.NodeTypes.implement({
+        //This node type is used for plotting the upper-left pie chart
+        'nodepie': function(node, canvas) {
+            var span = node.angleSpan, begin = span.begin, end = span.end;
+            var polarNode = node.pos.getp(true);
+            var polar = new Polar(polarNode.rho, begin);
+            var p1coord = polar.getc(true);
+            polar.theta = end;
+            var p2coord = polar.getc(true);
+
+            var ctx = canvas.getCtx();
+            ctx.beginPath();
+            ctx.moveTo(0, 0);
+            ctx.lineTo(p1coord.x, p1coord.y);
+            ctx.moveTo(0, 0);
+            ctx.lineTo(p2coord.x, p2coord.y);
+            ctx.moveTo(0, 0);
+            ctx.arc(0, 0, polarNode.rho, begin, end, false);
+            ctx.fill();
+        },
+        //This node type is used for plotting the upper-right pie chart
+        'shortnodepie': function(node, canvas) {
+            var ldist = this.config.levelDistance;
+            var span = node.angleSpan, begin = span.begin, end = span.end;
+            var polarNode = node.pos.getp(true);
+            
+            var polar = new Polar(polarNode.rho, begin);
+            var p1coord = polar.getc(true);
+            
+            polar.theta = end;
+            var p2coord = polar.getc(true);
+            
+            polar.rho += ldist;
+            var p3coord = polar.getc(true);
+            
+            polar.theta = begin;
+            var p4coord = polar.getc(true);
+            
+            
+            var ctx = canvas.getCtx();
+            ctx.beginPath();
+            ctx.moveTo(p1coord.x, p1coord.y);
+            ctx.lineTo(p4coord.x, p4coord.y);
+            ctx.moveTo(0, 0);
+            ctx.arc(0, 0, polarNode.rho, begin, end, false);
+
+            ctx.moveTo(p2coord.x, p2coord.y);
+            ctx.lineTo(p3coord.x, p3coord.y);
+            ctx.moveTo(0, 0);
+            ctx.arc(0, 0, polarNode.rho + ldist, end, begin, true);
+            
+            ctx.fill();
+        }
+    });
+    //end
+    
+    //init rgraph
+    //This RGraph is used to plot the upper-left pie chart.
+    //It has custom *pie-chart-nodes*.
+    var rgraph = new RGraph(canvas1, {
+        //Add node/edge styles and set
+        //overridable=true if you want your
+        //styles to be individually overriden
+        Node: {
+            'overridable': true,
+             'type': 'nodepie'
+        },
+        Edge: {
+            'overridable': true
+        },
+        //Parent-children distance
+        levelDistance: 135,
+        
+        //Add styles to node labels on label creation
+        onCreateLabel: function(domElement, node){
+            domElement.innerHTML = node.name;
+            if(node.data.$aw) 
+                domElement.innerHTML += " " + node.data.$aw + "%";
+            var style = domElement.style;
+            style.fontSize = "0.8em";
+            style.color = "#fff";
+        },
+        //Add some offset to the labels when placed.
+        onPlaceLabel: function(domElement, node){
+            var style = domElement.style;
+            var left = parseInt(style.left);
+            var w = domElement.offsetWidth;
+            style.left = (left - w / 2) + 'px';
+        }
+    });
+    //load graph.
+    rgraph.loadJSON(jsonpie);
+    rgraph.refresh();
+    //end
+    //init rgraph2
+    //This RGraph instance is used for plotting the upper-right
+    //pie chart.
+    var rgraph2 = new RGraph(canvas2, {
+        //Add node/edge styles and set
+        //overridable=true if you want your
+        //styles to be individually overriden
+        Node: {
+            'overridable': true,
+             'type':'shortnodepie'
+        },
+        Edge: {
+            'overridable': true
+        },
+        //Parent-children distance
+        levelDistance: 45,
+        
+        //Add styles to node labels on label creation
+        onCreateLabel: function(domElement, node){
+            if(node.id == rgraph2.root) return;
+            domElement.innerHTML = node.name;
+            if(node.data.$aw) {
+                domElement.innerHTML += " " + node.data.$aw + "%";
+            }
+            var style = domElement.style;
+            style.fontSize = "0.8em";
+            style.color = "#fff";
+        },
+        
+        onPlaceLabel: function(domElement, node){
+            var style = domElement.style;
+            var left = parseInt(style.left);
+            var w = domElement.offsetWidth;
+            style.left = (left - w / 2) + 'px';
+        }
+    });
+    //load graph.
+    rgraph2.loadJSON(jsonpie2);
+    rgraph2.refresh();
+    //end
+    //init st
+    //This Spacetree nodes' heights are overriden individually
+    //so that it serves as a bar chart.
+    var st = new ST(canvas3, {
+        //set orientarion
+        orientation:'bottom',
+        //set duration for the animation
+        duration: 800,
+        //set parent-children distance
+        levelDistance: 30,
+        //set node and edge styles
+        //set overridable=true for styling individual
+        //nodes or edges
+        Node: {
+            overridable: true,
+            width: 30,
+            type: 'rectangle',
+            color: '#aaa',
+            align: 'right'
+        },
+        
+        Edge: {
+            type: 'bezier',
+            color: '#444'
+        },
+        
+        //This method is called on DOM label creation.
+        //Use this method to add styles to
+        //your node label.
+        onCreateLabel: function(label, node){
+            label.id = node.id;            
+            label.innerHTML = node.name;
+            //set label styles
+            var style = label.style;
+            style.fontSize = '0.7em';
+            style.textAlign= 'center';
+            style.paddingTop = '3px';
+            style.height = node.data.$height + 'px';            
+
+            if(node.id == st.root) {
+                style.color = '#eee';
+                style.width = node.data.$width + 'px';
+            } else {
+                style.color = '#fff';
+                style.width = 30 + 'px';
+            }
+        }
+    });
+    //load json data
+    st.loadJSON(jsonpie3);
+    //compute node positions and layout
+    st.compute();
+    //emulate a click on the root node and
+    //add an offset position to the tree
+    st.onClick(st.root, {
+        Move: {
+            offsetY: -110
+        }
+    });
+    //end
+}

data/lib/public/javascripts/Jit/Examples/Other/example2.html

@@ -0,0 +1,58 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+<title>Other - Composing Visualizations</title>
+
+<!-- CSS Files -->
+<link type="text/css" href="../css/base.css" rel="stylesheet" />
+<link type="text/css" href="../css/Other.css" rel="stylesheet" />
+
+<!--[if IE]><script language="javascript" type="text/javascript" src="../../Extras/excanvas.js"></script><![endif]-->
+
+<!-- JIT Library File -->
+<script language="javascript" type="text/javascript" src="../../jit.js"></script>
+
+<!-- Example File -->
+<script language="javascript" type="text/javascript" src="example2.js"></script>
+</head>
+
+<body onload="init();">
+<div id="container">
+
+<div id="left-container">
+
+
+
+<div class="text">
+<h4>
+Composing Visualizations    
+</h4> 
+
+            In this example a RGraph is composed with another RGraph (for node rendering).<br /><br />
+            The RGraph used for node rendering implements a custom node type defined in the <em>"Implementing Node Types"</em> example.<br /><br />
+            This example shows that many visualizations can be composed to create new visualizations.
+            
+            
+</div>
+
+<div id="id-list"></div>
+
+
+<div style="text-align:center;"><a href="example2.js">See the Example Code</a></div>            
+</div>
+
+<div id="center-container">
+    <div id="infovis"></div>    
+</div>
+
+<div id="right-container">
+
+<div id="inner-details"></div>
+
+</div>
+
+<div id="log"></div>
+</div>
+</body>
+</html>