IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

jQuery Discussion :

Le graphe ne s'affiche pas lors du chargement de la page php en jQuery


Sujet :

jQuery

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Candidat au Club
    Femme Profil pro
    Étudiant
    Inscrit en
    Mars 2012
    Messages
    2
    Détails du profil
    Informations personnelles :
    Sexe : Femme

    Informations professionnelles :
    Activité : Étudiant
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Mars 2012
    Messages : 2
    Par défaut Le graphe ne s'affiche pas lors du chargement de la page php en jQuery
    Bonjour ,

    j'ai besoin de votre aide pour avancer dans mon projet,
    j'ai utilisé la méthode $.poste pour charger le fichier mayphp.php qui permet de récupérer les données de la base de données afin de générer un graphe en utilisant la bibliothèque Highcharts-3.0.7.
    myphp.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
    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
    <?php
    require_once('data.php');
    $i=0;
    $cell_name = $_POST['cell_name'];
    $from_date = $_POST['from_date'];
    $to_date = $_POST['to_date'];
    $action = $_POST['action'];
    echo'<br><br><br>name....'.$cell_name;
    echo'<br>from....'.$from_date;
    echo'<br>to....'.$to_date;
    echo'<br>AA....'.$action;
    if ($from_date == NULL or $to_date==NULL or $cell_name == NULL) echo '<br> Les champs doivent etre non vides';
    else{
    	if ($action == 'RRC_Accessibility'){
    		echo'<br><br> RRC_Accessibility <br>';
    		$resultats = $pdo->query(' SELECT 
    			rsran000_cell. Period_start_time ,
    			SUM( RRC_Stp_att ) AS SumOfRRC_Stp_att,
    			SUM( RRC_stp_and_acc_CR_UE ) AS SumOfRRC_stp_and_acc_CR_UE,
    			FROM rsran000_cell
    			where Period_start_time >="'.$from_date.'" and Period_start_time <="'.$to_date.'"
    			GROUP BY Period_start_time
    		');
    		foreach($resultats as $res){
    			$Period_start_time[] = $res[0];
    			$SumOfRRC_Stp_att[] = $res[1]; //RRC_Stp_att
    			$SumOfRRC_stp_and_acc_CR_UE[] = $res[2]; //RRC_stp_and_acc_CR_UE
    			$i= $i+1;
    		}
    ?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transpitional//EN"
    	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-Transpitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head> 
    	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
    	<title>Cell</title>
    	<script type="text/javascript" src="js/jquery.min.js" ></script>
    	<script type="text/javascript" src="js/highcharts.js" ></script>
    	<script type="text/javascript" src="js/themes/gray.js"></script>
    	<script src="js/modules/exporting.js"></script>
    	<script> <!-- script pour générer le graphe -->
    $(function () {
    	$('#container').highcharts({
    		chart: {
    			zoomType: 'xy'
    		},
    		title: {
    			text: 'RRC Setup&access SR'
    		},
    		subtitle: {
    			text: ''
    		},
    		xAxis: [{
    			categories: <?php echo json_encode($Period_start_time, JSON_NUMERIC_CHECK);?>
    		}],
    		yAxis: [{ // Primary yAxis
    			min:0,
    			labels: {
    				format: '{value}',
    				style: {
    					color: '#89A54E'
    				}
    			},
    			title: {
    				text: 'SumOfRRC stp and acc CR UE',
    				style: {
    					color: '#89A54E'
    				}
    			}
    		}, { // Secondary yAxis
    			title: {
    				text: 'SumOfRRC Stp att',
    				style: {
    					color: '#FF00FF'
    				}
    			},
    			labels: {
    				format: '{value} ',
    				style: {
    					color: '#FF00FF'
    				}
    			},
    			opposite: true
    		}],
    		tooltip: {
    			shared: true
    		},
    		legend: {
    			layout: 'vertical',
    			align: 'left',
    			x: 120,
    			verticalAlign: 'top',
    			y: 100,
    			floating: true,
    			backgroundColor: '#FFFFFF'
    		},
    		series: [{
    			name: 'SumOfRRC stp and acc CR UE',
    			color: '#89A54E',
    			type: 'spline',
    			yAxis: 0,
    			data: [<?php echo json_encode($SumOfRRC_stp_and_acc_CR_UE, JSON_NUMERIC_CHECK);?>],
    			tooltip: {
    				valueSuffix: ''
    			}
    		}, {
    			name: 'SumOfRRC Stp att',
    			color: '#FF00FF',
    			type: 'column',
    			yAxis: 1,
    			data: [<?php echo json_encode($SumOfRRC_Stp_att, JSON_NUMERIC_CHECK); ?>],
    			tooltip: {
    				valueSuffix: ''
    			}
    		}]
    	});
    });
    	</script>
    </head>
    <body>
    <div id="container" style="width: 80%; height: 400px; margin: 10px auto"></div>
    </body>
    </html>
    <?php } } ?>

    Les données sont sont transmises mais le graphe ne s'affiche pas sur la page aja1.php. sachant qu'il s'affiche lorsque j'appel la page myphp.php directement et non sur aja1.php
    Code aja1.php
    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
    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
    <!DOCTYPE HTML>
    <html>
    <head>
    	<link rel="stylesheet" href="css/style.css">
    	<script type="text/javascript"   src = "js/jquery.min.js"></script>
    	<script src="js/bootstrap-datepicker.js"></script>
    	<link rel="stylesheet" typePreview post="text/css" href="css/datepicker.css">
    	<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    	<script>
    $(function() {
            $( "#datepicker" ).datepicker();
    });
    $(function() {
            $( "#datepicker1" ).datepicker();
    });
            </script>
    	<script  type="text/javascript" >
    function swapContent(cv){
            var url = "myphp.php";
            $.post('myphp.php',{action: cv, cell_name: form.cell_name.value, from_date: form.from_date.value, to_date: form.to_date.value }, function(data){
                    $("#div").html(data).show();
            });
    }
            </script>
    </head>
    <body>
    	<form name="form">
    	<div class= "corp">
    		Cell Name:<input type="text" id="cell_name" name = "cell_name"/>
    		<h5>Period </h5>
    		<span>from</span>
    		<td><div class="input-append date">
    			 <input type="text" id="datepicker" name = "from_date" data-date-format="mm.dd.yyyy"/>
    			</div>
    			<span>to</span>
    			<div class="input-append date" >
    				 <input type="text" id="datepicker1"  name="to_date" data-date-format="mm.dd.yyyy"/></td></tr>
    		</div>
    		<!--<input type="button" value="Ok" OnClick="get();"/>-->
    	</div>
    	<div id="navigation">
    		<li><a href="#">Cell Availability</a></li> 
    		<li><a href="#" OnClick="return false" onmousedown = "javascript:swapContent('action');">RRC Accessibiliy</a></li> 
    		<li><a href="#" OnClick="return false" onmousedown = "javascript:swapContent('action');">RRC_conn_SR</a></li> 
    		<li><a href="#" OnClick="return false" onmousedown = "javascript:swapContent('action');">Voice_SASR</a></li> 
    		<li><a href="#" OnClick="return false" onmousedown = "javascript:swapContent('action');">Voice_SR</a></li> 
    		<li><a href="#" OnClick="return false" onmousedown = "javascript:swapContent('action');">HSDPA Accessibility</a></li> 
    		<li><a href="#" OnClick="return false" onmousedown = "javascript:swapContent('action');">RRC Accessibiliy</a></li> 
    		<li><a href="#" OnClick="return false" onmousedown = "javascript:swapContent('action');">HSDPA Retainbility</a></li> 
    	</div>
    </form>
    <div id ="info"></div>
    <div id ="div"></div>
    </p>
    </body>
    </html>

    Merci d'avance.

  2. #2
    Membre éclairé
    Homme Profil pro
    Développeur Web
    Inscrit en
    Août 2007
    Messages
    314
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Maroc

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Août 2007
    Messages : 314
    Par défaut
    est ce que tu reçois des erreurs java script ou pas ?

  3. #3
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 659
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 75
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 659
    Billets dans le blog
    1
    Par défaut
    pourquoi plusierus ready ???
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
     
    $(function() {
    	$( "#datepicker" ).datepicker();
    });
    $(function() {
    	$( "#datepicker1" ).datepicker();
    });

    =>
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
     
    $(function() {
    	$( "#datepicker, #datepicker1" ).datepicker();
    });
    Celà mis à part ... je ne vois pas ou tu lances la fonction avec le post ???


    tu as des echo avant ton doctype ???
    un doctype en transitionlal ?

    c'est quoi la seconde page ? avec un doctype et un head ?
    un peu fouillis tout ça ...

    A mon avis tu as un souci de format de data retourné par ton json encode ...
    regarde les formats attendus ...
    http://www.highcharts.com/docs/chart-concepts/series

    vérifie dans ton code source généré le format que génère ton php
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

Discussions similaires

  1. Réponses: 3
    Dernier message: 02/07/2007, 11h58
  2. Réponses: 2
    Dernier message: 09/11/2006, 11h01
  3. Etiquette sur graphe ne s'affiche pas en Acc2003
    Par micniv dans le forum Access
    Réponses: 3
    Dernier message: 25/09/2006, 10h27
  4. Réponses: 2
    Dernier message: 06/12/2005, 03h32

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo