Dữ liệu
INSERT INTO top_odi_wicket_takers[player, wickets] VALUES['MA Starc', 34];
INSERT INTO top_odi_wicket_takers[player, wickets] VALUES['ST Finn', 27];
INSERT INTO top_odi_wicket_takers[player, wickets] VALUES['Imran Tahir', 25];
INSERT INTO top_odi_wicket_takers[player, wickets] VALUES['M Morkel', 21];
INSERT INTO top_odi_wicket_takers[player, wickets] VALUES['TA Boult', 36];
INSERT INTO top_odi_wicket_takers[player, wickets] VALUES['TG Southee', 28];
INSERT INTO top_odi_wicket_takers[player, wickets] VALUES['CJ Anderson', 25];
INSERT INTO top_odi_wicket_takers[player, wickets] VALUES['Wahab Riaz', 25];
INSERT INTO top_odi_wicket_takers[player, wickets] VALUES['JH Davey', 21];
INSERT INTO top_odi_wicket_takers[player, wickets] VALUES['UT Yadav', 22];
COPY
4 không hữu ích lắm và nó không cung cấp các bản cập nhật cho dữ liệu cơ bản trong khi trong trường hợp của INSERT INTO top_odi_wicket_takers[player, wickets] VALUES['MA Starc', 34];
INSERT INTO top_odi_wicket_takers[player, wickets] VALUES['ST Finn', 27];
INSERT INTO top_odi_wicket_takers[player, wickets] VALUES['Imran Tahir', 25];
INSERT INTO top_odi_wicket_takers[player, wickets] VALUES['M Morkel', 21];
INSERT INTO top_odi_wicket_takers[player, wickets] VALUES['TA Boult', 36];
INSERT INTO top_odi_wicket_takers[player, wickets] VALUES['TG Southee', 28];
INSERT INTO top_odi_wicket_takers[player, wickets] VALUES['CJ Anderson', 25];
INSERT INTO top_odi_wicket_takers[player, wickets] VALUES['Wahab Riaz', 25];
INSERT INTO top_odi_wicket_takers[player, wickets] VALUES['JH Davey', 21];
INSERT INTO top_odi_wicket_takers[player, wickets] VALUES['UT Yadav', 22];
COPY
5, dữ liệu được hiển thị trên biểu đồ luôn mớiNhưng làm thế nào để chúng ta thực hiện liên kết động của dữ liệu? . Dữ liệu cần thiết được lưu trữ trong một nguồn bên ngoài có thể là cơ sở dữ liệu và được cung cấp cho biểu đồ thông qua chương trình phía máy chủ như trong sơ đồ bên dưới
Trong bài viết này, chúng tôi sẽ chỉ cho bạn cách viết mã phía máy chủ bằng PHP để truy xuất dữ liệu từ cơ sở dữ liệu MySQL và liên kết dữ liệu thu được với biểu đồ. Chúng tôi sẽ chia bài viết này thành hai phần
- Cài đặt phần mềm tiên quyết
- Tạo cơ sở dữ liệu và khởi tạo với dữ liệu gốc trong MySQL
- Triển khai chương trình máy chủ dựa trên PHP
- Tích hợp biểu đồ với dữ liệu từ máy chủ
Để chứng minh điều này, chúng ta hãy xem xét dữ liệu của 10 tay vợt hàng đầu trong môn cricket One Day International [ODI] trong năm 2015
Bước 1. Cài đặt phần mềm tiên quyết
Ghi chú. Bạn có thể bỏ qua bước này nếu đã cài đặt LAMP hoặc WAMP
Để mã trong bài viết này hoạt động, chúng tôi cần cài đặt như sau
- mysql
- máy chủ apache
- PHP
Ngăn xếp này thường được gọi là ngăn xếp *AMP[Apache MySQL PHP] và khi bạn bao gồm nền tảng mà ngăn xếp này đang chạy thì nó sẽ trở thành WAMP [Windows Apache MySql PHP] hoặc LAMP [Linux Apache MySQL PHP]. Vì vậy, có rất nhiều nhà cung cấp đóng gói ngăn xếp này và cung cấp nó để tải xuống. Đối với bài viết này, chúng tôi sẽ sử dụng gói WAMP do Bitnami cung cấp và có thể tải xuống từ đây
Khi kết thúc quá trình cài đặt gói WAMP, bạn sẽ được nhắc khởi chạy ứng dụng như hình bên dưới
Bạn có thể quản lý máy chủ MySQL DB và máy chủ Apache bằng cách nhấp vào tab Quản lý máy chủ như hình bên dưới
Bước 2. Tạo cơ sở dữ liệu và khởi tạo với dữ liệu gốc trong MySQL
Gói WAMP được cài đặt ở trên cung cấp một ứng dụng dựa trên trình duyệt để tương tác với MySQL DB. Ứng dụng dựa trên trình duyệt có thể được truy cập tại. http. //127. 0. 0. 1/phpmyadmin/. Bạn sẽ được nhắc nhập tên người dùng và mật khẩu như hình bên dưới
Tên người dùng là 'root' và mật khẩu là mật khẩu bạn đã định cấu hình trong quá trình cài đặt ngăn xếp WAMP
Bây giờ chúng ta hãy đến với việc thiết lập dữ liệu bảng và hạt giống. Bảng chứa dữ liệu được tạo thành từ hai cột là tên của người chơi và số lần bắt bóng. Lệnh SQL CREATE TABLE để tạo bảng được đưa ra bên dưới
USE test;
CREATE TABLE top_odi_wicket_takers[
player varchar[255],
wickets integer,
PRIMARY KEY [player]
];
COPY
Bây giờ chúng ta hãy tạo bảng này với một số dữ liệu ban đầu được lấy từ đây như hình bên dưới
INSERT INTO top_odi_wicket_takers[player, wickets] VALUES['MA Starc', 34];
INSERT INTO top_odi_wicket_takers[player, wickets] VALUES['ST Finn', 27];
INSERT INTO top_odi_wicket_takers[player, wickets] VALUES['Imran Tahir', 25];
INSERT INTO top_odi_wicket_takers[player, wickets] VALUES['M Morkel', 21];
INSERT INTO top_odi_wicket_takers[player, wickets] VALUES['TA Boult', 36];
INSERT INTO top_odi_wicket_takers[player, wickets] VALUES['TG Southee', 28];
INSERT INTO top_odi_wicket_takers[player, wickets] VALUES['CJ Anderson', 25];
INSERT INTO top_odi_wicket_takers[player, wickets] VALUES['Wahab Riaz', 25];
INSERT INTO top_odi_wicket_takers[player, wickets] VALUES['JH Davey', 21];
INSERT INTO top_odi_wicket_takers[player, wickets] VALUES['UT Yadav', 22];
COPY
Chúng tôi có thể xác minh xem dữ liệu có được chèn hay không bằng cách chạy lệnh SELECT SQL như hình bên dưới
SELECT * FROM top_odi_wicket_takers;
+-------------+---------+
| player | wickets |
+-------------+---------+
| CJ Anderson | 25 |
| Imran Tahir | 25 |
| JH Davey | 21 |
| M Morkel | 21 |
| MA Starc | 34 |
| ST Finn | 27 |
| TA Boult | 36 |
| TG Southee | 28 |
| UT Yadav | 22 |
| Wahab Riaz | 25 |
+-------------+---------+
10 rows in set [0.00 sec]
COPY
Với điều này, chúng tôi có dữ liệu cần thiết trong cơ sở dữ liệu. Bây giờ chúng ta hãy tiếp tục xem cách triển khai chương trình máy chủ trong PHP
Bước 3. Triển khai chương trình máy chủ dựa trên PHP
PHP là một trong những ngôn ngữ lập trình phía máy chủ được sử dụng rộng rãi nhất. [các ngôn ngữ khác như vậy là Java, C#, Ruby, Node. js]
Trước tiên chúng ta hãy liệt kê các bước liên quan đến chương trình trước khi chúng ta tiến hành triển khai nó
- Thiết lập kết nối với Cơ sở dữ liệu MySQL bằng tên máy chủ, tên người dùng, mật khẩu và tên cơ sở dữ liệu
- Thực hiện truy vấn để lấy danh sách người chơi từ DB và lưu trữ chúng trong một biến
- Lặp lại tập kết quả để xây dựng một mảng bản đồ trong đó mỗi bản đồ bao gồm hai khóa cụ thể là. nhãn và giá trị. Nhãn lưu trữ tên của người chơi và giá trị chứa số lượng giá đỡ
- Mã hóa mảng bản đồ thành JSON và sau đó xuất JSON được mã hóa. [Nếu JSON là một cái gì đó mới đối với bạn, thì chúng tôi khuyên bạn nên đọc về nó tại đây. ]
Việc thực hiện các bước trên như sau
- Tên người dùng mặc định để kết nối với phiên bản MySQL đang chạy trên máy của bạn là root và mật khẩu là mật khẩu bạn đã chỉ định trong quá trình cài đặt gói WAMP của mình. Sự tương tác với cơ sở dữ liệu từ PHP đạt được bằng cách sử dụng tiện ích mở rộng mysqli. Dưới đây là cài đặt mặc định để thiết lập kết nối
Bạn có thể thiết lập tùy chỉnh
6 vàINSERT INTO top_odi_wicket_takers[player, wickets] VALUES['MA Starc', 34]; INSERT INTO top_odi_wicket_takers[player, wickets] VALUES['ST Finn', 27]; INSERT INTO top_odi_wicket_takers[player, wickets] VALUES['Imran Tahir', 25]; INSERT INTO top_odi_wicket_takers[player, wickets] VALUES['M Morkel', 21]; INSERT INTO top_odi_wicket_takers[player, wickets] VALUES['TA Boult', 36]; INSERT INTO top_odi_wicket_takers[player, wickets] VALUES['TG Southee', 28]; INSERT INTO top_odi_wicket_takers[player, wickets] VALUES['CJ Anderson', 25]; INSERT INTO top_odi_wicket_takers[player, wickets] VALUES['Wahab Riaz', 25]; INSERT INTO top_odi_wicket_takers[player, wickets] VALUES['JH Davey', 21]; INSERT INTO top_odi_wicket_takers[player, wickets] VALUES['UT Yadav', 22];
COPY7 để kết nối với cơ sở dữ liệuINSERT INTO top_odi_wicket_takers[player, wickets] VALUES['MA Starc', 34]; INSERT INTO top_odi_wicket_takers[player, wickets] VALUES['ST Finn', 27]; INSERT INTO top_odi_wicket_takers[player, wickets] VALUES['Imran Tahir', 25]; INSERT INTO top_odi_wicket_takers[player, wickets] VALUES['M Morkel', 21]; INSERT INTO top_odi_wicket_takers[player, wickets] VALUES['TA Boult', 36]; INSERT INTO top_odi_wicket_takers[player, wickets] VALUES['TG Southee', 28]; INSERT INTO top_odi_wicket_takers[player, wickets] VALUES['CJ Anderson', 25]; INSERT INTO top_odi_wicket_takers[player, wickets] VALUES['Wahab Riaz', 25]; INSERT INTO top_odi_wicket_takers[player, wickets] VALUES['JH Davey', 21]; INSERT INTO top_odi_wicket_takers[player, wickets] VALUES['UT Yadav', 22];
COPY
connect_error] {
die["Connection failed: " . $conn->connect_error];
}
?>
COPY
- Khi chúng tôi đã thiết lập kết nối, chúng tôi sử dụng đối tượng kết nối \$conn để thực thi bất kỳ lệnh SQL nào. Bây giờ chúng ta có thể thực hiện truy vấn SQL của mình như hình bên dưới
________số 8_______
- Bây giờ chúng ta phải xử lý kết quả $ thu được ở bước trên ở dạng được FusionCharts hiểu. FusionCharts sử dụng dữ liệu biểu đồ ở dạng danh sách các cặp giá trị nhãn. Nếu có các hàng/dữ liệu được trả về bởi truy vấn, chúng tôi sẽ chuyển đổi dữ liệu đó thành một mảng kết hợp. Mảng kết hợp cũng giống như bất kỳ mảng nào khác nhưng thay cho chỉ số, nó sử dụng các khóa để lưu trữ giá trị của phần tử mảng. Dưới đây là cách triển khai để xử lý dữ liệu trong đối tượng $result
num_rows > 0] {
//Converting the results into an associative array
while[$row = $result->fetch_assoc[]] {
$jsonArrayItem = array[];
$jsonArrayItem['label'] = $row['player'];
$jsonArrayItem['value'] = $row['wickets'];
//append the above created object into the main array.
array_push[$jsonArray, $jsonArrayItem];
}
}
?>
COPY
- Bây giờ chúng ta hãy mã hóa dữ liệu được xử lý ở bước trên thành dữ liệu JSON như hình bên dưới
close[];
//set the response content type as JSON
header['Content-type: application/json'];
//output the return value of json encode using the echo function.
echo json_encode[$jsonArray];
?>
COPY
Hãy để chúng tôi tích hợp mã chúng tôi có từ tất cả các bước trên vào một tệp có tên. chart_data. php và đặt tệp này tại BITNAMI_INSTALL_DIR\apache2\htdocs, trong đó BITNAMI_INSTALL_DIR là đường dẫn cài đặt gói Bitnami WAMP của bạn
Ghi chú. Cũng có các cách tiếp cận khác để triển khai ứng dụng PHP mà chúng tôi đã tạo như mô tả
Nội dung của chart_data. php như hình bên dưới
connect_error] {
die["Connection failed: " . $conn->connect_error];
}
//the SQL query to be executed
$query = "SELECT * FROM top_odi_wicket_takers";
//storing the result of the executed query
$result = $conn->query[$query];
//initialize the array to store the processed data
$jsonArray = array[];
//check if there is any data returned by the SQL Query
if [$result->num_rows > 0] {
//Converting the results into an associative array
while[$row = $result->fetch_assoc[]] {
$jsonArrayItem = array[];
$jsonArrayItem['label'] = $row['player'];
$jsonArrayItem['value'] = $row['wickets'];
//append the above created object into the main array.
array_push[$jsonArray, $jsonArrayItem];
}
}
//Closing the connection to DB
$conn->close[];
//set the response content type as JSON
header['Content-type: application/json'];
//output the return value of json encode using the echo function.
echo json_encode[$jsonArray];
?>
COPY
var apiChart = new FusionCharts[{
type: "column2d",
renderAt: "api-chart-container",
width: "550",
height: "350",
dataFormat: "json",
dataSource: {
chart: chartProperties,
data: chartData
}
}];
$[function[] {
$["#background-btn"].click[function[] {
modifyBackground[];
}];
$["#canvas-btn"].click[function[] {
modifyCanvas[];
}];
$["#dataplot-btn"].click[function[] {
modifyDataplot[];
}];
apiChart.render[];
}];
function modifyBackground[] {
//to be implemented
}
function modifyCanvas[] {
//to be implemented
}
function modifyDataplot[] {
//to be implemented
}
COPY
Để chạy chart_data. php, mở http. // localhost/chart_data. php trong trình duyệt của bạn. Bạn sẽ thấy đầu ra JSON bên dưới
[
{
label: "CJ Anderson",
value: "25"
},
{
label: "Imran Tahir",
value: "25"
},
...
...
]
COPY
Vì vậy, với điều này, chúng tôi đã có sẵn nguồn dữ liệu cho biểu đồ. Bây giờ chúng ta hãy tiếp tục và tích hợp nó với thư viện FusionCharts
Bước 4. Tích hợp biểu đồ với dữ liệu từ Server
Trước tiên, chúng ta hãy tải xuống các thư viện JavaScript cần thiết
- Tải xuống FusionCharts từ đây [nếu bạn chưa có] và sao chép các tệp JavaScript cần thiết trong thư mục js trong BITNAMI_INSTALL_DIR\apache2\htdocs
- Tải xuống jQuery 2. x từ đây và sao chép nó vào thư mục js đã tạo ở trên
Bây giờ chúng ta hãy tạo trang HTML chart_sample. html cần thiết để hiển thị biểu đồ
INSERT INTO top_odi_wicket_takers[player, wickets] VALUES['MA Starc', 34];
INSERT INTO top_odi_wicket_takers[player, wickets] VALUES['ST Finn', 27];
INSERT INTO top_odi_wicket_takers[player, wickets] VALUES['Imran Tahir', 25];
INSERT INTO top_odi_wicket_takers[player, wickets] VALUES['M Morkel', 21];
INSERT INTO top_odi_wicket_takers[player, wickets] VALUES['TA Boult', 36];
INSERT INTO top_odi_wicket_takers[player, wickets] VALUES['TG Southee', 28];
INSERT INTO top_odi_wicket_takers[player, wickets] VALUES['CJ Anderson', 25];
INSERT INTO top_odi_wicket_takers[player, wickets] VALUES['Wahab Riaz', 25];
INSERT INTO top_odi_wicket_takers[player, wickets] VALUES['JH Davey', 21];
INSERT INTO top_odi_wicket_takers[player, wickets] VALUES['UT Yadav', 22];
COPY
0Mã tương tác với máy chủ PHP được triển khai ở trên. Mã này hiển thị biểu đồ bằng thư viện Javascript được triển khai trong tệp
INSERT INTO top_odi_wicket_takers[player, wickets] VALUES['MA Starc', 34];
INSERT INTO top_odi_wicket_takers[player, wickets] VALUES['ST Finn', 27];
INSERT INTO top_odi_wicket_takers[player, wickets] VALUES['Imran Tahir', 25];
INSERT INTO top_odi_wicket_takers[player, wickets] VALUES['M Morkel', 21];
INSERT INTO top_odi_wicket_takers[player, wickets] VALUES['TA Boult', 36];
INSERT INTO top_odi_wicket_takers[player, wickets] VALUES['TG Southee', 28];
INSERT INTO top_odi_wicket_takers[player, wickets] VALUES['CJ Anderson', 25];
INSERT INTO top_odi_wicket_takers[player, wickets] VALUES['Wahab Riaz', 25];
INSERT INTO top_odi_wicket_takers[player, wickets] VALUES['JH Davey', 21];
INSERT INTO top_odi_wicket_takers[player, wickets] VALUES['UT Yadav', 22];
COPY
8. Đặt tệp INSERT INTO top_odi_wicket_takers[player, wickets] VALUES['MA Starc', 34];
INSERT INTO top_odi_wicket_takers[player, wickets] VALUES['ST Finn', 27];
INSERT INTO top_odi_wicket_takers[player, wickets] VALUES['Imran Tahir', 25];
INSERT INTO top_odi_wicket_takers[player, wickets] VALUES['M Morkel', 21];
INSERT INTO top_odi_wicket_takers[player, wickets] VALUES['TA Boult', 36];
INSERT INTO top_odi_wicket_takers[player, wickets] VALUES['TG Southee', 28];
INSERT INTO top_odi_wicket_takers[player, wickets] VALUES['CJ Anderson', 25];
INSERT INTO top_odi_wicket_takers[player, wickets] VALUES['Wahab Riaz', 25];
INSERT INTO top_odi_wicket_takers[player, wickets] VALUES['JH Davey', 21];
INSERT INTO top_odi_wicket_takers[player, wickets] VALUES['UT Yadav', 22];
COPY
8 vào thư mục SELECT * FROM top_odi_wicket_takers;
+-------------+---------+
| player | wickets |
+-------------+---------+
| CJ Anderson | 25 |
| Imran Tahir | 25 |
| JH Davey | 21 |
| M Morkel | 21 |
| MA Starc | 34 |
| ST Finn | 27 |
| TA Boult | 36 |
| TG Southee | 28 |
| UT Yadav | 22 |
| Wahab Riaz | 25 |
+-------------+---------+
10 rows in set [0.00 sec]
COPY
0. Việc triển khai javascript được hiển thị bên dưới