Tableau de bord en J2EE

**zakips** · 10/05/2015, 14h28

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.

**tchize_** · 10/05/2015, 15h35

Highcharts

http://www.highcharts.com/demo

**zakips** · 10/05/2015, 15h50

merci tchize_

comment je peux l'intégrer avec JSP(en général avec JAVA EE )

**tchize_** · 10/05/2015, 15h58

c'est du javascript, regarde les demos.

**zakips** · 10/05/2015, 16h50

quand je met ce code dans la jsp il affiche rien

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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);
 
    });
});

**tchize_** · 10/05/2015, 19h52

t'as quoi comme erreur dans ta console javascript.

**zakips** · 10/05/2015, 20h06

juste il affiche rien, et voilà la page jsp

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

**tchize_** · 10/05/2015, 20h26

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...

**zakips** · 10/05/2015, 20h31

avec ce code même problème

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

**tchize_** · 10/05/2015, 21h02

messages d'erreurs stp.

**zakips** · 10/05/2015, 21h09

j’exécute la page dans eclips sous le serveur apache tomcat, il affiche une page vide sans aucune erreurs

**tchize_** · 10/05/2015, 21h39

affiche ta console javascript dans ton browser.

**zakips** · 10/05/2015, 22h04

donc voilà les erreurs

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**tchize_** · 10/05/2015, 22h26

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**zakips** · 10/05/2015, 22h29

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

Tableau de bord en J2EE

Développement Web en Java

Discussions similaires

Partager

Partager