Tableau de bord en J2EE

Version imprimable

10/05/2015, 14h28
zakips

Tableau de bord en J2EE

Bonjour,

je suis entrain de réaliser une application web(J2E) pour afficher le tableau de bord de service commercial.
mon problème est que je connais pas un outil qui affiche les graphes en html, et que je peut le paramétrer facilement via les données qui existes dans la BD

et merci.
10/05/2015, 15h35
tchize_

Highcharts

http://www.highcharts.com/demo
10/05/2015, 15h50
zakips

merci tchize_

comment je peux l'intégrer avec JSP(en général avec JAVA EE )
10/05/2015, 15h58
tchize_

c'est du javascript, regarde les demos.

quand je met ce code dans la jsp il affiche rien

Code:

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
$(function () {
    $('#container').highcharts({
 
        chart: {
            type: 'gauge',
            plotBorderWidth: 1,
            plotBackgroundColor: {
                linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
                stops: [
                    [0, '#FFF4C6'],
                    [0.3, '#FFFFFF'],
                    [1, '#FFF4C6']
                ]
            },
            plotBackgroundImage: null,
            height: 200
        },
 
        title: {
            text: 'VU meter'
        },
 
        pane: [{
            startAngle: -45,
            endAngle: 45,
            background: null,
            center: ['25%', '145%'],
            size: 300
        }, {
            startAngle: -45,
            endAngle: 45,
            background: null,
            center: ['75%', '145%'],
            size: 300
        }],
 
        yAxis: [{
            min: -20,
            max: 6,
            minorTickPosition: 'outside',
            tickPosition: 'outside',
            labels: {
                rotation: 'auto',
                distance: 20
            },
            plotBands: [{
                from: 0,
                to: 6,
                color: '#C02316',
                innerRadius: '100%',
                outerRadius: '105%'
            }],
            pane: 0,
            title: {
                text: 'VU<br/><span style="font-size:8px">Channel A</span>',
                y: -40
            }
        }, {
            min: -20,
            max: 6,
            minorTickPosition: 'outside',
            tickPosition: 'outside',
            labels: {
                rotation: 'auto',
                distance: 20
            },
            plotBands: [{
                from: 0,
                to: 6,
                color: '#C02316',
                innerRadius: '100%',
                outerRadius: '105%'
            }],
            pane: 1,
            title: {
                text: 'VU<br/><span style="font-size:8px">Channel B</span>',
                y: -40
            }
        }],
 
        plotOptions: {
            gauge: {
                dataLabels: {
                    enabled: false
                },
                dial: {
                    radius: '100%'
                }
            }
        },
 
 
        series: [{
            data: [-20],
            yAxis: 0
        }, {
            data: [-20],
            yAxis: 1
        }]
 
    },
 
    // Let the music play
    function (chart) {
        setInterval(function () {
            if (chart.series) { // the chart may be destroyed
                var left = chart.series[0].points[0],
                    right = chart.series[1].points[0],
                    leftVal,
                    rightVal,
                    inc = (Math.random() - 0.5) * 3;
 
                leftVal =  left.y + inc;
                rightVal = leftVal + inc / 3;
                if (leftVal < -20 || leftVal > 6) {
                    leftVal = left.y - inc;
                }
                if (rightVal < -20 || rightVal > 6) {
                    rightVal = leftVal;
                }
 
                left.update(leftVal, false);
                right.update(rightVal, false);
                chart.redraw();
            }
        }, 500);
 
    });
});

10/05/2015, 19h52
tchize_

t'as quoi comme erreur dans ta console javascript.

juste il affiche rien, et voilà la page jsp

Code:

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
130
131
132
133
134
135
136
137
138
139
140
141
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <body>
 
  <script type="text/javascript">
  $(function () {
	    $('#container').highcharts({
 
	        chart: {
	            type: 'gauge',
	            plotBorderWidth: 1,
	            plotBackgroundColor: {
	                linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
	                stops: [
	                    [0, '#FFF4C6'],
	                    [0.3, '#FFFFFF'],
	                    [1, '#FFF4C6']
	                ]
	            },
	            plotBackgroundImage: null,
	            height: 200
	        },
 
	        title: {
	            text: 'VU meter'
	        },
 
	        pane: [{
	            startAngle: -45,
	            endAngle: 45,
	            background: null,
	            center: ['25%', '145%'],
	            size: 300
	        }, {
	            startAngle: -45,
	            endAngle: 45,
	            background: null,
	            center: ['75%', '145%'],
	            size: 300
	        }],
 
	        yAxis: [{
	            min: -20,
	            max: 6,
	            minorTickPosition: 'outside',
	            tickPosition: 'outside',
	            labels: {
	                rotation: 'auto',
	                distance: 20
	            },
	            plotBands: [{
	                from: 0,
	                to: 6,
	                color: '#C02316',
	                innerRadius: '100%',
	                outerRadius: '105%'
	            }],
	            pane: 0,
	            title: {
	                text: 'VU<br/><span style="font-size:8px">Channel A</span>',
	                y: -40
	            }
	        }, {
	            min: -20,
	            max: 6,
	            minorTickPosition: 'outside',
	            tickPosition: 'outside',
	            labels: {
	                rotation: 'auto',
	                distance: 20
	            },
	            plotBands: [{
	                from: 0,
	                to: 6,
	                color: '#C02316',
	                innerRadius: '100%',
	                outerRadius: '105%'
	            }],
	            pane: 1,
	            title: {
	                text: 'VU<br/><span style="font-size:8px">Channel B</span>',
	                y: -40
	            }
	        }],
 
	        plotOptions: {
	            gauge: {
	                dataLabels: {
	                    enabled: false
	                },
	                dial: {
	                    radius: '100%'
	                }
	            }
	        },
 
 
	        series: [{
	            data: [-20],
	            yAxis: 0
	        }, {
	            data: [-20],
	            yAxis: 1
	        }]
 
	    },
 
	    // Let the music play
	    function (chart) {
	        setInterval(function () {
	            if (chart.series) { // the chart may be destroyed
	                var left = chart.series[0].points[0],
	                    right = chart.series[1].points[0],
	                    leftVal,
	                    rightVal,
	                    inc = (Math.random() - 0.5) * 3;
 
	                leftVal =  left.y + inc;
	                rightVal = leftVal + inc / 3;
	                if (leftVal < -20 || leftVal > 6) {
	                    leftVal = left.y - inc;
	                }
	                if (rightVal < -20 || rightVal > 6) {
	                    rightVal = leftVal;
	                }
 
	                left.update(leftVal, false);
	                right.update(rightVal, false);
	                chart.redraw();
	            }
	        }, 500);
 
	    });
	});
  </script>
 
</body>
</html>

10/05/2015, 20h26
tchize_

Ta console javascript devrait contenir des messages d'erreurs, en l'occurence ici "reference error, $ is not defined" puisque tu as oublié d'inclure les librairies javascript que tu utilise dans ta page...

avec ce code même problème

Code:

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
130
131
132
133
134
135
136
137
138
139
140
141
142
143
 
<html>
<head>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/highcharts-more.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
</head>
  <body>
 
  <script type="text/javascript">
  $(function () {
	    $('#container').highcharts({
 
	        chart: {
	            type: 'gauge',
	            plotBorderWidth: 1,
	            plotBackgroundColor: {
	                linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
	                stops: [
	                    [0, '#FFF4C6'],
	                    [0.3, '#FFFFFF'],
	                    [1, '#FFF4C6']
	                ]
	            },
	            plotBackgroundImage: null,
	            height: 200
	        },
 
	        title: {
	            text: 'VU meter'
	        },
 
	        pane: [{
	            startAngle: -45,
	            endAngle: 45,
	            background: null,
	            center: ['25%', '145%'],
	            size: 300
	        }, {
	            startAngle: -45,
	            endAngle: 45,
	            background: null,
	            center: ['75%', '145%'],
	            size: 300
	        }],
 
	        yAxis: [{
	            min: -20,
	            max: 6,
	            minorTickPosition: 'outside',
	            tickPosition: 'outside',
	            labels: {
	                rotation: 'auto',
	                distance: 20
	            },
	            plotBands: [{
	                from: 0,
	                to: 6,
	                color: '#C02316',
	                innerRadius: '100%',
	                outerRadius: '105%'
	            }],
	            pane: 0,
	            title: {
	                text: 'VU<br/><span style="font-size:8px">Channel A</span>',
	                y: -40
	            }
	        }, {
	            min: -20,
	            max: 6,
	            minorTickPosition: 'outside',
	            tickPosition: 'outside',
	            labels: {
	                rotation: 'auto',
	                distance: 20
	            },
	            plotBands: [{
	                from: 0,
	                to: 6,
	                color: '#C02316',
	                innerRadius: '100%',
	                outerRadius: '105%'
	            }],
	            pane: 1,
	            title: {
	                text: 'VU<br/><span style="font-size:8px">Channel B</span>',
	                y: -40
	            }
	        }],
 
	        plotOptions: {
	            gauge: {
	                dataLabels: {
	                    enabled: false
	                },
	                dial: {
	                    radius: '100%'
	                }
	            }
	        },
 
 
	        series: [{
	            data: [-20],
	            yAxis: 0
	        }, {
	            data: [-20],
	            yAxis: 1
	        }]
 
	    },
 
	    // Let the music play
	    function (chart) {
	        setInterval(function () {
	            if (chart.series) { // the chart may be destroyed
	                var left = chart.series[0].points[0],
	                    right = chart.series[1].points[0],
	                    leftVal,
	                    rightVal,
	                    inc = (Math.random() - 0.5) * 3;
 
	                leftVal =  left.y + inc;
	                rightVal = leftVal + inc / 3;
	                if (leftVal < -20 || leftVal > 6) {
	                    leftVal = left.y - inc;
	                }
	                if (rightVal < -20 || rightVal > 6) {
	                    rightVal = leftVal;
	                }
 
	                left.update(leftVal, false);
	                right.update(rightVal, false);
	                chart.redraw();
	            }
	        }, 500);
 
	    });
	});
  </script>
 
</body>
</html>

10/05/2015, 21h02
tchize_

messages d'erreurs stp.
10/05/2015, 21h09
zakips

j’exécute la page dans eclips sous le serveur apache tomcat, il affiche une page vide sans aucune erreurs
10/05/2015, 21h39
tchize_

affiche ta console javascript dans ton browser.

donc voilà les erreurs

Code:

1
2
3
4
5
6
 
VK. Startup (background is ready)
highcharts.js:306 Uncaught TypeError: Cannot read property 'addEvent' of undefined(anonymous function) @ highcharts.js:306(anonymous function) @ highcharts.js:308(anonymous function) @ highcharts.js:324
highcharts-more.js:8 Uncaught TypeError: k.getOptions is not a function(anonymous function) @ highcharts-more.js:8(anonymous function) @ highcharts-more.js:54
exporting.js:9 Uncaught TypeError: Cannot read property 'fireEvent' of undefined(anonymous function) @ exporting.js:9(anonymous function) @ exporting.js:23
TBStock:12 Uncaught ReferenceError: $ is not defined

10/05/2015, 22h26
tchize_

Code:

TBStock:12 Uncaught ReferenceError: $ is not defined

Il te manque toujours une librairie javascript qui définisse $, typiquement jquery

http://www.highcharts.com/docs/getti...d/installation
10/05/2015, 22h29
zakips

merci beaucoup monsieur tchiz_,il marche très très bien.