Plusieurs graphiques à partir de JSCharts

**michgoarin** · 05/06/2015, 18h04

Bonjour,
Je souhaiterai afficher plusieurs graphiques à partir de JSCharts. Le problème lorsque je mets les codes sources, seul le deuxième graphique s'affiche.
Je ne comprends pas. pourriez vous m'aider.

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
 
 
<html>
<head>
 
<title>JSChart</title>
 
<script type="text/javascript" src="../../../sources/jscharts.js"></script>
 
</head>
<body>
<table>
<tr><td>
 
</td>
</tr>
<tr>
<td>
<div id="graph">Loading...</div>
<script type="text/javascript">
	var myData = new Array(['Communicate socially', 42], ['Engage in work for classes', 38], ['Be entertained', 10], ['Communicate professionally', 7], ['Not sure/Don\'t know', 2]);
	var colors = ['#C40000', '#750303', '#F9ECA2', '#FA9000', '#FA5400'];
	var myChart = new JSChart('graph', 'pie');
	myChart.setDataArray(myData);
	myChart.colorizePie(colors);
	myChart.setTitle('Students use the Internet most often to (%)');
	myChart.setTitleColor('#8E8E8E');
	myChart.setTitleFontSize(11);
	myChart.setTextPaddingTop(30);
	myChart.setSize(616, 321);
	myChart.setPiePosition(308, 170);
	myChart.setPieRadius(85);
	myChart.setPieUnitsColor('#555');
	myChart.setBackgroundImage('chart_bg.jpg');
	myChart.draw();
</script>
</td>
</tr>
<tr>
<td>
<div id="graph">Loading...</div>
<script type="text/javascript">
	var myData = new Array(['Asia', 437], ['France', 125],['Europe', 322], ['North America', 233], ['Latin America', 110], ['Africa', 34], ['Middle East', 20], ['Aus/Oceania', 19]);
	var colors = ['#2D6B96','#327AAD', '#327AAD', '#3E90C9', '#55A7E3', '#60B6F0', '#81C4F0', '#9CCEF0'];
	var myChart = new JSChart('graph', 'bar');
	myChart.setDataArray(myData2);
	myChart.colorizeBars(colors);
	myChart.setTitle('Internet usage by World Region (millions of users)');
	myChart.setTitleColor('#8E8E8E');
	myChart.setAxisNameX('');
	myChart.setAxisNameY('');
	myChart.setAxisColor('#C4C4C4');
	myChart.setAxisNameFontSize(16);
	myChart.setAxisNameColor('#999');
	myChart.setAxisValuesColor('#777');
	myChart.setAxisColor('#B5B5B5');
	myChart.setAxisWidth(1);
	myChart.setBarValuesColor('#2F6D99');
	myChart.setBarOpacity(0.5);
	myChart.setAxisPaddingTop(60);
	myChart.setAxisPaddingBottom(40);
	myChart.setAxisPaddingLeft(45);
	myChart.setTitleFontSize(11);
	myChart.setBarBorderWidth(0);
	myChart.setBarSpacingRatio(50);
	myChart.setBarOpacity(0.9);
	myChart.setFlagRadius(6);
	myChart.setTooltip(['North America', 'U.S.A and Canada']);
	myChart.setTooltipPosition('nw');
	myChart.setTooltipOffset(3);
	myChart.setSize(616, 321);
	myChart.setBackgroundImage('chart_bg.jpg');
	myChart.draw();
</script>
</td>
</tr>
</table>
</body>
</html>

Dans l'attente d'une réponse de votre part, par avance merci.
Michgoarin

**NoSmoking** · 05/06/2015, 18h14

Bonjour,
Attention une ID doit être UNIQUE donc

Code :

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

1
2
3
4
5
<div id="graph_1">Loading...</div>
<script type="text/javascript">
	var myData = new Array(['Asia', 437], ['France', 125],['Europe', 322], ['North America', 233], ['Latin America', 110], ['Africa', 34], ['Middle East', 20], ['Aus/Oceania', 19]);
	var colors = ['#2D6B96','#327AAD', '#327AAD', '#3E90C9', '#55A7E3', '#60B6F0', '#81C4F0', '#9CCEF0'];
	var myChart = new JSChart('graph_1', 'bar');

Code :

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

1
2
3
4
5
<div id="graph_2">Loading...</div>
<script type="text/javascript">
	var myData = new Array(['Asia', 437], ['France', 125],['Europe', 322], ['North America', 233], ['Latin America', 110], ['Africa', 34], ['Middle East', 20], ['Aus/Oceania', 19]);
	var colors = ['#2D6B96','#327AAD', '#327AAD', '#3E90C9', '#55A7E3', '#60B6F0', '#81C4F0', '#9CCEF0'];
	var myChart = new JSChart('graph_2', 'bar');

devrait le faire.

**michgoarin** · 06/06/2015, 14h39

Merci NoSmoking. ça fonctionne parfaitement !!!

Plusieurs graphiques à partir de JSCharts

JavaScript

Discussions similaires

Partager

Partager