Affichage incorrect de graphique

Ce forum est dédié aux discussions qui concernent les graphiques réalisés avec la librairie Highcharts, Une question, un bug ?

Modérateurs : jturlier, Météo Villarzel

Répondre
bprophete
Messages : 3
Enregistré le : 07 janv. 2015, 18:55

Affichage incorrect de graphique

Message par bprophete » 07 janv. 2015, 21:33

Salut a tous
Je suis tres content de m'inscrire a ce forum, je vous felicite pour votre devouement et le grand service que vous rendez aux informaticiens
Je suis en train de creer un graphique highcharts dont les donnees se chargent a partir de l'utilisateur connecte a travers une page de connection. Dans ma requete sql qui affiche le graphe je cree un variable qui stocke les donnees du user, puis affiche le graphique en fonction du user. ca marche correctement quand je fais une requete qui doit m'affiche un colonne, par exemple la somme de production pour un mois. je suis colle quand je fais une requete en faisant group by date(p.TranDate) qui doit m'afficher les productions pour chaque jour du mois, je dois avoir plusieurs colonnes dans ce cas, le graphique n'affiche pas correctement ( voir fichier joint). votre aide me serait tres apprecie merci beaucoup

voici mon code


<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jq ... "></script>

<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<title>Highcharts Example</title>


<link href="https://maxcdn.bootstrapcdn.com/bootstr ... ap.min.css" rel="stylesheet">
<style type="text/css">
[class*="col"] { margin-bottom: 20px; }
img { width: 100%; }
body { margin-top: 20px; }
.bouton
{
color:#0000ff;
font-size:24px;
cursor:pointer;
}
.bouton:hover
{
text-decoration:underline;
}
.texte
{
border:1px solid #333333;
background:#eeeeee;
padding:10px;
color:#333333;
}
.texte:hover
{
border:1px solid #000000;
background:#cccccc;
color:#000000;
}
</style>
<link href="css/tuto.css" rel="stylesheet">
<script src="http://code.highcharts.com/stock/highstock.js"></script>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

</head>
<body style="background-color: rgb(221,221,255)">


<div id="container5"><p style="font-size:30px"><MARQUEE DIRECTION="down" SCROLLAMOUNT="5"> Productions Totals for this month</MARQUEE></p></div>
<?php
$con = ($GLOBALS["___mysqli_ston"] = mysqli_connect("", "", ""));

if (!$con) {
die('Could not connect: ' . ((is_object($GLOBALS["___mysqli_ston"])) ? mysqli_error($GLOBALS["___mysqli_ston"]) : (($___mysqli_res = mysqli_connect_error()) ? $___mysqli_res : false)));
}

((bool)mysqli_query( $con, "USE OpenDent"));

$my_data = mysqli_query($GLOBALS["___mysqli_ston"], "Select
(Case o.oid
When 1007 Then 'Newark'
When 1008 Then 'Berkeley'
When 1009 Then 'Elizabeth'
Else 'No oid'
end) as oid, date_format(TranDate, '%d-%b') as TranDate, Sum(p.Production) as Production
FROM OpenDent.production p
inner join
OpenDent.User o
On p.oid=o.oid
Where
month(Trandate)=month(current_date)
AND YEAR(Trandate) = YEAR(CURDATE()) AND
o.UserName='".$_POST['username']."' and o.Password='".$_POST['password']."'
group by date(p.TranDate), o.oid
");

while($row = mysqli_fetch_array($my_data)) {

$data111[] = $row['TranDate'];
$data222[] = $row['Production'];
$data333[] = $row['oid'];


}

?>



<!-- Un bouton avec '+' dedans, et un onclick qui appelle une fonction avec -->
<!-- en param le bouton et l'id du div à afficher/masquer. -->

<!-- Un div caché avec un attribut id -->

<script type="text/javascript">
$(function () {

Highcharts.getOptions().colors[0] = {
linearGradient: { x1: 0, y1: 0, x2: 1, y2: 0 },
stops: [ [ 0, '#4572A7' ],
[ 0.7, '#CCFFFF' ],
[ 1, '#4572A7' ] ]
};


var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container5',
defaultSeriesType: 'column',
plotBackgroundColor: null,
plotBorderWidth: null,
backgroundColor: '#F5F5F5',
plotShadow: false


},


title: {
text: 'Productions Daily Month To Date'

},
xAxis: {
categories: ['<?php echo join($data111, ',') ?>']
},

yAxis: {
title: {
text: 'Productions'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},

credits: {
enabled: false
},
tooltip: {

formatter: function() {
return '<span style="color:#039;font-weight:bold">' +
this.point.category +
'</span><br/><span style="color:' +
this.series.color + '">' + this.series.name +
'</span>: <span style="color:#669;font-weight:bold">'+ '$'
+ ''+ Highcharts.numberFormat(this.y, 2) + '</span>';
}

},
plotOptions: {
column: {
allowPointSelect: false,

cursor: 'pointer',
dataLabels: {
enabled: true,
color: '#000000',
connectorColor: '#000000',


}



}


},
series: [{
type: 'column',
name: '<?php echo join($data333, ', ');?>',

data: [ <?php echo join($data222, ',') ?>],
dataLabels: {
enabled: false,
rotation: -90,
color: '#FFFFFF',
align: 'right',
x: 4,
y: 10,
style: {
fontSize: '13px',
fontFamily: 'Verdana, sans-serif',
textShadow: '0 0 3px black',

}
}
},

]






});
});

});
</script>

</div>


</div>






</head>
<body> <a class="btn btn-primary pull-right" href="exit.php" style="margin-top:7px">Log out</a>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/highcharts-3d.js"></script>
<script src="js/exporting.js"></script>

<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>

</body>
</html>

Vous n’avez pas les permissions nécessaires pour voir les fichiers joints à ce message.

Avatar du membre
jturlier
Administrateur du site
Messages : 393
Enregistré le : 10 déc. 2014, 10:20
Localisation : Sérignan 34410
Contact :

Re: Affichage incorrect de graphique

Message par jturlier » 07 janv. 2015, 21:53

Bonsoir,
à partir du moment où tu veux un graphe avec des colonnes multiples pour une même période, tu dois avoir une série de data multiples.
Je te suggère d'aller visiter le site de highcharts où un exemple montre ce type de graphique.
http://jsfiddle.net/gh/get/jquery/1.9.1 ... d-grouped/

Jean
Jean

Station :
VP2pro + anémomètre ultrasons et console Vue
Cumulus 1.9.4 + Cumulus2SQL + MySQL

Audio :
FR
PC :
W10 64bits migré
http://meteoserignan.ddns.net
Image

bprophete
Messages : 3
Enregistré le : 07 janv. 2015, 18:55

Re: Affichage incorrect de graphique

Message par bprophete » 08 janv. 2015, 14:36

Bonjour,
Merci bcp pour votre reponse.
Comme vous pouvez voir l'image du graphe j'ai deja affiche plusieurs colonnes, j'aimerais que chaque date du mois soit positionnee au dessous de chaque colonne
non pas toutes les dates sont regroupee au dessous d'une seule colonne. j'ai vu l'exemple du lien, le fait que mes donnees doivent provenir d'une base de donnees, cela me parait un peu complique...
xAxis: {
categories: ['<?php echo join($data111, ',') ?>']
}
c'est cette partie de mon code qui m'affiche les dates du mois regoupees au dessous d'une seule colonne, j'aimerais que chaque date se trouve au desous de chaque colonne..
Merici pour votre aide
Baptiste
Vous n’avez pas les permissions nécessaires pour voir les fichiers joints à ce message.

Avatar du membre
jturlier
Administrateur du site
Messages : 393
Enregistré le : 10 déc. 2014, 10:20
Localisation : Sérignan 34410
Contact :

Re: Affichage incorrect de graphique

Message par jturlier » 08 janv. 2015, 17:23

Bonsoir,
tu as sans doute oublié que highchart utilise les fonctionnalité d'Ajax et que la partie PHP incluse dans le script java n'est pas générée. Il faut donc que tu charges des variables javascript contenant tes valeurs hors de la balise chart ($Xlab est une array avec les valeurs des labels)
eval(<?php echo "'var dXlab = ".json_encode($Xlab)."'" ?>);

Je te conseille d'étudier le script php traceH1 de NOAAcompare pour comprendre comment fonctionne le passage des variables issues de PHP vers Javascript. Cela te permettra ensuite de jongler avec le résultat de tes requêtes SQL et leur utilisation dans highchart.
Je me souviens avoir passé au moins 2 semaines avant de comprendre comment passer mes variables php à highchart et contrairement à toi maintenant, je n'avais pas d'exemples !

Je peux difficilement être plus précis puisque ce forum n'est pas dédié à highchart et highstock spécifiquement , mais à leur utilisation en temps que template dans les sites d'utilisateurs consacrés à la météo. On trouve un peu de doc à droite et à gauche, en Anglais sur le sujet, je ne pense pas que cela te gêne puisque tu travailles sur des villes du New Jersey

Bonne chance pour la suite
Jean

Station :
VP2pro + anémomètre ultrasons et console Vue
Cumulus 1.9.4 + Cumulus2SQL + MySQL

Audio :
FR
PC :
W10 64bits migré
http://meteoserignan.ddns.net
Image

bprophete
Messages : 3
Enregistré le : 07 janv. 2015, 18:55

Re: Affichage incorrect de graphique

Message par bprophete » 08 janv. 2015, 18:28

Merci bcp pour ton orientation, bien que j'ai reussi a le faire, maintenant chaque date est affectee a chaque colonne j'ai juste remplace cette partie de mon code xAxis: {
categories: ['<?php echo join($data111, ',') ?>']}, par '<?php echo join($data111," ',' ") ?>. Maintenant j'essaie d'empecher le nom de series de se repeter plusieurs fois,
dans la partie series: [{
type: 'column',
name: '<?php echo join($data333, ', ');?>',
, ;a variable data333 contient le nom de serie qui s'affiche plusieurs fois j'aimerais qu'il s'affiche qu'une seule fois,
je voudrais avoir de l'aide maintenant voir (image)
Merici,
Baptiste
Vous n’avez pas les permissions nécessaires pour voir les fichiers joints à ce message.

Répondre