-
Notifications
You must be signed in to change notification settings - Fork 0
/
example1.js
121 lines (110 loc) · 4.1 KB
/
example1.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
var labelType, useGradients, nativeTextSupport, animate;
(function () {
var ua = navigator.userAgent,
iStuff = ua.match(/iPhone/i) || ua.match(/iPad/i),
typeOfCanvas = typeof HTMLCanvasElement,
nativeCanvasSupport = (typeOfCanvas == 'object' || typeOfCanvas == 'function'),
textSupport = nativeCanvasSupport && (typeof document.createElement('canvas').getContext('2d').fillText == 'function');
//I'm setting this based on the fact that ExCanvas provides text support for IE
//and that as of today iPhone/iPad current text support is lame
labelType = (!nativeCanvasSupport || (textSupport && !iStuff)) ? 'Native' : 'HTML';
nativeTextSupport = labelType == 'Native';
useGradients = nativeCanvasSupport;
animate = !(iStuff || !nativeCanvasSupport);
})();
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';
}
};
var mydata;
function init() {
//init data
$.ajax({
url: 'ajax/_state.php',
type: 'GET',
dataType: 'jsonp',
dataCharset: 'jsonp',
success: function (data) {
var json2 = {
'values': [{
'label': 'Sept',
'values': [10, 40, 15, 7]
}, {
'label': 'Oct',
'values': [30, 40, 45, 9]
}, {
'label': 'Nov',
'values': [55, 30, 34, 26]
}]
};
var json = eval(data[0]);
//init BarChart
var barChart = new $jit.BarChart({
//id of the visualization container
injectInto: 'infovis',
//whether to add animations
animate: true,
//horizontal or vertical barcharts
orientation: 'vertical',
//bars separation
barsOffset: 20,
//visualization offset
Margin: {
top: 5,
left: 5,
right: 5,
bottom: 5
},
//labels offset position
labelOffset: 5,
//bars style
type: useGradients ? 'stacked:gradient' : 'stacked',
//whether to show the aggregation of the values
showAggregates: true,
//whether to show the labels for the bars
showLabels: true,
//labels style
Label: {
type: labelType, //Native or HTML
size: 13,
family: 'Arial',
color: 'white'
},
//add tooltips
Tips: {
enable: true,
onShow: function (tip, elem) {
tip.innerHTML = "<b>" + elem.name + "</b>: " + elem.value;
}
}
});
//load JSON data.
barChart.loadJSON(json);
//end
var list = $jit.id('id-list'),
//button = $jit.id('update'),
orn = $jit.id('switch-orientation');
//update json on click 'Update Data'
/*
$jit.util.addEvent(button, 'click', function () {
var util = $jit.util;
if (util.hasClass(button, 'gray')) return;
util.removeClass(button, 'white');
util.addClass(button, 'gray');
barChart.updateJSON(json2);
});
*/
//dynamically add legend to list
var legend = barChart.getLegend(),
listItems = [];
for (var name in legend) {
listItems.push('<div class=\'query-color\' style=\'background-color:' + legend[name] + '\'> </div>' + name);
}
list.innerHTML = '<li>' + listItems.join('</li><li>') + '</li>';
}
});
}