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
122
123
124
125
126
127
128
129
|
// google charts
NETDATA.googleInitialize = function (callback) {
if (typeof netdataNoGoogleCharts === 'undefined' || !netdataNoGoogleCharts) {
$.ajax({
url: NETDATA.google_js,
cache: true,
dataType: "script",
xhrFields: {withCredentials: true} // required for the cookie
})
.done(function () {
NETDATA.registerChartLibrary('google', NETDATA.google_js);
google.load('visualization', '1.1', {
'packages': ['corechart', 'controls'],
'callback': callback
});
})
.fail(function () {
NETDATA.chartLibraries.google.enabled = false;
NETDATA.error(100, NETDATA.google_js);
if (typeof callback === "function") {
return callback();
}
});
} else {
NETDATA.chartLibraries.google.enabled = false;
if (typeof callback === "function") {
return callback();
}
}
};
NETDATA.googleChartUpdate = function (state, data) {
let datatable = new google.visualization.DataTable(data.result);
state.google_instance.draw(datatable, state.google_options);
return true;
};
NETDATA.googleChartCreate = function (state, data) {
let datatable = new google.visualization.DataTable(data.result);
state.google_options = {
colors: state.chartColors(),
// do not set width, height - the chart resizes itself
//width: state.chartWidth(),
//height: state.chartHeight(),
lineWidth: 1,
title: state.title,
fontSize: 11,
hAxis: {
// title: "Time of Day",
// format:'HH:mm:ss',
viewWindowMode: 'maximized',
slantedText: false,
format: 'HH:mm:ss',
textStyle: {
fontSize: 9
},
gridlines: {
color: '#EEE'
}
},
vAxis: {
title: state.units_current,
viewWindowMode: 'pretty',
minValue: -0.1,
maxValue: 0.1,
direction: 1,
textStyle: {
fontSize: 9
},
gridlines: {
color: '#EEE'
}
},
chartArea: {
width: '65%',
height: '80%'
},
focusTarget: 'category',
annotation: {
'1': {
style: 'line'
}
},
pointsVisible: 0,
titlePosition: 'out',
titleTextStyle: {
fontSize: 11
},
tooltip: {
isHtml: false,
ignoreBounds: true,
textStyle: {
fontSize: 9
}
},
curveType: 'function',
areaOpacity: 0.3,
isStacked: false
};
switch (state.chart.chart_type) {
case "area":
state.google_options.vAxis.viewWindowMode = 'maximized';
state.google_options.areaOpacity = NETDATA.options.current.color_fill_opacity_area;
state.google_instance = new google.visualization.AreaChart(state.element_chart);
break;
case "stacked":
state.google_options.isStacked = true;
state.google_options.areaOpacity = NETDATA.options.current.color_fill_opacity_stacked;
state.google_options.vAxis.viewWindowMode = 'maximized';
state.google_options.vAxis.minValue = null;
state.google_options.vAxis.maxValue = null;
state.google_instance = new google.visualization.AreaChart(state.element_chart);
break;
default:
case "line":
state.google_options.lineWidth = 2;
state.google_instance = new google.visualization.LineChart(state.element_chart);
break;
}
state.google_instance.draw(datatable, state.google_options);
return true;
};
|
