render: function(data) {
window.json = data[0];
- var v = E([], [
+ var v = E('div', {'class': 'cbi-map'}, [
E('h2', {'style': "height: 40px"}, [ _('DSL line spectrum') ]),
- E('p', {}, _('Graphs below show Signal-to-noise ratio, Bit allocation, Quiet line noise and Channel characteristics function (HLOG) per sub-carrier.')),
- E('div', {'style': "height: 360px; width: 1024px"},
- E('canvas', {
- 'id': 'dbChart',
- 'height': 360,
- 'width': 1024},
- ["chart"])
- ),
- E('div', {'style': "height: 360px; width:1024px"},
- E('canvas', {
- 'id': 'bitsChart',
- 'height': 360,
- 'width': 1024},
- ["chart2"])
- ),
- E('div', {'style': "height: 360px; width:1024px"},
- E('canvas', {
- 'id': 'qlnChart',
- 'height': 360,
- 'width': 1024},
- ["chart2"])
- ),
- E('div', {'style': "height: 360px; width:1024px"},
- E('canvas', {
- 'id': 'hlogChart',
- 'height': 360,
- 'width': 1024},
- ["chart2"])
+ E('div', {'class': 'cbi-map-descr'}, _('The following diagrams show graphically prepared DSL characteristics that are important for evaluating the DSL connection.')),
+
+ E('div', {'class': 'cbi-section'}, [
+ E('div', {'style': "height: 360px; width: 1024px"},
+ E('canvas', {
+ 'id': 'dbChart',
+ 'height': 360,
+ 'width': 1024},
+ ["chart"])
+ ),
+ E('div', {'class': 'cbi-section-descr', 'style': 'text-align:center'}, _('The graph shows the signal to noise ratio (SNR) per subcarrier in the uplink and downlink direction')),
+ ]),
+ E('div', {'class': 'cbi-section'}, [
+ E('div', {'style': "height: 360px; width:1024px"},
+ E('canvas', {
+ 'id': 'bitsChart',
+ 'height': 360,
+ 'width': 1024},
+ ["chart2"])
+ ),
+ E('div', {'class': 'cbi-section-descr', 'style': 'text-align:center'}, _('The graph shows th amount of bits actually allocated per subcarrier in the uplink and downlink direction')),
+ ]),
+ E('div', {'class': 'cbi-section'}, [
+ E('div', {'style': "height: 360px; width:1024px"},
+ E('canvas', {
+ 'id': 'qlnChart',
+ 'height': 360,
+ 'width': 1024},
+ ["chart2"])
+ ),
+ E('div', {'class': 'cbi-section-descr', 'style': 'text-align:center'}, _('The diagram shows the quiet line noise (QLN) per subcarrier in uplink and downlink direction')),
+ ]),
+ E('div', {'class': 'cbi-section'}, [
+ E('div', {'style': "height: 360px; width:1024px"},
+ E('canvas', {
+ 'id': 'hlogChart',
+ 'height': 360,
+ 'width': 1024},
+ ["chart2"])
),
+ E('div', {'class': 'cbi-section-descr', 'style': 'text-align:center'}, _('The diagram shows the Channel Characteristics Function (HLOG) per subcarrier in uplink and downlink direction')),
+ ]),
E('script', {'src':'/luci-static/resources/view/status/dsl/graph.js'}, {})
]);