Graphique courbes HTML

Version imprimable

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:

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>

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

Code:

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:

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

Graphique HTML

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:

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

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:

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.

13/12/2011, 10h22
CATALDO

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:D

essaies cela

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
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 :fleche: http://code.google.com/intl/fr/apis/...t.html#Example