Graphique courbes HTML

**CATALDO** · 16/11/2011, 16h09

Bonjour à tous,
Voilà! j'ai besoin de réaliser un graphique en HTML pour l'intégrer à une fiche produit sur un site E-commerce. Il s'agit d'une pompe pour piscine; elle se décline en plusieurs puissances et il est intéressant pou les acquéreurs potentiels de visualiser ces courbes exprimés en en ordonné "H(m.C.A)" et en abscisse "Q(m3/h)".

Je problème que je rencontre est que je ne sais pas comment intervertir ces valeurs sur le graphique que j'ai créé!

Le deuxième petit problème est que je ne sais pas non plus afficher "H(m.C.A)" et "Q(m3/h)" au pied et sur le côté de ce dit graphique.

Est ce que quelqu'un aurait la gentillesse de ce pencher sur mon cas et me trouver une solution?

J'attends de vos nouvelles...

Bien cordialement.

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
<script src="https://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript"><!--
      google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = new google.visualization.DataTable();
	data.addColumn('string', 'Q (m3/h)');
        	data.addColumn('number', '0,75CV');
        	data.addColumn('number', '1CV');
	data.addColumn('number', '1,5CV');
	data.addColumn('number', '2CV');
	data.addColumn('number', '3CV');
        	data.addRows(8);
 
	data.setValue(0, 0, '6');
        	data.setValue(0, 1, 17.5);
        	data.setValue(0, 2, 21);
	data.setValue(0, 3, 28.5);
	data.setValue(0, 4, 34);
	data.setValue(0, 5, 43.5);
 
	data.setValue(1, 0, '8');
        	data.setValue(1, 1, 15);
        	data.setValue(1, 2, 19.5);
	data.setValue(1, 3, 26);
	data.setValue(1, 4, 30);
	data.setValue(1, 5, 42);
 
	data.setValue(2, 0, '10');
        	data.setValue(2, 1, 12);
        	data.setValue(2, 2, 17.5);
	data.setValue(2, 3, 24);
	data.setValue(2, 4, 27);
	data.setValue(2, 5, 40);
 
	data.setValue(3, 0, '12');
        	data.setValue(3, 1, 8.8);
        	data.setValue(3, 2, 15);
	data.setValue(3, 3, 21);
	data.setValue(3, 4, 24);
	data.setValue(3, 5, 35);
 
	data.setValue(4, 0, '14');
        	data.setValue(4, 1);
        	data.setValue(4, 2, 12);
	data.setValue(4, 3, 18);
	data.setValue(4, 4, 20);
	data.setValue(4, 5, 31);
 
	data.setValue(5, 0, '16');
	data.setValue(5, 1);
        	data.setValue(5, 2, 9);
	data.setValue(5, 3, 15);
	data.setValue(5, 4, 16);
	data.setValue(5, 5, 24);
 
	data.setValue(6, 0, '18');
	data.setValue(6, 1);
        	data.setValue(6, 2);
	data.setValue(6, 3);
	data.setValue(6, 4);
	data.setValue(6, 5, 17);
 
	data.setValue(7, 0, '20');
	data.setValue(7, 1);
        	data.setValue(7, 2);
	data.setValue(7, 3);
	data.setValue(7, 4);
	data.setValue(7, 5);
 
        var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
        chart.draw(data, {width: 400, height: 240, title: 'Courbes de performances'});
      }
// --></script>
<div id="chart_div">&nbsp;</div>

**NoSmoking** · 16/11/2011, 23h14

Bonsoir,
prenons les question à l'envers
1/ pour les légendes

Code :

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

1
2
3
4
5
6
7
8
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw( data, {
    width: 400,
    height: 240,
    title: 'Courbes de performances',
    hAxis:{title:'Légende horizontale'},
    vAxis:{title:'Légende verticale'}
  });

2/ pour l'inversion

Code :

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

1
2
3
data.setValue(0, 0, '6');   // correspond à l'axe des X
data.setValue(0, 1, 17.5);  // valeur de la série 1 pour un X=6
data.setValue(0, 2, 21);    // valeur de la série 2 pour un X=6 etc...

à toi donc de reprendre le bon sens.

et pour toutes les infos http://code.google.com/intl/fr/apis/...linechart.html

**CATALDO** · 12/12/2011, 12h13

Bonjour,
Ça fait un moment que je suis sur ce graphique et malheureusement malgré ton aide je n'arrive toujours pas à m'en sortir.

Ci-dessous tu trouveras le liens vers une fiche produit ou tous les renseignements sont réunis.

http://www.vitapiscine.com/pompes_49...ol__48390.html

Le graphique que je souhaite réaliser en HTML visible sur la fiche produit est cependant une impression écran d'un PDF(Pas si top que ça); bien que cette image soit plutôt de bonne qualité.

Je reprend les élément que j'ai déjà réalisé: Attention les valeurs ne sont pas bonnes!!!

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
<script type="text/javascript" src="https://www.google.com/jsapi">
</script>
<script type="text/javascript">
	google.load("visualization", "1", {packages:["corechart"]});
	google.setOnLoadCallback(drawChart);
	function drawChart() {
	var data = new google.visualization.DataTable();
	data.addColumn('string', 'Q(m3/h)');
	data.addColumn('number', '0,33CV');
	data.addColumn('number', '0.5CV');
	data.addColumn('number', '0,75CV');
	data.addColumn('number', '1CV');
	data.addColumn('number', '1,25CV');
	data.addRows(8);
	data.setValue(0, 0, '0');
	data.setValue(0, 1, 9);
	data.setValue(0, 2, 21);
	data.setValue(0, 3, 28.5);
	data.setValue(0, 4, 34);
	data.setValue(0, 5, 43.5);
 
	data.setValue(1, 0, '2');
	data.setValue(1, 1, 8.5);
	data.setValue(1, 2, 19.5);
	data.setValue(1, 3, 26);
	data.setValue(1, 4, 30);
	data.setValue(1, 5, 42);
 
	data.setValue(2, 0, '4');
	data.setValue(2, 1, 7.8);
	data.setValue(2, 2, 17.5);
	data.setValue(2, 3, 24);
	data.setValue(2, 4, 27);
	data.setValue(2, 5, 40);
 
	data.setValue(3, 0, '6');
	data.setValue(3, 1, 7.8);
	data.setValue(3, 2, 15);
	data.setValue(3, 3, 21);
	data.setValue(3, 4, 24);
	data.setValue(3, 5, 35);
 
	data.setValue(4, 0, '8');
	data.setValue(4, 1, 5.7);
	data.setValue(4, 2, 12);
	data.setValue(4, 3, 18);
	data.setValue(4, 4, 20);
	data.setValue(4, 5, 31);
 
	data.setValue(5, 0, '10');
	data.setValue(5, 1);
	data.setValue(5, 2, 9);
	data.setValue(5, 3, 15);
	data.setValue(5, 4, 16);
	data.setValue(5, 5, 24);
 
	data.setValue(6, 0, '12');
	data.setValue(6, 1);
	data.setValue(6, 2);
	data.setValue(6, 3);
	data.setValue(6, 4);
	data.setValue(6, 5, 17);
 
	data.setValue(7, 0, '14');
	data.setValue(7, 1);
	data.setValue(7, 2);
	data.setValue(7, 3);
	data.setValue(7, 4);
	data.setValue(7, 5);
 
	var chart = new google.visualization.LineChart(document.accidentellement('chart_div'));
	chart.draw(data, {width: 400, height: 240, title: 'Courbes de performances',hAxis: {title: 'Q(m3/h)', minValue: 0, maxValue: 44}, vAxis: {title: 'H(m.c.a.)'}
	});
}
// -->
</script>
<div id="chart_div">&nbsp;</div>

Merci pour ton aide....

**NoSmoking** · 12/12/2011, 22h06

je viens de regarder la documentation et il se pourrait qu'il te faille changer d'approche pour ton tracé.
Essaies sous cette forme

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
<!DOCTYPE HTML>
<html lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>[...]</title>
<style type="text/css">
</style>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
	google.load("visualization", "1", {packages:["corechart"]});
	google.setOnLoadCallback(drawChart);
	function drawChart() {
	var data = new google.visualization.DataTable();
	data.addColumn('string', 'Q(m3/h)');
	data.addColumn('number', '0,33CV');
	data.addColumn('number', '0.5CV');
	data.addColumn('number', '0,75CV');
	data.addColumn('number', '1CV');
	data.addColumn('number', '1,25CV');
	data.addRow([ "0",  9.0, 11.5, 13.5, 14.5, 16.5]);
	data.addRow([ "2",  8.5, 11.0, 13.0, 14.5, 16.5]);
	data.addRow([ "4",  7.8,  9.5, 12.5, 14.0, 15.5]);
	data.addRow([ "6",  6.5,  9.0, 11.5, 13.5, 15.0]);
	data.addRow([ "8",  5.2,  8.0, 11.0, 12.5, 14.0]);
	data.addRow(["10", null,  6.0,  9.0, 11.0, 13.0]);
	data.addRow(["12", null,  4.0,  7.5,  9.0, 11.5]);
	data.addRow(["14", null, null, 5.75,  7.5, 10.0]);
	data.addRow(["16", null, null, null,  6.0,  8.5]);
	data.addRow(["18", null, null, null, null,  6.0]);
 
	var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
	chart.draw(data, { width: 400, height: 400, title: 'Courbes de performances',
    hAxis: {title: 'Q(m3/h)',   minValue: 0, maxValue: 44, textStyle:{ fontSize : 9}},
    vAxis: {title: 'H(m.c.a.)', minValue: 0, maxValue: 18, textStyle:{ fontSize : 9}, gridlines:{ color: '#aaa', count: 10}},
	});
}
</script>
</head>
<body>
<div id="chart_div">&nbsp;</div>
</body>
</html>

les valeurs sont à affiner, il va de soit.

**CATALDO** · 13/12/2011, 10h22

Bonjour,

Je viens de voir ta réponse, je vais voir ce que ça donne en changeant les données.

Il est vrai que les informations sur le tableau sont celles qui doivent être indiqués sur le graphique. Comme par exemple: pour 3,5 Q(m3/h) qui doit correspondre à 8 H(m) pour la 0,33 CV.
La graduation de la ligne du bas indique 0; 2; 4 ; 6; 8 etc... On ne peut à priori pas indiqué de valeur intermédiaire!

Ce qu'il faudrait, c'est rendre indépendante chaque courbes sans qu'elles n'influent sur les valeurs 0; 2; 4; 6; 8, car les correspondances sur le tableau sont intermédiaires.

Je ne sais pas si je me suis bien fait comprendre...

En clair; si je pointe la souris sur la courbe Bleue (0,33CV) au point de jonction 3,5 Q(m3/h) et 8 H(m); je devrais voir un point apparaitre.
Mais ce n'ai pas le cas...

En tous cas, merci pour ta réponse si rapide et ton aide.

Jacques

**NoSmoking** · 17/12/2011, 10h08

essaies cela

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
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
  var data = new google.visualization.DataTable();
  data.addColumn('string', '');
  data.addColumn('number', '0,33CV');
  data.addColumn('number', '0.50CV');
  data.addColumn('number', '0,75CV');
  data.addColumn('number', '1,00CV');
  data.addColumn('number', '1,25CV');
 
  // les datas
  var i, k =0;
  var valeur = [];
  valeur[k++] = [  '4',  '6',  '8', '10', '12', '14', '16', '18'];
  valeur[k++] = [  9.3,  7.0,  3.5, null, null, null, null, null];
  valeur[k++] = [ 12.0,  9.6,  7.5,  4.0, null, null, null, null];
  valeur[k++] = [ null, 13.5, 11.2,  8.8,  5.0, null, null, null];
  valeur[k++] = [ null, 15.6, 13.8, 11.5,  8.8,  4.5, null, null];
  valeur[k++] = [ null, 18.0, 16.0, 14.0, 11.8,  9.0,  4.0, null];
 
  var nbLig = valeur.length;
  var nbCol = valeur[0].length;
  // creation des Lignes
  data.addRows( nbCol);
  // mise en place des data
  for( i = 0; i < nbLig; i++){
    for( k = 0; k < nbCol ; k++){
      data.setValue( k, i, valeur[i][k]);
    }
  }
  var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
  chart.draw( data, { width: 600, height: 400, title: 'Courbes de performances',
    hAxis: { title: 'H(m)'},
    vAxis: { title: 'Q(m3/h)', minValue: 0, maxValue: 18, gridlines:{ count: 11}}
  });
}

si tu veux inverser les axes ???

Pour plus d'explications

http://code.google.com/intl/fr/apis/...t.html#Example

Graphique courbes HTML

APIs Google

Vue hybride

Discussions similaires

Partager

Partager