Affichage incorrect de graphique
Posté : 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>
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>