Je vous m'explique mon but afin de répondre à un cahier des charge : il me doit de faire un graphique.
Jusque là tout va bien, mon but étant d'afficher un graphique en récupérant des valeurs dans une table d'une base de données, cela étonnement de ma part fonctionne parfaitement, simplement à chaque ajouts de colonnes ( la colonne "lol" est une colonne sérieuse...
Structure de la base de données Graph :
Voici mon code en entier :
Code : Tout sélectionner
<?php
$con = mysql_connect("localhost","root","");
if (!$con) {
die('Could not connect: ' . mysql_error());
}
mysql_select_db("graph", $con);
$sth = mysql_query("SELECT revenue FROM projections_sample");
$rows = array(); // Affichage des valeur pour la colonne revenue
$rows['name'] = 'Revenue';
while($r = mysql_fetch_array($sth)) {
$rows['data'][] = $r['revenue'];
}
$sth = mysql_query("SELECT overhead FROM projections_sample");
$rows1 = array(); // Affichage des valeur pour la colonne overhead
$rows1['name'] = 'Overhead';
while($rr = mysql_fetch_assoc($sth)) {
$rows1['data'][] = $rr['overhead'];
}
$sth = mysql_query("SELECT lol FROM projections_sample");
$rows2 = array(); // Affichage des valeur pour la colonne lol RAJOUTER A LA MAIN...
$rows2['name'] = 'lol';
while($rrr = mysql_fetch_assoc($sth)) {
$rows2['data'][] = $rrr['lol'];
}
$result = array();
array_push($result,$rows);
array_push($result,$rows1);
array_push($result,$rows2);
print json_encode($result, JSON_NUMERIC_CHECK);
mysql_close($con);
?>
Code : Tout sélectionner
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
var chart;
$(document).ready(function() {
$.getJSON("data.php", function(json) {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'line',
marginRight: 130,
marginBottom: 25
},
title: {
text: 'Revenue vs. Overhead',
x: -20 //center
},
subtitle: {
text: '',
x: -20
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis: {
title: {
text: 'Amount'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
formatter: function() {
return '<b>'+ this.series.name +'</b><br/>'+
this.x +': '+ this.y;
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -10,
y: 100,
borderWidth: 0
},
series: json
});
});
});
});
</script>
</head>
<body>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
</body>
</html>