使用 PHP 将 jQuery Chart 绑定到 MySql 数据库

在这篇文章中，我们将展示如何使用 PHP 将我们的 jQuery 图表连接到 MySQL 数据库。我们将从 MySQL 数据库获取数据，特别是 Northwind 数据库。您可以从 这里 下载 Northwind 数据库 .sql 脚本，并在 MySQL 中运行它以创建数据库。

我们需要做的第一件事是创建我们将用于连接的文件。我们将把这个文件命名为 connect.php。

<?php
# FileName="connect.php"
$hostname = "localhost";
$database = "northwind";
$username = "root";
$password = "";
?>

现在我们有了用于连接的文件，我们需要创建运行查询并获取数据的文件，以便我们的图表可以填充数据。我们将把这个文件命名为 data.php。

<?php
	#Include the connect.php file
	include('connect.php');
	#Connect to the database
	//connection String
	$connect = mysql_connect($hostname, $username, $password)
	or die('Could not connect: ' . mysql_error());
	//Select The database
	$bool = mysql_select_db($database, $connect);
	if ($bool === False){
	   print "can't find $database";
	}

	$query = "SELECT * FROM  `invoices` ORDER BY OrderDate LIMIT 0 , 100";
	$result = mysql_query($query) or die("SQL Error 1: " . mysql_error());

	// get data and store in a json array
	while ($row = mysql_fetch_array($result, MYSQL_ASSOC)) {
		$orders[] = array(
			'OrderDate' => $row['OrderDate'],
			'ProductName' => $row['ProductName'],
			'Quantity' => $row['Quantity']
		  );
	}

	echo json_encode($orders);
?>

数据以 JSON 格式返回。 这就是连接和数据收集的全部内容。 让我们看看如何将我们刚刚收集的数据添加到我们的 jQuery 图表中。 创建 index.php 文件并添加对以下 JavaScript 和 CSS 文件的引用。

<link rel="stylesheet" 
href="styles/jqx.base.css" type="text/css" />
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="jqxcore.js"></script>
<script type="text/javascript" src="jqxchart.js"></script>
<script type="text/javascript" src="jqxdata.js"></script>

为图表创建一个 div 标签。

<div id="jqxChart"></div>

创建您的图表并加载数据。 我们为图表定义一个源对象，并将该源绑定到返回 JSON 数据的 data.php。 我们还设置了 settings 对象，并定义了图表的 categoryAxis （水平 X 轴）、valueAxis （垂直 Y 轴）和图表序列。 有关图表初始化的更多信息，请访问帮助主题 jquery-chart-getting-started.htm。

<script type="text/javascript">
	$(document).ready(function () {
		var source =
		{
			 datatype: "json",
			 datafields: [
				 { name: 'OrderDate', type: 'date'},
				 { name: 'Quantity'},
				 { name: 'ProductName'}
			],
			url: 'data.php'
		};		

	   var dataAdapter = new $.jqx.dataAdapter(source,
		{
			autoBind: true,
			async: false,
			downloadComplete: function () { },
			loadComplete: function () { },
			loadError: function () { }
		});

	 // prepare jqxChart settings
		var settings = {
			title: "Orders by Date",
			showLegend: true,
			padding: { left: 5, top: 5, right: 5, bottom: 5 },
			titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
			source: dataAdapter,
			categoryAxis:
				{
					text: 'Category Axis',
					textRotationAngle: 0,
					dataField: 'OrderDate',
					formatFunction: function (value) {
						return $.jqx.dataFormat.formatdate(value, 'dd/MM/yyyy');
					},
					showTickMarks: true,
					tickMarksInterval: Math.round(dataAdapter.records.length / 6),
					tickMarksColor: '#888888',
					unitInterval: Math.round(dataAdapter.records.length / 6),
					showGridLines: true,
					gridLinesInterval: Math.round(dataAdapter.records.length / 3),
					gridLinesColor: '#888888',
					axisSize: 'auto'
				},
			colorScheme: 'scheme05',
			seriesGroups:
				[
					{
						type: 'line',
						valueAxis:
						{
							displayValueAxis: true,
							description: 'Quantity',
							//descriptionClass: 'css-class-name',
							axisSize: 'auto',
							tickMarksColor: '#888888',
							unitInterval: 20,
							minValue: 0,
							maxValue: 100
						},
						series: [
								{ dataField: 'Quantity', displayText: 'Quantity' }
						  ]
					}
				]
		};

		// setup the chart
		$('#jqxChart').jqxChart(settings);
	});
</script>

结果是一个美观的 jQuery 图表。

CodeProject