tw2.jit

This package contains the basic jit widgets.

Get this source from http://github.com/toscawidgets/tw2.jit

AreaChart

A visualization that displays stacked area charts.

See thejit API documentation on AreaChart:
http://thejit.org/static/v20/Docs/files/Visualizations/AreaChart-js.html
  • init_delay
    • value in milliseconds to delay js initialization and rendering
  • postInitJSCallback
    • javascript to run after client-side initialization of the widget
  • data
    • python data to be jsonified and passed to the widget
  • base_url
    • url for json data to be loaded into the widget
  • url_args
    • dict of keyword args for the json url
  • backgroundcolor
    • (string) background color of the jit container div
  • width
    • (string) widget width
  • height
    • (string) widget height
  • animate
    • (boolean) Whether to add animated transitions.
  • transition
    • javascript symbol of the type of jit transition to use. All the possible transitions are listed here: http://thejit.org/static/v20/Docs/files/Options/Options-Fx-js.html#Options.Fx
  • duration
    • (number) Duration of the animation in milliseconds.
  • fps
    • (number) Frames per second of the animation.
  • offset
    • (number) Margin between the display and the canvas.
  • Canvas
    • (dict) Of the form Options.Canvas in the jit docs.
  • Label
    • (dict) Of the form Options.Label in the jit docs.
  • Tips
    • (dict) Of the form of Options.Tips in the jit docs.
  • Events
    • (dict) Of the form Options.Events in the jit docs.
  • deep_linking
    • (bool) Use 'deep-linking'. Only employed by *some* widgets. (AjaxRadialGraph, SQLARadialGraph). Warning: This will conflict with and probably break any other form of deep-linking you may have on the page. Disabled by default.
  • jsVariables
    • A dictionary of special jsVariables for substitution
  • type
    • (string) Stack style. Possible values are "stacked", "stacked:gradient" to add gradients.
  • showLabels
    • (boolean) Display the slot names.
  • labelOffset
    • (number) Adds margin between the label and the default place where it should be drawn.
  • selectOnHover
    • (boolean) Add a mark to the hovered stack.
  • filterOnClick
    • (boolean) Select the clicked stack and hide others.
  • restoreOnRightClick
    • (boolean) Show all stacks by right clicking.
  • showAggregates
    • (boolean) Display the sum of the stack values.
class DemoAreaChart(AreaChart):
    """ This is the only sample that loads its data asynchronously """
    offset = 0
    labelOffset = 15
    showAggregates = True
    showLabels = True
    type = 'stacked'
    Label = {
        'type': 'Native',
        'size': 15,
        'family': 'Arial',
        'color': 'white'
    }
    Tips = {
        'enable': True,
        'onShow' : JSSymbol(src="""
        (function(tip, elem) {
            tip.innerHTML = "<b>" + elem.name + "</b>: $" + elem.value + " per year income (adjusted for inflation)";
        })""")
    }
    from tw2.core.jsonify import jsonify
    @classmethod
    @jsonify
    def request(cls, req):
        return AreaChartJSONSampleData
    base_url = '/area_chart_data/'
<div style="text-align:center; overflow:hidden; background-color:${w.backgroundcolor}; width: ${w.width}; height: ${w.height};" id="${w.compound_id}"></div>

BarChart

A visualization that displays stacked bar charts.

See thejit API documentation on BarChart:
http://thejit.org/static/v20/Docs/files/Visualizations/BarChart-js.html
  • init_delay
    • value in milliseconds to delay js initialization and rendering
  • postInitJSCallback
    • javascript to run after client-side initialization of the widget
  • data
    • python data to be jsonified and passed to the widget
  • base_url
    • url for json data to be loaded into the widget
  • url_args
    • dict of keyword args for the json url
  • backgroundcolor
    • (string) background color of the jit container div
  • width
    • (string) widget width
  • height
    • (string) widget height
  • animate
    • (boolean) Whether to add animated transitions.
  • transition
    • javascript symbol of the type of jit transition to use. All the possible transitions are listed here: http://thejit.org/static/v20/Docs/files/Options/Options-Fx-js.html#Options.Fx
  • duration
    • (number) Duration of the animation in milliseconds.
  • fps
    • (number) Frames per second of the animation.
  • offset
    • (number) Margin between the display and the canvas.
  • Canvas
    • (dict) Of the form Options.Canvas in the jit docs.
  • Label
    • (dict) Of the form Options.Label in the jit docs.
  • Tips
    • (dict) Of the form of Options.Tips in the jit docs.
  • Events
    • (dict) Of the form Options.Events in the jit docs.
  • deep_linking
    • (bool) Use 'deep-linking'. Only employed by *some* widgets. (AjaxRadialGraph, SQLARadialGraph). Warning: This will conflict with and probably break any other form of deep-linking you may have on the page. Disabled by default.
  • jsVariables
    • A dictionary of special jsVariables for substitution
  • type
    • (string) Stack style. Possible values are "stacked", "stacked:gradient" to add gradients.
  • showLabels
    • (boolean) Display the slot names.
  • labelOffset
    • (number) Adds margin between the label and the default place where it should be drawn.
  • barsOffset
    • (number) Separation between bars.
  • hoveredColor
    • (string) The color for a hovered bar stack.
  • orientation
    • (string) The direction of the bars. Possible options are "vertical" and "horizontal".
  • showAggregates
    • (boolean) Display the sum of the stack values.
class DemoBarChart(BarChart):
    data = BarChartJSONSampleData
<div style="text-align:center; overflow:hidden; background-color:${w.backgroundcolor}; width: ${w.width}; height: ${w.height};" id="${w.compound_id}"></div>

PieChart

A visualization that displays stacked pie charts.

See thejit API documentation on PieChart:
http://thejit.org/static/v20/Docs/files/Visualizations/PieChart-js.html
  • init_delay
    • value in milliseconds to delay js initialization and rendering
  • postInitJSCallback
    • javascript to run after client-side initialization of the widget
  • data
    • python data to be jsonified and passed to the widget
  • base_url
    • url for json data to be loaded into the widget
  • url_args
    • dict of keyword args for the json url
  • backgroundcolor
    • (string) background color of the jit container div
  • width
    • (string) widget width
  • height
    • (string) widget height
  • animate
    • (boolean) Whether to add animated transitions.
  • transition
    • javascript symbol of the type of jit transition to use. All the possible transitions are listed here: http://thejit.org/static/v20/Docs/files/Options/Options-Fx-js.html#Options.Fx
  • duration
    • (number) Duration of the animation in milliseconds.
  • fps
    • (number) Frames per second of the animation.
  • offset
    • (number) Margin between the display and the canvas.
  • Canvas
    • (dict) Of the form Options.Canvas in the jit docs.
  • Label
    • (dict) Of the form Options.Label in the jit docs.
  • Tips
    • (dict) Of the form of Options.Tips in the jit docs.
  • Events
    • (dict) Of the form Options.Events in the jit docs.
  • deep_linking
    • (bool) Use 'deep-linking'. Only employed by *some* widgets. (AjaxRadialGraph, SQLARadialGraph). Warning: This will conflict with and probably break any other form of deep-linking you may have on the page. Disabled by default.
  • jsVariables
    • A dictionary of special jsVariables for substitution
  • type
    • (string) Stack style. Possible values are "stacked", "stacked:gradient" to add gradients.
  • showLabels
    • (boolean) Display the slot names.
  • labelOffset
    • (number) Adds margin between the label and the default place where it should be drawn.
  • sliceOffset
    • (number) Separation between slices.
  • hoveredColor
    • (string) Sets the selected color for a hovered pie stack.
  • resizeLabels
    • (boolean|number) Resize the pie labels according to their stacked values. Set a number for resizeLabels to set a font size minimum.
  • updateHeights
    • (boolean) Only for mono-valued (most common) pie charts. Resize the height of the pie slices according to their current values.
class DemoPieChart(PieChart):
    data = PieChartJSONSampleData
    sliceOffset = 5
<div style="text-align:center; overflow:hidden; background-color:${w.backgroundcolor}; width: ${w.width}; height: ${w.height};" id="${w.compound_id}"></div>

RadialGraph

A radial graph visualization with advanced animations.

See thejit API documentation on RadialGraph:
http://thejit.org/static/v20/Docs/files/Visualizations/RGraph-js.html
  • init_delay
    • value in milliseconds to delay js initialization and rendering
  • postInitJSCallback
    • javascript to run after client-side initialization of the widget
  • data
    • python data to be jsonified and passed to the widget
  • base_url
    • url for json data to be loaded into the widget
  • url_args
    • dict of keyword args for the json url
  • backgroundcolor
    • (string) background color of the jit container div
  • width
    • (string) widget width
  • height
    • (string) widget height
  • animate
    • (boolean) Whether to add animated transitions.
  • transition
    • javascript symbol of the type of jit transition to use. All the possible transitions are listed here: http://thejit.org/static/v20/Docs/files/Options/Options-Fx-js.html#Options.Fx
  • duration
    • (number) Duration of the animation in milliseconds.
  • fps
    • (number) Frames per second of the animation.
  • offset
    • (number) Margin between the display and the canvas.
  • Canvas
    • (dict) Of the form Options.Canvas in the jit docs.
  • Label
    • (dict) Of the form Options.Label in the jit docs.
  • Tips
    • (dict) Of the form of Options.Tips in the jit docs.
  • Events
    • (dict) Of the form Options.Events in the jit docs.
  • deep_linking
    • (bool) Use 'deep-linking'. Only employed by *some* widgets. (AjaxRadialGraph, SQLARadialGraph). Warning: This will conflict with and probably break any other form of deep-linking you may have on the page. Disabled by default.
  • jsVariables
    • A dictionary of special jsVariables for substitution
  • Navigation
    • (dict) Panning and zooming options for Graph/Tree visualziations.
  • Node
    • (dict) Provides Node rendering options for Tree and Graph based visualizations.
  • Edge
    • (dict) Provides Edge rendering options for Tree and Graph based visualizations.
  • onBeforeCompute
    • (javascript) This method is called right before performing all computations and animations. The selected Graph.Node is passed as parameter.
  • onAfterCompute
    • (javascript) This method is triggered after all animations or computations ended.
  • onCreateLabel
    • (javascript) This method receives a new label DIV element as first parameter, and the corresponding Graph.Node as second parameter. This method will only be called once for each label. This method is useful when adding events or styles to the labels used by the JIT.
  • onPlaceLabel
    • (javascript) This method receives a label DIV element as first parameter and the corresponding Graph.Node as second parameter. This method is called each time a label has been placed in the visualization, for example at each step of an animation, and thus it allows you to update the labels properties, such as size or position. Note that onPlaceLabel will be triggered after updating the labels positions. That means that, for example, the left and top css properties are already updated to match the nodes positions. Width and height properties are not set however.
  • onBeforePlotNode
    • (javascript) This method is triggered right before plotting each Graph.Node. This method is useful for changing a node style right before plotting it.
  • onAfterPlotNode
    • (javascript) This method is triggered right after plotting each Graph.Node.
  • onBeforePlotLine
    • (javascript) This method is triggered right before plotting a Graph.Adjacence. This method is useful for adding some styles to a particular edge before being plotted.
  • onAfterPlotLine
    • (javascript) This method is triggered right after plotting a Graph.Adjacence.
  • background
    • (dict) see sample.
  • levelDistance
    • (number) Distance between levels
class DemoRadialGraph(RadialGraph):
    data = RadialGraphJSONSampleData
    background = { 'CanvasStyles':{ 'strokeStyle' : '#555' } }
    backgroundcolor = '#0f0f0f'
    postInitJSCallback = JSSymbol(src="""
        (function (jitwidget) {
            //trigger small animation for kicks
            jitwidget.graph.eachNode(function(n) {
                var pos = n.getPos();
                pos.setc(-200, -200);
            });
            jitwidget.compute('end');
            jitwidget.fx.animate({
                modes:['polar'],
                duration: 2000
            });
         })""")
    Node = {
        'color' : '#ddeeff',
    }
    Edge = {
        'color': '#C17878',
        'lineWidth':1.5,
    }
    onCreateLabel = JSSymbol(src="""
        (function(domElement, node){
            domElement.innerHTML = node.name;
            domElement.onclick = function(){
                $$jitwidget.onClick(node.id);
            };
        })""")
    onPlaceLabel = JSSymbol(src="""
        (function(domElement, node){
            var style = domElement.style;
            style.display = '';
            style.cursor = 'pointer';
            if (node._depth <= 1) {
                style.fontSize = "0.8em";
                style.color = "#ccc";
            
            } else if(node._depth == 2){
                style.fontSize = "0.7em";
                style.color = "#494949";
            
            } else {
                style.display = 'none';
            }
            var left = parseInt(style.left);
            var w = domElement.offsetWidth;
            style.left = (left - w / 2) + 'px';
        })""")
<div style="text-align:center; overflow:hidden; background-color:${w.backgroundcolor}; width: ${w.width}; height: ${w.height};" id="${w.compound_id}"></div>

ForceDirectedGraph

A visualization that lays graphs using a Force-Directed layout algorithm.

See thejit API documentation on ForceDirectedGraph:
http://thejit.org/static/v20/Docs/files/Visualizations/ForceDirected-js.html
  • init_delay
    • value in milliseconds to delay js initialization and rendering
  • postInitJSCallback
    • javascript to run after client-side initialization of the widget
  • data
    • python data to be jsonified and passed to the widget
  • base_url
    • url for json data to be loaded into the widget
  • url_args
    • dict of keyword args for the json url
  • backgroundcolor
    • (string) background color of the jit container div
  • width
    • (string) widget width
  • height
    • (string) widget height
  • animate
    • (boolean) Whether to add animated transitions.
  • transition
    • javascript symbol of the type of jit transition to use. All the possible transitions are listed here: http://thejit.org/static/v20/Docs/files/Options/Options-Fx-js.html#Options.Fx
  • duration
    • (number) Duration of the animation in milliseconds.
  • fps
    • (number) Frames per second of the animation.
  • offset
    • (number) Margin between the display and the canvas.
  • Canvas
    • (dict) Of the form Options.Canvas in the jit docs.
  • Label
    • (dict) Of the form Options.Label in the jit docs.
  • Tips
    • (dict) Of the form of Options.Tips in the jit docs.
  • Events
    • (dict) Of the form Options.Events in the jit docs.
  • deep_linking
    • (bool) Use 'deep-linking'. Only employed by *some* widgets. (AjaxRadialGraph, SQLARadialGraph). Warning: This will conflict with and probably break any other form of deep-linking you may have on the page. Disabled by default.
  • jsVariables
    • A dictionary of special jsVariables for substitution
  • Navigation
    • (dict) Panning and zooming options for Graph/Tree visualziations.
  • Node
    • (dict) Provides Node rendering options for Tree and Graph based visualizations.
  • Edge
    • (dict) Provides Edge rendering options for Tree and Graph based visualizations.
  • onBeforeCompute
    • (javascript) This method is called right before performing all computations and animations. The selected Graph.Node is passed as parameter.
  • onAfterCompute
    • (javascript) This method is triggered after all animations or computations ended.
  • onCreateLabel
    • (javascript) This method receives a new label DIV element as first parameter, and the corresponding Graph.Node as second parameter. This method will only be called once for each label. This method is useful when adding events or styles to the labels used by the JIT.
  • onPlaceLabel
    • (javascript) This method receives a label DIV element as first parameter and the corresponding Graph.Node as second parameter. This method is called each time a label has been placed in the visualization, for example at each step of an animation, and thus it allows you to update the labels properties, such as size or position. Note that onPlaceLabel will be triggered after updating the labels positions. That means that, for example, the left and top css properties are already updated to match the nodes positions. Width and height properties are not set however.
  • onBeforePlotNode
    • (javascript) This method is triggered right before plotting each Graph.Node. This method is useful for changing a node style right before plotting it.
  • onAfterPlotNode
    • (javascript) This method is triggered right after plotting each Graph.Node.
  • onBeforePlotLine
    • (javascript) This method is triggered right before plotting a Graph.Adjacence. This method is useful for adding some styles to a particular edge before being plotted.
  • onAfterPlotLine
    • (javascript) This method is triggered right after plotting a Graph.Adjacence.
  • iterations
    • (number) The number of iterations for the spring layout simulation. Depending on the browser's speed you could set this to a more "interesting" number, like 200.
  • levelDistance
    • (number) The natural length desired for the edges.
class DemoForceDirectedGraph(ForceDirectedGraph):
    data = ForceDirectedGraphJSONSampleData
    iterations = 25
    levelDistance = 75
    postInitJSCallback = JSSymbol(src=""" 
        (function (jitwidget) {
            jitwidget.computeIncremental({
                iter: 40,
                property: 'end',
                onComplete: function(){
                    jitwidget.animate({
                        modes: ['linear'],
                        transition: $jit.Trans.Elastic.easeOut,
                        duration: 2500
                    });
                }
            });
        })""")
    Navigation = {
        'enable' : True,
        'panning' : 'avoid nodes',
        'zooming' : 10
    }
    Node = {
        'overridable' : True,
    }
    Edge = {
        'overridable' : True,
        'color' : '#23A4FF',
        'lineWidth' : 0.4,
    }
    Label = {
        'style' : 'bold',
    }
    Tips = {
        'enable' : True,
        'onShow' : JSSymbol(src="""
            (function(tip, node) {
                var count = 0;
                node.eachAdjacency(function() { count++; });
                tip.innerHTML = '<div class="tip-title">' 
                    + node.name + '</div>'
                    + '<div class="tip-text"><b>connections:</b> ' 
                    + count + '</div>';
            })"""),
    }
    Events = {
            'enable' : True,
            'onMouseEnter' : JSSymbol(src="""
            (function() { 
                $$jitwidget.canvas.getElement().style.cursor = \'move\';
            })"""),
            'onMouseLeave' : JSSymbol(src="""
            (function() {
                $$jitwidget.canvas.getElement().style.cursor = \'\';
            })"""),
            'onDragMove' : JSSymbol(src="""
            (function(node, eventInfo, e) {
                var pos = eventInfo.getPos();
                node.pos.setc(pos.x, pos.y);
                $$jitwidget.plot();
            })"""),
            'onTouchMove' : JSSymbol(src="""
            (function(node, eventInfo, e) {
                $jit.util.event.stop(e);
                this.onDragMove(node, eventInfo, e);
            })"""),
            'onClick' : JSSymbol(src="""
            (function(node) {
                if(!node) return;
                var html = "<h4>" + node.name + "</h4><b> connections:</b><ul><li>",
                list = [];
                node.eachAdjacency(function(adj){
                    list.push(adj.nodeTo.name);
                });
                alert("this is connected to: " + list.join(", "));
            })""")
    }
    onCreateLabel = JSSymbol(src="""
        (function(domElement, node){
              domElement.innerHTML = node.name;
              var style = domElement.style;
              style.fontSize = "0.8em";
              style.color = "#ddd";
        })""" )
    onPlaceLabel = JSSymbol(src="""
        (function(domElement, node){
            var style = domElement.style;
            var left = parseInt(style.left);
            var top = parseInt(style.top);
            var w = domElement.offsetWidth;
            style.left = (left - w / 2) + 'px';
            style.top = (top + 10) + 'px';
            style.display = '';
        })""")
<div style="text-align:center; overflow:hidden; background-color:${w.backgroundcolor}; width: ${w.width}; height: ${w.height};" id="${w.compound_id}"></div>

TreeMap

A squarified TreeMap visualization.

'Strip' and 'SliceAndDice' variations not yet supported.

See thejit API documentation on TreeMap:
http://thejit.org/static/v20/Docs/files/Visualizations/Treemap-js.html
  • init_delay
    • value in milliseconds to delay js initialization and rendering
  • postInitJSCallback
    • javascript to run after client-side initialization of the widget
  • data
    • python data to be jsonified and passed to the widget
  • base_url
    • url for json data to be loaded into the widget
  • url_args
    • dict of keyword args for the json url
  • backgroundcolor
    • (string) background color of the jit container div
  • width
    • (string) widget width
  • height
    • (string) widget height
  • animate
    • (boolean) Whether to add animated transitions.
  • transition
    • javascript symbol of the type of jit transition to use. All the possible transitions are listed here: http://thejit.org/static/v20/Docs/files/Options/Options-Fx-js.html#Options.Fx
  • duration
    • (number) Duration of the animation in milliseconds.
  • fps
    • (number) Frames per second of the animation.
  • offset
    • (number) Margin between boxes.
  • Canvas
    • (dict) Of the form Options.Canvas in the jit docs.
  • Label
    • (dict) Of the form Options.Label in the jit docs.
  • Tips
    • (dict) Of the form of Options.Tips in the jit docs.
  • Events
    • (dict) Of the form Options.Events in the jit docs.
  • deep_linking
    • (bool) Use 'deep-linking'. Only employed by *some* widgets. (AjaxRadialGraph, SQLARadialGraph). Warning: This will conflict with and probably break any other form of deep-linking you may have on the page. Disabled by default.
  • jsVariables
    • A dictionary of special jsVariables for substitution
  • Navigation
    • (dict) Panning and zooming options for Graph/Tree visualziations.
  • Node
    • (dict) Provides Node rendering options for Tree and Graph based visualizations.
  • Edge
    • (dict) Provides Edge rendering options for Tree and Graph based visualizations.
  • onBeforeCompute
    • (javascript) This method is called right before performing all computations and animations. The selected Graph.Node is passed as parameter.
  • onAfterCompute
    • (javascript) This method is triggered after all animations or computations ended.
  • onCreateLabel
    • (javascript) This method receives a new label DIV element as first parameter, and the corresponding Graph.Node as second parameter. This method will only be called once for each label. This method is useful when adding events or styles to the labels used by the JIT.
  • onPlaceLabel
    • (javascript) This method receives a label DIV element as first parameter and the corresponding Graph.Node as second parameter. This method is called each time a label has been placed in the visualization, for example at each step of an animation, and thus it allows you to update the labels properties, such as size or position. Note that onPlaceLabel will be triggered after updating the labels positions. That means that, for example, the left and top css properties are already updated to match the nodes positions. Width and height properties are not set however.
  • onBeforePlotNode
    • (javascript) This method is triggered right before plotting each Graph.Node. This method is useful for changing a node style right before plotting it.
  • onAfterPlotNode
    • (javascript) This method is triggered right after plotting each Graph.Node.
  • onBeforePlotLine
    • (javascript) This method is triggered right before plotting a Graph.Adjacence. This method is useful for adding some styles to a particular edge before being plotted.
  • onAfterPlotLine
    • (javascript) This method is triggered right after plotting a Graph.Adjacence.
  • constrained
    • (boolean) Whether to show the entire tree when loaded or just the number of levels specified by levelsToShow.
  • levelsToShow
    • (number) The number of levels to show for a subtree. This number is relative to the selected node.
  • cushion
    • (boolean) Cushion Gradients
  • orientation
    • (string) Whether to set horizontal or vertical layout. Possible values are "h" or "v".
  • titleHeight
    • (number) Separation between the center of the canvas and each pie slice.
class DemoTreeMap(TreeMap):
    data = TreeMapJSONSampleData
    postInitJSCallback = JSSymbol(
        src="(function (jitwidget) { jitwidget.refresh(); })")
    Tips = {
        'enable' : True,
        'offsetX' : 20,
        'offsetY' : 20,
        'onShow' : JSSymbol(src="""
            (function(tip, node, isLeaf, domElement) {
                   var html = '<div class="tip-title">' + node.name   
                     + '</div><div class="tip-text">';  
                   var data = node.data;  
                   if(data.playcount) {  
                     html += 'play count: ' + data.playcount;  
                   }  
                   if(data.image) {  
                        html += '<img src="'+ data.image +'" style="width: 100px; margin: 3px;" />';  
                   }  
                   tip.innerHTML =  html;   
            })
            """)
    }
    onCreateLabel = JSSymbol(src="""
        (function(domElement, node){  
           domElement.innerHTML = node.name;  
           var style = domElement.style;  
           style.display = '';  
           style.border = '1px solid transparent';  
           domElement.onmouseover = function() {  
             style.border = '1px solid #9FD4FF';  
           };  
           domElement.onmouseout = function() {  
             style.border = '1px solid transparent';  
           };  
        } )
        """)
<div style="text-align:center; overflow:hidden; background-color:${w.backgroundcolor}; width: ${w.width}; height: ${w.height};" id="${w.compound_id}"></div>

Sunburst

A radial space filling tree visualization.

See thejit API documentation on Sunburst:
http://thejit.org/static/v20/Docs/files/Visualizations/Sunburst-js.html
  • init_delay
    • value in milliseconds to delay js initialization and rendering
  • postInitJSCallback
    • javascript to run after client-side initialization of the widget
  • data
    • python data to be jsonified and passed to the widget
  • base_url
    • url for json data to be loaded into the widget
  • url_args
    • dict of keyword args for the json url
  • backgroundcolor
    • (string) background color of the jit container div
  • width
    • (string) widget width
  • height
    • (string) widget height
  • animate
    • (boolean) Whether to add animated transitions.
  • transition
    • javascript symbol of the type of jit transition to use. All the possible transitions are listed here: http://thejit.org/static/v20/Docs/files/Options/Options-Fx-js.html#Options.Fx
  • duration
    • (number) Duration of the animation in milliseconds.
  • fps
    • (number) Frames per second of the animation.
  • offset
    • (number) Margin between the display and the canvas.
  • Canvas
    • (dict) Of the form Options.Canvas in the jit docs.
  • Label
    • (dict) Of the form Options.Label in the jit docs.
  • Tips
    • (dict) Of the form of Options.Tips in the jit docs.
  • Events
    • (dict) Of the form Options.Events in the jit docs.
  • deep_linking
    • (bool) Use 'deep-linking'. Only employed by *some* widgets. (AjaxRadialGraph, SQLARadialGraph). Warning: This will conflict with and probably break any other form of deep-linking you may have on the page. Disabled by default.
  • jsVariables
    • A dictionary of special jsVariables for substitution
  • Navigation
    • (dict) Panning and zooming options for Graph/Tree visualziations.
  • Node
    • (dict) Provides Node rendering options for Tree and Graph based visualizations.
  • Edge
    • (dict) Provides Edge rendering options for Tree and Graph based visualizations.
  • onBeforeCompute
    • (javascript) This method is called right before performing all computations and animations. The selected Graph.Node is passed as parameter.
  • onAfterCompute
    • (javascript) This method is triggered after all animations or computations ended.
  • onCreateLabel
    • (javascript) This method receives a new label DIV element as first parameter, and the corresponding Graph.Node as second parameter. This method will only be called once for each label. This method is useful when adding events or styles to the labels used by the JIT.
  • onPlaceLabel
    • (javascript) This method receives a label DIV element as first parameter and the corresponding Graph.Node as second parameter. This method is called each time a label has been placed in the visualization, for example at each step of an animation, and thus it allows you to update the labels properties, such as size or position. Note that onPlaceLabel will be triggered after updating the labels positions. That means that, for example, the left and top css properties are already updated to match the nodes positions. Width and height properties are not set however.
  • onBeforePlotNode
    • (javascript) This method is triggered right before plotting each Graph.Node. This method is useful for changing a node style right before plotting it.
  • onAfterPlotNode
    • (javascript) This method is triggered right after plotting each Graph.Node.
  • onBeforePlotLine
    • (javascript) This method is triggered right before plotting a Graph.Adjacence. This method is useful for adding some styles to a particular edge before being plotted.
  • onAfterPlotLine
    • (javascript) This method is triggered right after plotting a Graph.Adjacence.
  • constrained
    • (boolean) Whether to show the entire tree when loaded or just the number of levels specified by levelsToShow.
  • levelsToShow
    • (number) The number of levels to show for a subtree. This number is relative to the selected node.
  • levelDistance
    • (number) Distance between levels.
class DemoSunburst(Sunburst):
    data = SunburstJSONSampleData
    postInitJSCallback = JSSymbol(
        src="(function (jitwidget) { jitwidget.refresh(); })")
    Node = {
        'overridable' : True,
        'type' : 'gradient-multipie',
    }
    Label = { 'type' : 'HTML' }
    NodeStyles = {
            'enable': True,
            'type': 'HTML',
            'stylesClick': {
                'color': '#33dddd'
            },
            'stylesHover': {
                'color': '#dd3333'
            }
    }
    onCreateLabel = JSSymbol(src="""
    (function(domElement, node){
       var labels = $$jitwidget.config.Label.type;
       var aw = node.getData('angularWidth');  
       if (labels === 'HTML' && (node._depth < 2 || aw > 2000)) {  
         domElement.innerHTML = node.name;  
       } else if (labels === 'SVG' && (node._depth < 2 || aw > 2000)) {  
         domElement.firstChild.appendChild(document.createTextNode(node.name));  
       }  
     })""")
    onPlaceLabel = JSSymbol(src="""
        (function(domElement, node){  
            var labels = $$jitwidget.config.Label.type;  
            if (labels === 'SVG') {  
                var fch = domElement.firstChild;  
                var style = fch.style;  
                style.display = '';  
                style.cursor = 'pointer';  
                style.fontSize = '0.8em';  
                fch.setAttribute('fill', '#fff');  
            } else if (labels === 'HTML') {  
                var style = domElement.style;  
                style.display = '';  
                style.cursor = 'pointer';  
                style.fontSize = '0.8em';  
                style.color = '#ddd';  
                var left = parseInt(style.left);  
                var w = domElement.offsetWidth;  
                style.left = (left - w / 2) + 'px';  
            }  
        })""")
    Tips = {
        'enable': True,
        'onShow': JSSymbol(src="""
            (function(tip, node) {  
                var html = '<div class="tip-title">' + node.name + '</div>';
                var data = node.data;  
                if('days' in data) {  
                    html += '<b>Last modified:</b> ' + data.days + ' days ago';
                }  
                if('size' in data) {  
                    html += '<br /><b>File size:</b> ' + Math.round(data.size / 1024) + 'KB';
                }
                tip.innerHTML = html;  
            })""")
    }
    Events = {
        'enable': True,
        'onClick': JSSymbol(src="""
            (function(node) {  
                if(!node) return;  
                $$jitwidget.tips.hide();  
                $$jitwidget.rotate(node, 'animate', {  
                    duration: 1000,  
                    transition: $jit.Trans.Quart.easeInOut  
                });  
            })""")
    }
<div style="text-align:center; overflow:hidden; background-color:${w.backgroundcolor}; width: ${w.width}; height: ${w.height};" id="${w.compound_id}"></div>

HyperTree

A Hyperbolic Tree/Graph visualization.

See thejit API documentation on HyperTree:
http://thejit.org/static/v20/Docs/files/Visualizations/Hypertree-js.html
  • init_delay
    • value in milliseconds to delay js initialization and rendering
  • postInitJSCallback
    • javascript to run after client-side initialization of the widget
  • data
    • python data to be jsonified and passed to the widget
  • base_url
    • url for json data to be loaded into the widget
  • url_args
    • dict of keyword args for the json url
  • backgroundcolor
    • (string) background color of the jit container div
  • width
    • (string) widget width
  • height
    • (string) widget height
  • animate
    • (boolean) Whether to add animated transitions.
  • transition
    • javascript symbol of the type of jit transition to use. All the possible transitions are listed here: http://thejit.org/static/v20/Docs/files/Options/Options-Fx-js.html#Options.Fx
  • duration
    • (number) Duration of the animation in milliseconds.
  • fps
    • (number) Frames per second of the animation.
  • offset
    • (number) A number in the range [0, 1) that will be subtracted to each node position to make a more compact HyperTree. This will avoid placing nodes too far from each other when there is a selected node.
  • Canvas
    • (dict) Of the form Options.Canvas in the jit docs.
  • Label
    • (dict) Of the form Options.Label in the jit docs.
  • Tips
    • (dict) Of the form of Options.Tips in the jit docs.
  • Events
    • (dict) Of the form Options.Events in the jit docs.
  • deep_linking
    • (bool) Use 'deep-linking'. Only employed by *some* widgets. (AjaxRadialGraph, SQLARadialGraph). Warning: This will conflict with and probably break any other form of deep-linking you may have on the page. Disabled by default.
  • jsVariables
    • A dictionary of special jsVariables for substitution
  • Navigation
    • (dict) Panning and zooming options for Graph/Tree visualziations.
  • Node
    • (dict) Provides Node rendering options for Tree and Graph based visualizations.
  • Edge
    • (dict) Provides Edge rendering options for Tree and Graph based visualizations.
  • onBeforeCompute
    • (javascript) This method is called right before performing all computations and animations. The selected Graph.Node is passed as parameter.
  • onAfterCompute
    • (javascript) This method is triggered after all animations or computations ended.
  • onCreateLabel
    • (javascript) This method receives a new label DIV element as first parameter, and the corresponding Graph.Node as second parameter. This method will only be called once for each label. This method is useful when adding events or styles to the labels used by the JIT.
  • onPlaceLabel
    • (javascript) This method receives a label DIV element as first parameter and the corresponding Graph.Node as second parameter. This method is called each time a label has been placed in the visualization, for example at each step of an animation, and thus it allows you to update the labels properties, such as size or position. Note that onPlaceLabel will be triggered after updating the labels positions. That means that, for example, the left and top css properties are already updated to match the nodes positions. Width and height properties are not set however.
  • onBeforePlotNode
    • (javascript) This method is triggered right before plotting each Graph.Node. This method is useful for changing a node style right before plotting it.
  • onAfterPlotNode
    • (javascript) This method is triggered right after plotting each Graph.Node.
  • onBeforePlotLine
    • (javascript) This method is triggered right before plotting a Graph.Adjacence. This method is useful for adding some styles to a particular edge before being plotted.
  • onAfterPlotLine
    • (javascript) This method is triggered right after plotting a Graph.Adjacence.
  • constrained
    • (boolean) Whether to show the entire tree when loaded or just the number of levels specified by levelsToShow.
  • levelsToShow
    • (number) The number of levels to show for a subtree. This number is relative to the selected node.
class DemoHyperTree(HyperTree):
    data = HyperTreeJSONSampleData
    postInitJSCallback = JSSymbol(
        src="(function (jitwidget) { jitwidget.refresh(); })")
    backgroundcolor = '#0f0f0f'
    Node = {
        'dim' : 9,
        'color' : '#f00',
    }
    Edge = {
        'lineWidth' : 2,
        'color' : '#088',
    }
    onCreateLabel = JSSymbol(src="""
            ( function(domElement, node){
                  domElement.innerHTML = node.name;
                  $jit.util.addEvent(domElement, 'click', function () {
                      $$jitwidget.onClick(node.id);
                  });
            })""")
    onPlaceLabel = JSSymbol(src="""
            ( function(domElement, node){
                  var style = domElement.style;
                  style.display = '';
                  style.cursor = 'pointer';
                  if (node._depth <= 1) {
                      style.fontSize = '0.8em';
                      style.color = '#ddd';
                  } else if(node._depth == 2){
                      style.fontSize = '0.7em';
                      style.color = '#555';
                  } else {
                      style.display = 'none';
                  }
                  var left = parseInt(style.left);
                  var w = domElement.offsetWidth;
                  style.left = (left - w / 2) + 'px';
              })""")
<div style="text-align:center; overflow:hidden; background-color:${w.backgroundcolor}; width: ${w.width}; height: ${w.height};" id="${w.compound_id}"></div>

SpaceTree

A Tree layout with advanced contraction and expansion animations.

See thejit API documentation on SpaceTree:
http://thejit.org/static/v20/Docs/files/Visualizations/Spacetree-js.html
  • init_delay
    • value in milliseconds to delay js initialization and rendering
  • postInitJSCallback
    • javascript to run after client-side initialization of the widget
  • data
    • python data to be jsonified and passed to the widget
  • base_url
    • url for json data to be loaded into the widget
  • url_args
    • dict of keyword args for the json url
  • backgroundcolor
    • (string) background color of the jit container div
  • width
    • (string) widget width
  • height
    • (string) widget height
  • animate
    • (boolean) Whether to add animated transitions.
  • transition
    • (javascript) Javascript to perform transition.
  • duration
    • (number) Duration of the animation in milliseconds.
  • fps
    • (number) Frames per second of the animation.
  • offset
    • (number) Margin between the display and the canvas.
  • Canvas
    • (dict) Of the form Options.Canvas in the jit docs.
  • Label
    • (dict) Of the form Options.Label in the jit docs.
  • Tips
    • (dict) Of the form of Options.Tips in the jit docs.
  • Events
    • (dict) Of the form Options.Events in the jit docs.
  • deep_linking
    • (bool) Use 'deep-linking'. Only employed by *some* widgets. (AjaxRadialGraph, SQLARadialGraph). Warning: This will conflict with and probably break any other form of deep-linking you may have on the page. Disabled by default.
  • jsVariables
    • A dictionary of special jsVariables for substitution
  • Navigation
    • (dict) Panning and zooming options for Graph/Tree visualziations.
  • Node
    • (dict) Provides Node rendering options for Tree and Graph based visualizations.
  • Edge
    • (dict) Provides Edge rendering options for Tree and Graph based visualizations.
  • onBeforeCompute
    • (javascript) This method is called right before performing all computations and animations. The selected Graph.Node is passed as parameter.
  • onAfterCompute
    • (javascript) This method is triggered after all animations or computations ended.
  • onCreateLabel
    • (javascript) This method receives a new label DIV element as first parameter, and the corresponding Graph.Node as second parameter. This method will only be called once for each label. This method is useful when adding events or styles to the labels used by the JIT.
  • onPlaceLabel
    • (javascript) This method receives a label DIV element as first parameter and the corresponding Graph.Node as second parameter. This method is called each time a label has been placed in the visualization, for example at each step of an animation, and thus it allows you to update the labels properties, such as size or position. Note that onPlaceLabel will be triggered after updating the labels positions. That means that, for example, the left and top css properties are already updated to match the nodes positions. Width and height properties are not set however.
  • onBeforePlotNode
    • (javascript) This method is triggered right before plotting each Graph.Node. This method is useful for changing a node style right before plotting it.
  • onAfterPlotNode
    • (javascript) This method is triggered right after plotting each Graph.Node.
  • onBeforePlotLine
    • (javascript) This method is triggered right before plotting a Graph.Adjacence. This method is useful for adding some styles to a particular edge before being plotted.
  • onAfterPlotLine
    • (javascript) This method is triggered right after plotting a Graph.Adjacence.
  • constrained
    • (boolean) Whether to show the entire tree when loaded or just the number of levels specified by levelsToShow.
  • levelsToShow
    • (number) The number of levels to show for a subtree. This number is relative to the selected node.
  • levelDistance
    • (number) The distance between two consecutive levels of the tree.
  • offsetX
    • (number) The x-offset distance from theselected node to the center of the canvas.
  • offsetY
    • (number) The y-offset distance from theselected node to the center of the canvas.
class DemoSpaceTree(SpaceTree):
    data = SpaceTreeJSONSampleData
    postInitJSCallback = JSSymbol(
        src="""
        (function (jitwidget) {
            jitwidget.compute();
            jitwidget.geom.translate(
                new $jit.Complex(-200, 0), "current");
            jitwidget.onClick(jitwidget.root);
            jitwidget.refresh(); 
    })""")
    Navigation = {
        'enable' : True,
        'panning' : True,
    }
    Node = {
        'overridable' : True,
        'height' : 20,
        'width' : 60,
        'type' : 'rectangle',
        'color' : '#aaa',
    }
    Edge = {
        'type' : 'bezier',
        'overridable' : True
    }
    onCreateLabel = JSSymbol(src="""
        (function(label, node){
            label.id = node.id;            
            label.innerHTML = node.name;
            label.onclick = function(){
                $$jitwidget.onClick(node.id);
            };
            var style = label.style;
            style.width = 60 + 'px';
            style.height = 17 + 'px';            
            style.cursor = 'pointer';
            style.color = '#333';
            style.fontSize = '0.8em';
            style.textAlign= 'center';
            style.paddingTop = '3px';
        })""")
    onBeforePlotNode = JSSymbol(src="""
        (function(node){
            if (node.selected) {
                node.data.$color = \'#ff7\';
            }
            else {
                delete node.data.$color;
                if(!node.anySubnode(\'exist\')) {
                    var count = 0;
                    node.eachSubnode(function(n) { count++; });
                    node.data.$color = [
                                '#aaa', '#baa', '#caa', 
                                '#daa', '#eaa', '#faa'][count];                    
                }
            }
        })""")
    onBeforePlotLine = JSSymbol(src="""
        (function(adj){
            if (adj.nodeFrom.selected && adj.nodeTo.selected) {
                adj.data.$color = \'#eed\';
                adj.data.$lineWidth = 3;
            }
            else {
                delete adj.data.$color;
                delete adj.data.$lineWidth;
            }
        })""")
<div style="text-align:center; overflow:hidden; background-color:${w.backgroundcolor}; width: ${w.width}; height: ${w.height};" id="${w.compound_id}"></div>

Icicle

Icicle space filling visualization.

See thejit API documentation on Icicle:
http://thejit.org/static/v20/Docs/files/Visualizations/Icicle-js.html
  • init_delay
    • value in milliseconds to delay js initialization and rendering
  • postInitJSCallback
    • javascript to run after client-side initialization of the widget
  • data
    • python data to be jsonified and passed to the widget
  • base_url
    • url for json data to be loaded into the widget
  • url_args
    • dict of keyword args for the json url
  • backgroundcolor
    • (string) background color of the jit container div
  • width
    • (string) widget width
  • height
    • (string) widget height
  • animate
    • (boolean) Whether to add animated transitions.
  • transition
    • javascript symbol of the type of jit transition to use. All the possible transitions are listed here: http://thejit.org/static/v20/Docs/files/Options/Options-Fx-js.html#Options.Fx
  • duration
    • (number) Duration of the animation in milliseconds.
  • fps
    • (number) Frames per second of the animation.
  • offset
    • (number) Boxes offset
  • Canvas
    • (dict) Of the form Options.Canvas in the jit docs.
  • Label
    • (dict) Of the form Options.Label in the jit docs.
  • Tips
    • (dict) Of the form of Options.Tips in the jit docs.
  • Events
    • (dict) Of the form Options.Events in the jit docs.
  • deep_linking
    • (bool) Use 'deep-linking'. Only employed by *some* widgets. (AjaxRadialGraph, SQLARadialGraph). Warning: This will conflict with and probably break any other form of deep-linking you may have on the page. Disabled by default.
  • jsVariables
    • A dictionary of special jsVariables for substitution
  • Navigation
    • (dict) Panning and zooming options for Graph/Tree visualziations.
  • Node
    • (dict) Provides Node rendering options for Tree and Graph based visualizations.
  • Edge
    • (dict) Provides Edge rendering options for Tree and Graph based visualizations.
  • onBeforeCompute
    • (javascript) This method is called right before performing all computations and animations. The selected Graph.Node is passed as parameter.
  • onAfterCompute
    • (javascript) This method is triggered after all animations or computations ended.
  • onCreateLabel
    • (javascript) This method receives a new label DIV element as first parameter, and the corresponding Graph.Node as second parameter. This method will only be called once for each label. This method is useful when adding events or styles to the labels used by the JIT.
  • onPlaceLabel
    • (javascript) This method receives a label DIV element as first parameter and the corresponding Graph.Node as second parameter. This method is called each time a label has been placed in the visualization, for example at each step of an animation, and thus it allows you to update the labels properties, such as size or position. Note that onPlaceLabel will be triggered after updating the labels positions. That means that, for example, the left and top css properties are already updated to match the nodes positions. Width and height properties are not set however.
  • onBeforePlotNode
    • (javascript) This method is triggered right before plotting each Graph.Node. This method is useful for changing a node style right before plotting it.
  • onAfterPlotNode
    • (javascript) This method is triggered right after plotting each Graph.Node.
  • onBeforePlotLine
    • (javascript) This method is triggered right before plotting a Graph.Adjacence. This method is useful for adding some styles to a particular edge before being plotted.
  • onAfterPlotLine
    • (javascript) This method is triggered right after plotting a Graph.Adjacence.
  • constrained
    • (boolean) Whether to show the entire tree when loaded or just the number of levels specified by levelsToShow.
  • levelsToShow
    • (number) The number of levels to show for a subtree. This number is relative to the selected node.
class DemoIcicle(Icicle):
    data = IcicleJSONSampleData
    postInitJSCallback = JSSymbol(
        src="(function (jitwidget) { jitwidget.refresh(); })")
    Tips = {
        'enable': True,
        'type' : 'HTML',
        'offsetX' : 20,
        'offsetY' : 20,
        'onShow': JSSymbol(src="""
            (function(tip, node){
                var count = 0;
                node.eachSubnode(function(){
                  count++;
                }); // TODO -- working here.. quotes are broke.
                tip.innerHTML = '<div class="tip-title"><b>Name:</b> ' 
                    + node.name + '</div><div class=\\'tip-text\\'>' 
                    + count + ' children</div>';
            })"""),
    }
    Events = {
        'enable': True,
        'onMouseEnter': JSSymbol(src="""
            (function(node) {
                node.setData('border', '#33dddd');
                $$jitwidget.fx.plotNode(node, $$jitwidget.canvas);
                $$jitwidget.labels.plotLabel(
                                 $$jitwidget.canvas,
                                 node,
                                 $$jitwidget.controller);
            })"""),
        'onMouseLeave': JSSymbol(src="""
            (function(node) {
                node.removeData('border');
                $$jitwidget.fx.plot();
            })"""),
        'onClick': JSSymbol(src="""
            (function(node){
                if (node) {
                    $$jitwidget.tips.hide();
                    if($$jitwidget.events.hoveredNode){
                        this.onMouseLeave($$jitwidget.events.hoveredNode);
                    }
                    $$jitwidget.enter(node);
               }
            })"""),
        'onRightClick': JSSymbol(src="""
            (function(){
                $$jitwidget.tips.hide();
                if($$jitwidget.events.hoveredNode) {
                    this.onMouseLeave($$jitwidget.events.hoveredNode);
                }
                $$jitwidget.out();
            })"""),
    }
    onCreateLabel = JSSymbol(src="""
         (function(domElement, node){
              domElement.innerHTML = node.name;
              var style = domElement.style;
              style.fontSize = '0.9em';
              style.display = '';
              style.cursor = 'pointer';
              style.color = '#CCC';
              style.overflow = 'hidden';
        })""")
    onPlaceLabel = JSSymbol(src="""
            (function(domElement, node){
                  var style = domElement.style,
                      width = node.getData('width'),
                      height = node.getData('height');
                  if(width < 7 || height < 7) {
                    style.display = 'none';
                  } else {
                    style.display = '';
                    style.width = width + 'px';
                    style.height = height + 'px';
                  }
        })""")
<div style="text-align:center; overflow:hidden; background-color:${w.backgroundcolor}; width: ${w.width}; height: ${w.height};" id="${w.compound_id}"></div>

AjaxRadialGraph

A radial graph that pulls nodes on demand.

WARNING : the "Live Demo" sample is hosted on a very slow machine. When you click, be very patient.

Based off of the following demo:
http://demos.thejit.org/lpkgd/#
See thejit API documentation on RadialGraph for more information:
http://thejit.org/static/v20/Docs/files/Visualizations/RGraph-js.html
  • init_delay
    • value in milliseconds to delay js initialization and rendering
  • postInitJSCallback
    • javascript to run after client-side initialization of the widget
  • data
    • python data to be jsonified and passed to the widget
  • url_args
    • dict of keyword args for the json url
  • backgroundcolor
    • (string) background color of the jit container div
  • width
    • (string) widget width
  • height
    • (string) widget height
  • animate
    • (boolean) Whether to add animated transitions.
  • transition
    • javascript symbol of the type of jit transition to use. All the possible transitions are listed here: http://thejit.org/static/v20/Docs/files/Options/Options-Fx-js.html#Options.Fx
  • duration
    • (number) Duration of the animation in milliseconds.
  • fps
    • (number) Frames per second of the animation.
  • offset
    • (number) Margin between the display and the canvas.
  • Canvas
    • (dict) Of the form Options.Canvas in the jit docs.
  • Label
    • (dict) Of the form Options.Label in the jit docs.
  • Tips
    • (dict) Of the form of Options.Tips in the jit docs.
  • Events
    • (dict) Of the form Options.Events in the jit docs.
  • deep_linking
    • (bool) Use 'deep-linking'. Only employed by *some* widgets. (AjaxRadialGraph, SQLARadialGraph). Warning: This will conflict with and probably break any other form of deep-linking you may have on the page. Disabled by default.
  • jsVariables
    • A dictionary of special jsVariables for substitution
  • Navigation
    • (dict) Panning and zooming options for Graph/Tree visualziations.
  • Node
    • (dict) Provides Node rendering options for Tree and Graph based visualizations.
  • Edge
    • (dict) Provides Edge rendering options for Tree and Graph based visualizations.
  • onBeforeCompute
    • (javascript) This method is called right before performing all computations and animations. The selected Graph.Node is passed as parameter.
  • onAfterCompute
    • (javascript) This method is triggered after all animations or computations ended.
  • onCreateLabel
    • (javascript) This method receives a new label DIV element as first parameter, and the corresponding Graph.Node as second parameter. This method will only be called once for each label. This method is useful when adding events or styles to the labels used by the JIT.
  • onPlaceLabel
    • (javascript) This method receives a label DIV element as first parameter and the corresponding Graph.Node as second parameter. This method is called each time a label has been placed in the visualization, for example at each step of an animation, and thus it allows you to update the labels properties, such as size or position. Note that onPlaceLabel will be triggered after updating the labels positions. That means that, for example, the left and top css properties are already updated to match the nodes positions. Width and height properties are not set however.
  • onBeforePlotNode
    • (javascript) This method is triggered right before plotting each Graph.Node. This method is useful for changing a node style right before plotting it.
  • onAfterPlotNode
    • (javascript) This method is triggered right after plotting each Graph.Node.
  • onBeforePlotLine
    • (javascript) This method is triggered right before plotting a Graph.Adjacence. This method is useful for adding some styles to a particular edge before being plotted.
  • onAfterPlotLine
    • (javascript) This method is triggered right after plotting a Graph.Adjacence.
  • background
    • (dict) see sample.
  • levelDistance
    • (number) Distance between levels
  • preprocessTree
    • TODO
  • requestGraph
    • TODO

SQLARadialGraph
A radial graph built automatically from sqlalchemy objects
  • init_delay
    • value in milliseconds to delay js initialization and rendering
  • postInitJSCallback
    • javascript to run after client-side initialization of the widget
  • data
    • python data to be jsonified and passed to the widget
  • url_args
    • dict of keyword args for the json url
  • backgroundcolor
    • (string) background color of the jit container div
  • width
    • (string) widget width
  • height
    • (string) widget height
  • animate
    • (boolean) Whether to add animated transitions.
  • transition
    • javascript symbol of the type of jit transition to use. All the possible transitions are listed here: http://thejit.org/static/v20/Docs/files/Options/Options-Fx-js.html#Options.Fx
  • duration
    • (number) Duration of the animation in milliseconds.
  • fps
    • (number) Frames per second of the animation.
  • offset
    • (number) Margin between the display and the canvas.
  • Canvas
    • (dict) Of the form Options.Canvas in the jit docs.
  • Label
    • (dict) Of the form Options.Label in the jit docs.
  • Tips
    • (dict) Of the form of Options.Tips in the jit docs.
  • Events
    • (dict) Of the form Options.Events in the jit docs.
  • deep_linking
    • (bool) Use 'deep-linking'. Only employed by *some* widgets. (AjaxRadialGraph, SQLARadialGraph). Warning: This will conflict with and probably break any other form of deep-linking you may have on the page. Disabled by default.
  • jsVariables
    • A dictionary of special jsVariables for substitution
  • Navigation
    • (dict) Panning and zooming options for Graph/Tree visualziations.
  • Node
    • (dict) Provides Node rendering options for Tree and Graph based visualizations.
  • Edge
    • (dict) Provides Edge rendering options for Tree and Graph based visualizations.
  • onBeforeCompute
    • (javascript) This method is called right before performing all computations and animations. The selected Graph.Node is passed as parameter.
  • onAfterCompute
    • (javascript) This method is triggered after all animations or computations ended.
  • onCreateLabel
    • (javascript) This method receives a new label DIV element as first parameter, and the corresponding Graph.Node as second parameter. This method will only be called once for each label. This method is useful when adding events or styles to the labels used by the JIT.
  • onPlaceLabel
    • (javascript) This method receives a label DIV element as first parameter and the corresponding Graph.Node as second parameter. This method is called each time a label has been placed in the visualization, for example at each step of an animation, and thus it allows you to update the labels properties, such as size or position. Note that onPlaceLabel will be triggered after updating the labels positions. That means that, for example, the left and top css properties are already updated to match the nodes positions. Width and height properties are not set however.
  • onBeforePlotNode
    • (javascript) This method is triggered right before plotting each Graph.Node. This method is useful for changing a node style right before plotting it.
  • onAfterPlotNode
    • (javascript) This method is triggered right after plotting each Graph.Node.
  • onBeforePlotLine
    • (javascript) This method is triggered right before plotting a Graph.Adjacence. This method is useful for adding some styles to a particular edge before being plotted.
  • onAfterPlotLine
    • (javascript) This method is triggered right after plotting a Graph.Adjacence.
  • background
    • (dict) see sample.
  • levelDistance
    • (number) Distance between levels
  • preprocessTree
    • TODO
  • requestGraph
    • TODO
  • excluded_columns
    • list of names of columns to be excluded from the visualization
  • show_relations
    • (bool) show relationships?
  • show_empty_relations
    • (bool) show empty relationships?
  • show_attributes
    • (bool) show attributes?
  • imply_relations
    • (bool) show implied relationship nodes?
  • auto_labels
    • (bool) Auto add relationship metadata to labels
  • alphabetize_relations
    • (str or int) Sub-package relationship items alphabetically. If the value is a `str`, it must be either 'always', or 'never'. If the value is an `int`, it is taken as a threshold where if and only if the number of items in the relation is greater than the threshold value will the relations then be branched out in alphabetically organized sub trees. The `imply_relations` param overrides this! The two params are not compatible.
  • alphabetize_minimal
    • (bool) Trim away alphabetic entries that have no children. True or False. Make the tree easier to see. Only useful in conjunction with `alphabetize_relations`.
  • depth
    • (int) number of levels of relations to show.
class DemoSQLARadialGraph(SQLARadialGraph):
    entities = [Person, Pet]
    excluded_columns = ['id', 'owner_id']
    # Some initial target
    rootObject = Person.query.first()
    base_url = '/db_radialgraph_demo/'
    background = { 'CanvasStyles':{ 'strokeStyle' : '#C73B0B' } }
    backgroundcolor = '#350608'
    Node = {
        'color' : '#C73B0B',
    }
    Edge = {
        'color': '#F2C545',
        'lineWidth':1.5,
    }
<div style="text-align:center; overflow:hidden; background-color:${w.backgroundcolor}; width: ${w.width}; height: ${w.height};" id="${w.compound_id}"></div>