27 |
28 |
29 |
Code for $title
30 |
31 | These are ordered fragments for the
$title example code.
32 | I trimmed parts that seemed uninteresting and that are not related to the library code.
33 | You can still see the full code
here. Or
go back to the example.
34 |
35 |
36 |
37 | $for elem in code:
38 |
$elem['name']
39 | $if elem['name'] == 'data':
40 |
41 | $else:
42 |
43 |
44 | $elem['code']
45 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |
--------------------------------------------------------------------------------
/Tests/Spacetree/test2.js:
--------------------------------------------------------------------------------
1 | function init(){
2 | Feeder.p.color = false;
3 | var json = Feeder.makeTree();
4 | //Create a new ST instance
5 | st = new $jit.ST({
6 | 'injectInto': 'infovis',
7 |
8 | Node: {
9 | overridable: true
10 | },
11 | Edge: {
12 | overridable: true
13 | },
14 |
15 | onBeforeCompute: function(node){
16 | Log.write("loading " + node.name);
17 | },
18 |
19 | onAfterCompute: function(node){
20 | Log.write("done");
21 | },
22 |
23 | onCreateLabel: function(label, node){
24 | label.id = node.id;
25 | label.style.cursor = 'pointer';
26 | label.innerHTML = node.name;
27 | label.onclick = function() {
28 | st.onClick(node.id);
29 | };
30 | }
31 | });
32 | //load json data
33 | st.loadJSON(json);
34 |
35 | //compute node positions and layout
36 | st.compute();
37 | //optional: make a translation of the tree
38 | st.geom.translate(new $jit.Complex(-200, 0), "current");
39 | //Emulate a click on the root node.
40 | // Tree.Plot.plot(st.tree, st.canvas);
41 | st.onClick(st.root);
42 |
43 | var animate = document.getElementById('animate');
44 | var button = document.getElementById('addSubtree');
45 | button.onclick = function() {
46 | var type = animate.checked? "animate" : "replot";
47 | var minitree = Feeder.makeTree({
48 | idPrefix: "node" + new Date().getTime(),
49 | levelStart: 0,
50 | levelEnd: 3,
51 | maxChildrenPerNode: 6,
52 | minChildrenPerNode: 1,
53 | counter: 0
54 | });
55 | minitree.id = "node13"; //02 works too
56 | st.addSubtree(minitree, type, {
57 | onComplete: function(){
58 | //nothing
59 | }
60 | });
61 | };
62 | }
63 |
--------------------------------------------------------------------------------
/Tests/PieChart/test2.js:
--------------------------------------------------------------------------------
1 | function init(){
2 | //init data
3 | var json = {
4 | //'color': "#416D9C",
5 | 'label': 'label A',
6 | 'values': [
7 | {
8 | 'label': 'date A',
9 | 'values': 20
10 | },
11 | {
12 | 'label': 'date B',
13 | 'values': 30
14 | },
15 | {
16 | 'label': 'date E',
17 | 'values': 38
18 | },
19 | {
20 | 'label': 'date F',
21 | 'values': 58
22 | },
23 | {
24 | 'label': 'date D',
25 | 'values': 55
26 | },
27 | {
28 | 'label': 'date C',
29 | 'values': 26
30 | }]
31 | };
32 | var json2 = {
33 | 'values': [
34 | {
35 | 'label': 'date A',
36 | 'values': 70
37 | },
38 | {
39 | 'label': 'date B',
40 | 'values': 30
41 | },
42 | {
43 | 'label': 'date D',
44 | 'values': 25
45 | },
46 | {
47 | 'label': 'date C',
48 | 'values': 46
49 | }]
50 | };
51 | //end
52 | var infovis = document.getElementById('infovis');
53 | //init PieChart
54 | pie = new $jit.PieChart({
55 | injectInto: 'infovis',
56 | animate: true,
57 | offset: 60,
58 | sliceOffset: 5,
59 | labelOffset: 20,
60 | type:'stacked:gradient',
61 | updateHeights:false,
62 | showLabels:true,
63 | Label: {
64 | size: 13,
65 | family: 'Arial',
66 | color: 'white'
67 | },
68 | Tips: {
69 | 'enable': true,
70 | 'onShow': function(tip, elem) {
71 | tip.innerHTML = "
" + elem.label + ": " + elem.value;
72 | }
73 | }
74 | });
75 |
76 | //load JSON data.
77 | pie.loadJSON(json);
78 |
79 | setTimeout(function() {
80 | pie.updateJSON(json2);
81 | }, 3000);
82 | }
--------------------------------------------------------------------------------
/Source/Options/Options.Tips.js:
--------------------------------------------------------------------------------
1 | /*
2 | * File: Options.Tips.js
3 | *
4 | */
5 |
6 | /*
7 | Object: Options.Tips
8 |
9 | Tips options
10 |
11 | Syntax:
12 |
13 | (start code js)
14 | Options.Tips = {
15 | enable: false,
16 | type: 'auto',
17 | offsetX: 20,
18 | offsetY: 20,
19 | onShow: $.empty,
20 | onHide: $.empty
21 | };
22 | (end code)
23 |
24 | Example:
25 |
26 | (start code js)
27 | var viz = new $jit.Viz({
28 | Tips: {
29 | enable: true,
30 | type: 'Native',
31 | offsetX: 10,
32 | offsetY: 10,
33 | onShow: function(tip, node) {
34 | tip.innerHTML = node.name;
35 | }
36 | }
37 | });
38 | (end code)
39 |
40 | Parameters:
41 |
42 | enable - (boolean) Default's *false*. If *true*, a tooltip will be shown when a node is hovered. The tooltip is a div DOM element having "tip" as CSS class.
43 | type - (string) Default's *auto*. Defines where to attach the MouseEnter/Leave tooltip events. Possible values are 'Native' to attach them to the canvas or 'HTML' to attach them to DOM label elements (if defined). 'auto' sets this property to the value of
's *type* property.
44 | offsetX - (number) Default's *20*. An offset added to the current tooltip x-position (which is the same as the current mouse position). Default's 20.
45 | offsetY - (number) Default's *20*. An offset added to the current tooltip y-position (which is the same as the current mouse position). Default's 20.
46 | onShow(tip, node) - This callack is used right before displaying a tooltip. The first formal parameter is the tip itself (which is a DivElement). The second parameter may be a for graph based visualizations or an object with label, value properties for charts.
47 | onHide() - This callack is used when hiding a tooltip.
48 |
49 | */
50 | Options.Tips = {
51 | $extend: false,
52 |
53 | enable: false,
54 | type: 'auto',
55 | offsetX: 20,
56 | offsetY: 20,
57 | force: false,
58 | onShow: $.empty,
59 | onHide: $.empty
60 | };
61 |
--------------------------------------------------------------------------------
/Source/Options/Options.Canvas.js:
--------------------------------------------------------------------------------
1 | /*
2 | * File: Options.Canvas.js
3 | *
4 | */
5 |
6 | /*
7 | Object: Options.Canvas
8 |
9 | These are Canvas general options, like where to append it in the DOM, its dimensions, background,
10 | and other more advanced options.
11 |
12 | Syntax:
13 |
14 | (start code js)
15 |
16 | Options.Canvas = {
17 | injectInto: 'id',
18 | type: '2D', //'3D'
19 | width: false,
20 | height: false,
21 | useCanvas: false,
22 | withLabels: true,
23 | background: false
24 | };
25 | (end code)
26 |
27 | Example:
28 |
29 | (start code js)
30 | var viz = new $jit.Viz({
31 | injectInto: 'someContainerId',
32 | width: 500,
33 | height: 700
34 | });
35 | (end code)
36 |
37 | Parameters:
38 |
39 | injectInto - *required* (string|element) The id of the DOM container for the visualization. It can also be an Element provided that it has an id.
40 | type - (string) Context type. Default's 2D but can be 3D for webGL enabled browsers.
41 | width - (number) Default's to the *container's offsetWidth*. The width of the canvas.
42 | height - (number) Default's to the *container's offsetHeight*. The height of the canvas.
43 | useCanvas - (boolean|object) Default's *false*. You can pass another