Alimentation dynamique d'un graphique HIGHCHART

**mirumoto** · 22/04/2013, 08h07

Bonjour à tous,

Je démarre sur ce langage donc pardonnez-moi de mon incompétence

.

Je voudrai afficher un graphique HIGHCHART sur une page en fonction de données dans une base Mysql j'ai créé un index pour sélectionner un format de données et lancer un fichier php avec un sql

Code html :

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
<!DOCTYPE html>
<html lang="en" >
    <head>
        <meta charset="utf-8" />
        <meta name="author" content="Script Tutorials" />
        <title>Prix Moyens</title>
 
        <!-- add styles -->
        <link href="css/main.css" rel="stylesheet" type="text/css" />
 
        <!-- add scripts -->
        <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
        <script src="js/highcharts.js"></script>
        <script src="js/gray.js"></script>
        <script src="js/main.js"></script>
		<!-- <script src="datas.js"></script> -->
 
    </head>
		choix du format : <br>
		<form method="POST" action="datas.php">
		<form method="POST">
		<select name="format">
			<option value="A">A</option>
			<option value="B">B</option>
			<option value="C">C</option>
 
		</select>
		<input type="submit" value="Afficher"/>
 
        <!-- Affichage chart -->
        <div id="chart_1" class="chart"></div>

fichier datas.php avec le SQL en fonction de la valeur de mon format sélectionné en amont :

Code php :

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
<?php
$dsn = 'mysql:dbname=test;host=localhost';
$user = '';
$password = '';
$i=0;
 
$dbh = new PDO($dsn, $user, $password, array(PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION));
$abs_ar = Array();
$ord_ar = Array();
global $abs_ar;
global $ord_ar;
 
$strsql = $dbh->query("SELECT OFFSET_PRIX_MOYEN, NB_TRANS FROM sigma_av_datas_pm WHERE FORMAT = '".$_POST['format']."' ");
 
foreach ($strsql as $row)
{
	$ord_ar[] = $row[1];
	$abs_ar[] = $row[0];
	$i=$i+1;
}
 
echo json_encode($ord_ar);
?>

echo json_encode($ord_ar); me retourne bien le tableau à afficher sur mon graphique.

et le fichier main.js avec la fonction de mon chart :

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
// definition graphique
var chart1;
 
$(document).ready(function() {
 
    // premier chart nombre transactions
    chart1 = new Highcharts.Chart({
     chart: {
        renderTo: 'chart_1',
        type: 'column',
        height: 350,
     },
     title: {
        text: 'Nb Trans'
     },
	 colors:
		['#910000']
	 ,
     xAxis: {
        categories: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21']
	//categories: <?php json_encode($abs_ar); ?>
     },
     yAxis: {
        title: {
           text: 'Nb Trans'
        }
     },
     series: [{
        name: 'Prix moyen',
        data: [4, 1, 0, 0, 3, 3, 4, 5, 6, 4, 7, 8, 13, 9, 10, 5, 4, 2, 0, 1]
	//data: <?php json_encode($abs_ar); ?>
 
     }]
    });
});

Dans l'exemple le graphique affiché n'a pas de variable je voudrai lui donner les deux variables $ord_ar[] et $abs_ar[] que j'ai calculé dans le fichier php.

J'ai essayé d'utiliser ça :

Code php :

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

categories: <?php json_encode($abs_ar); ?>

mais ça ne fonctionne pas en fait je ne sais plus trop où je vais et je m'y perd entre les fichiers et je ne sais pas comment faire interagir les données entre eux...

dans contribuez j'ai vu ce topic :
http://www.developpez.net/forums/d10...cript-methode/
est-ce la solution?

Merci d'avance pour vos précieux éclaircissements!

**eomer212** · 22/04/2013, 13h12

2 solutions:
1 - les variables à passer sont connues au moment de la generation de la page, donc, tu peux les passer du php vers le javascript en incluant celles ci dans la declaration du code javascript.
il faut pour que ca marche que le code html de la page soit renvoyé et modifie par la page .php
ainsi, tu pourras customiser ta reponse.
essaye deja en mettant des valeurs fixes, pour voir si ton graph se genere, avant d'essayer avec des variables.

2 - les variables sont modifiées apres la creation de la page, fauda passer par un get ou getjson pour les recuperer.

la partie javascript

Code :

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

1
2
3
4
5
6
7
8
9
10
11
function getvalue()
{
demande=0; // ca servira de parametre à passer à la fonction par exemple
   d=new Date().getTime();  // pour s'assurer que le cache n'interfere pas.
   $.getJSON("mapage.php", { graphvalue: demande,d:d}, function(json) {
         if (json!=null) {
          // ici ton code pour recuperer la valeur du json passé
          // et lancer la mise a jour du graph
       	}
   });
}

la partie php

Code php :

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

1
2
3
4
5
6
7
8
if (isset($_GET['graphvalue'])) 
{
    $valeurs=array();
    $valeurs[]=14; // valeur à retourner, ou liste de valeurs
    $retour=json_encode($valeurs);
 
exit();
}

**mirumoto** · 22/04/2013, 14h58

ok merci je vais essayer d'abord avec des nombres pour moi c'est la méthode 2!

**mirumoto** · 25/04/2013, 11h44

pour info pour les recherches futures voici le code en question qui fonctionne :

code HTML :

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
<!DOCTYPE html>
<html lang="en" >
    <head>
        <meta charset="utf-8" />
        <meta name="author" content="Script Tutorials" />
        <title>Prix Moyens</title>
 
        <!-- add styles -->
        <link href="css/main.css" rel="stylesheet" type="text/css" />
 
        <!-- add scripts -->
        <script type="text/javascript" src="jquery-1.9.1.min.js"></script>
        <script type="text/javascript" src="js/highcharts.js"></script>
        <script type="text/javascript" src="js/gray.js"></script>
 
		<script type="text/javascript" >
 
	function modifgraph(format)
	{
 
		$.getJSON("datas.php?format=" + format.value, function(json) 
		{
 
        chart = new Highcharts.Chart({
		chart: {
			renderTo: 'chart_1',
			type: 'column',
			height: 350,
		},
		title: {
			text: 'Revenus nets par prix moyen'
		},
		colors: 
			['#1aadce']
		,
		xAxis: {
        	categories: json.categorie
		},
		yAxis: {
			min: 0,
			title: {
           text: 'Revenu net'
			}
		},
		series: [{
		name: 'Revenue',
        data: json.data}]
		}
		);
 
        });
   }
		</script>
    </head>
    <body>
        <header>
            <h2>Prix Moyens <a href="http://www.script-tutorials.com/active-charts-using-highcharts/"></a></h2>
        </header>
 
		choix du format : <br>
 
		<form method="POST" action="datas.php">
		<select name="format" id="format" onchange="javascript:modifgraph(this);">
			<option value="A">A</option>
			<option value="B">B</option>
			<option value="C">C</option>
		</select>
		<input type="submit" value="Afficher" />
 
		</form>
 
		<br>
 
        <!-- Affichage chart -->
        <div id="chart_1" class="chart"></div>
 
    </body>
</html>

fichier datas.php :

Code php :

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
<?php	
//try
//{	
 
	$dsn = 'mysql:dbname=test;host=localhost';
	$user = '';
	$password = '';
	$i=0;
 
	$dbh = new PDO($dsn, $user, $password, array(PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION));
	$abs_ar = Array();
	$ord_ar = Array();
	global $abs_ar;
	global $ord_ar;
 
	$strsql = $dbh->query("SELECT A, B FROM TABLE WHERE FORMAT = '".$_GET['format']."' ORDER BY B");
 
 
	foreach ($strsql as $row)
	{
		$ord_ar['data'][] = $row[0];
		$ord_ar['categorie'][] = $row[1];
		$i=$i+1;
	}
 
	$ordonnees = json_encode($ord_ar);
	echo $ordonnees ;

bon il me reste un petit problème c'est que json encode les valeurs avec des " entre les nombres et je pense que mon chart n'arrive pas à lire mon son.data à cause des ".

Y a t-il une méthode de transcription simple des "" en rien ou en '.

merci!

**mirumoto** · 25/04/2013, 11h55

En fait c'est un simple :

Code :

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

1
2
3

$ordonnees = json_encode($ord_ar, JSON_NUMERIC_CHECK);

Alimentation dynamique d'un graphique HIGHCHART

jQuery

Vue hybride

Discussions similaires

Partager

Partager