Populating A Graph With Php/ Mysql

wright67uk · December 7, 2012

Im trying to dynamically generate infomation for a graph.

I have tested my sql queries, and my graph seperatly, but im not really sure how I put them together.

I have made an attempt for the 'Driver' Series, (commented below), but as im sure you can see from my code below, my code is in a bit of a mess. Am I getting anywhere?

in the code below, you will see that the different series are already populated with figures.

I would like to delete the numbers, and replace them with info generated by php/ MySql.

Ive commented below each series, the outcome im looking for.

Any help, advice or suggestions, would be very much appreciated!

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<?php
$hostname_connect= "#"; $database_connect= "#";
$username_connect= "#"; $password_connect= "#";
$connect_solning = mysql_connect($hostname_connect, $username_connect, $password_connect) or trigger_error(mysql_error(),E_USER_ERROR);
@mysql_select_db($database_connect) or die (mysql_error());

$tbl_name = "snag";
$result = mysql_query("SELECT yard FROM `snag` WHERE club = 'Driver' AND user_id = 1");
while($row=mysql_fetch_array($result)) {
$yard=$row["yard"];
}
?>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
var chart;
$(document).ready(function() {
 chart = new Highcharts.Chart({
	 chart: {
		 renderTo: 'container',
		 type: 'line',
		 marginRight: 130,
		 marginBottom: 25
	 },
	 title: {
		 text: 'Ranges by Club',
		 x: -20 //center
	 },
	 subtitle: {
		 text: 'Ranges',
		 x: -20
	 },
	 xAxis: {
		 categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
			 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
 /* SELECT sdate FROM snag WHERE user_id = 1 */
	 },
	 yAxis: {
		 title: {
			 text: 'Score'
		 },
		 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
	 },


/* MY ATTEMPT FOR DRIVER SERIES BELOW */		


 series: [{
		 name: 'Driver',
		 data: [<?php echo "$yard, " ?>]
/* SELECT yard FROM `snag` WHERE club = 'Driver' AND user_id = 1 */
	 }, {
		 name: '3 Wood',
		 data: [-0.2, 0.8, 5.7, 11.3, 7.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
/* SELECT yard FROM `snag` WHERE club = '3 wood' AND user_id = 1 */
	 }, {
		 name: '5 Wood',
		 data: [-0.9, 0.6, 3.5, 5.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
/* SELECT yard FROM `snag` WHERE club = '5 wood' AND user_id = 1 */
	 }, {
		 name: 'Hybrid',
		 data: [6.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
/* SELECT yard FROM `snag` WHERE club = 'Hybrid' AND user_id = 1 */
 }, {
		 name: '3 iron',
		 data: [4.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 5.8]
/* SELECT yard FROM `snag` WHERE club = '3 iron' AND user_id = 1 */
 }, {
		 name: '4 iron',
		 data: [2.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 6.8]
/* SELECT yard FROM `snag` WHERE club = '4 iron' AND user_id = 1 */
 }, {
		 name: '5 iron',
		 data: [1.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 7.8]
/* SELECT yard FROM `snag` WHERE club = '5 iron' AND user_id = 1 */
 }, {
		 name: '6 iron',
		 data: [3.8, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 8.8]
/* SELECT yard FROM `snag` WHERE club = '6 iron' AND user_id = 1 */
 }, {
		 name: '7 iron',
		 data: [3.6, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 9.8]
/* SELECT yard FROM `snag` WHERE club = '7 iron' AND user_id = 1 */
 }, {
		 name: '8 iron',
		 data: [3.5, 4.1, 5.5, 1.5, 18.9, 13.2, 16.0, 16.8, 14.6, 10.4, 6.4, 4.4]
/* SELECT yard FROM `snag` WHERE club = '8 iron' AND user_id = 1 */
 }, {
		 name: '9 iron',
		 data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
/* SELECT yard FROM `snag` WHERE club = '9 iron' AND user_id = 1 */
 }, {
		 name: 'P Wedge',
		 data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
/* SELECT yard FROM `snag` WHERE club = 'P wedge' AND user_id = 1 */
 }, {
		 name: 'S Wedge',
		 data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
/* SELECT yard FROM `snag` WHERE club = 'S Wedge' AND user_id = 1 */
	 }]
 });
});

});
</script>
</head>
<body>
<script src="../../js/highcharts.js"></script>
<script src="../../js/modules/exporting.js"></script>
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto">
</div>
</body>
</html>

trq · December 7, 2012

Just use json_encode to format your data into a format that Javascript understands.

Sign In

Populating A Graph With Php/ Mysql

Recommended Posts

wright67uk

Link to comment

Share on other sites

trq

Link to comment

Share on other sites

Archived

Browse

Activity

Important Information