Hướng dẫn chart in php with database - biểu đồ php với cơ sở dữ liệu

 PDO::ERRMODE_EXCEPTION,
                            \PDO::ATTR_PERSISTENT => false
                        )
                    );
	
    $handle = $link->prepare('select x, y from datapoints'); 
    $handle->execute(); 
    $result = $handle->fetchAll(\PDO::FETCH_OBJ);
		
    foreach($result as $row){
        array_push($dataPoints, array("x"=> $row->x, "y"=> $row->y));
    }
	$link = null;
}
catch(\PDOException $ex){
    print($ex->getMessage());
}
	
?>


  






                              

Có hai cách lấy dữ liệu cho biểu đồ:

1. Về mặt thống kê - bằng cách xác định dữ liệu trong quá trình tạo biểu đồ - by defining the data during the creation of the chart
2. Động lực - bằng cách truy xuất dữ liệu từ một nguồn khác - by retrieving data from another source

    USE test;
    CREATE TABLE top_odi_wicket_takers(
      player varchar(255),
        wickets integer,
        PRIMARY KEY (player)
    );

    USE test;
    CREATE TABLE top_odi_wicket_takers(
      player varchar(255),
        wickets integer,
        PRIMARY KEY (player)
    );

Nhưng làm thế nào để chúng ta đi về ràng buộc động của dữ liệu? Trước khi chúng tôi giải thích điều đó, chúng tôi hãy hiểu cách liên kết động của dữ liệu hoạt động. 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ơ đồ dưới đây:

Trong bài viết này, chúng tôi sẽ chỉ cho bạn cách viết mã bên máy chủ trong 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 điều kiện tiên quyết
• Tạo cơ sở dữ liệu và khởi tạo với dữ liệu hạt giống 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 người chơi wicket hàng đầu trong môn cricket một ngày quốc tế (ODI) trong năm 2015.

Bước 1: Cài đặt phần mềm điều kiện tiên quyết

Lưu ý: Bạn có thể bỏ qua bước này nếu bạn đã cài đặt đèn hoặc WAMP.

Để có được mã trong bài viết này, chúng tôi sẽ cần cài đặt như sau:

• Mysql
• Máy chủ web Apache
• PHP

Ngăn xếp này được gọi phổ biến là *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à làm cho nó có sẵ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ể được tải xuống từ đây.

Khi kết thúc việc cài đặt gói WAMP, bạn sẽ được nhắc khởi chạy ứng dụng như được hiển thị bên dưới:

Bạn có thể quản lý máy chủ DB MySQL và máy chủ Apache bằng cách nhấp vào tab Quản lý máy chủ như được hiển thị bên dưới:Manage Servers tab as shown below:

Bước 2: Tạo cơ sở dữ liệu và khởi tạo với dữ liệu hạt giống 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 DB MySQL. Có thể truy cập ứng dụng dựa trên trình duyệt 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ư dưới đây:

Tên người dùng là 'root' và mật khẩu là tên bạn được cấu hình trong quá trình cài đặt ngăn xếp WAMP.'root' and password is the one you configured during the installation of the WAMP stack.

Bây giờ chúng ta hãy đến để 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ượng bấc. Lệnh tạo bảng SQL để tạo bảng được đưa ra dưới đây:

    USE test;
    CREATE TABLE top_odi_wicket_takers(
      player varchar(255),
        wickets integer,
        PRIMARY KEY (player)
    );

Bây giờ chúng ta hãy gieo hạt bảng này với một số dữ liệu ban đầu được lấy từ đây như hình dưới đây:

    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);

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 chọn SQL như hiển thị 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)

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 tôi tiến hành 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.

• 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 để có được danh sách người chơi từ DB và lưu trữ chúng trong một biến.
• Lặp lại trên kết quả được đặt để xây dựng một mảng các bản đồ trong đó mỗi bản đồ bao gồm hai khóa 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 bấclabel and value. The label stores the name of the player and value contains the number of wickets
• 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 cho bạn, thì chúng tôi sẽ khuyên bạn nên đọc về nó ở đâ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 chạy trên máy của bạn là root và mật khẩu là tên bạn đã chỉ định trong quá trình cài đặt gói WAMP của bạn. 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à triển khai mặc định để thiết lập kết nối:root and password is the one you specified during the installation of your WAMP bundle. The interaction with the database from PHP is achieved using the mysqli extension. Below is the default implementation to establish the connection:

Bạn có thể đặt tùy chỉnh

    USE test;
    CREATE TABLE top_odi_wicket_takers(
      player varchar(255),
        wickets integer,
        PRIMARY KEY (player)
    );

7 và

    USE test;
    CREATE TABLE top_odi_wicket_takers(
      player varchar(255),
        wickets integer,
        PRIMARY KEY (player)
    );

8 để kết nối với cơ sở dữ liệu.

    <?php
        //address of the server where db is installed
        $servername = "localhost";
        //username to connect to the db
        //the default value is root
        $username = "root";
        //password to connect to the db
        //this is the value you specified during installation of WAMP stack
        $password = "password";
        //name of the db under which the table is created
        $dbName = "test";
        //establishing the connection to the db.
        $conn = new mysqli($servername, $username, $password, $dbName);
        //checking if there were any error during the last connection attempt
        if ($conn->connect_error) {
          die("Connection failed: " . $conn->connect_error);
        }
    ?>

• 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 tôi có thể thực hiện truy vấn SQL của mình như được hiển thị bên dưới:

    <?php
        //the SQL query to be executed
        $query = "SELECT * FROM top_odi_wicket_takers";
        //storing the result of the executed query
        $result = $conn->query($query);
    ?>

• Bây giờ chúng ta phải xử lý kết quả $ thu được trong bước trên trong biểu mẫu được FusionCharts hiểu. FusionCharts sử dụng dữ liệu biểu đồ dưới dạng danh sách các cặp giá trị nhãn. Nếu có các hàng/dữ liệu được truy vấn trả về, chúng tôi sẽ chuyển đổi dữ liệu đó thành một mảng kết hợp. Một mảng kết hợp cũng giống như bất kỳ mảng nào khác nhưng thay cho các 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à việc triển khai để xử lý dữ liệu trong đối tượng $ result:

    <?php
        //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);
          }
        }
    ?>

• Bây giờ chúng ta hãy mã hóa dữ liệu được xử lý trên bước trên dữ liệu JSON như được hiển thị bên dưới:

    <?php
        //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);
    ?>

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 mà gói WAMP Bitnami của bạn được cài đặt.BITNAMI_INSTALL_DIR\apache2\htdocs, where BITNAMI_INSTALL_DIR is the path where your Bitnami WAMP package is installed.

Lưu ý: Có những cách tiếp cận khác cũng như để triển khai ứng dụng PHP mà chúng tôi đã tạo như mô tả ở đây. There are other approaches as well to deploy the PHP application we have created as described here.

Nội dung của Chart_Data.php như được hiển thị bên dưới:

    <?php
        //address of the server where db is installed
        $servername = "localhost";
        //username to connect to the db
        //the default value is root
        $username = "root";
        //password to connect to the db
        //this is the value you would have specified during installation of WAMP stack
        $password = "password";
        //name of the db under which the table is created
        $dbName = "test";
        //establishing the connection to the db.
        $conn = new mysqli($servername, $username, $password, $dbName);
        //checking if there were any error during the last connection attempt
        if ($conn->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);
    ?>

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
}

Để chạy chart_data.php, hãy mở http: //localhost/chart_data.php trong trình duyệt của bạn. Bạn sẽ thấy đầu ra JSON dưới đây:

    USE test;
    CREATE TABLE top_odi_wicket_takers(
      player varchar(255),
        wickets integer,
        PRIMARY KEY (player)
    );

Vì vậy, với điều này, chúng tôi có nguồn dữ liệu của chúng tôi cho biểu đồ sẵn sàng. 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ừ máy chủ

Trước tiên, hãy để chúng tôi tải xuống các thư viện JavaScript cần thiết:

1. Tải xuống FusionCharts từ đây (nếu bạn không có nó) và sao chép các tệp JavaScript cần thiết trong thư mục JS trong Bitnami_Install_Dir \ Apache2 \ HTDOCS.
2. Tải xuống JQuery 2.x từ đây và sao chép nó trong thư mục JS được 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 đồ:

    USE test;
    CREATE TABLE top_odi_wicket_takers(
      player varchar(255),
        wickets integer,
        PRIMARY KEY (player)
    );

Mã tương tác với máy chủ PHP được thực hiện ở trên. Mã này hiển thị biểu đồ bằng thư viện JavaScript được triển khai trong tệp

    USE test;
    CREATE TABLE top_odi_wicket_takers(
      player varchar(255),
        wickets integer,
        PRIMARY KEY (player)
    );

    USE test;
    CREATE TABLE top_odi_wicket_takers(
      player varchar(255),
        wickets integer,
        PRIMARY KEY (player)
    );

    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);

1. Tìm nạp dữ liệu cần thiết từ máy chủ thông qua cuộc gọi AJAX bằng JQuery:

    USE test;
    CREATE TABLE top_odi_wicket_takers(
      player varchar(255),
        wickets integer,
        PRIMARY KEY (player)
    );

1. Sau khi truy xuất dữ liệu từ máy chủ, hãy khởi tạo đối tượng FusionCharts với các thuộc tính biểu đồ và dữ liệu biểu đồ như được hiển thị bên dưới:

    USE test;
    CREATE TABLE top_odi_wicket_takers(
      player varchar(255),
        wickets integer,
        PRIMARY KEY (player)
    );

App.js cuối cùng sẽ trông như dưới đây:

    USE test;
    CREATE TABLE top_odi_wicket_takers(
      player varchar(255),
        wickets integer,
        PRIMARY KEY (player)
    );

Bây giờ tải HTML trong trình duyệt bằng URL:

    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);

FusionCharts sẽ tải ở đây ..

Vui lòng giải nén nó trong thư mục bitnami_install_dir \ apache2 \ htdocs để có mẫu chạy.BITNAMI_INSTALL_DIR\apache2\htdocs folder to get the sample running.

Làm thế nào để bạn kết nối một cơ sở dữ liệu với một biểu đồ?

Làm thế nào bạn sẽ tạo biểu đồ và đồ thị trong PHP từ cơ sở dữ liệu MySQL?

Làm thế nào để bạn tạo biểu đồ dòng bằng cách sử dụng các giá trị cơ sở dữ liệu trong PHP?

5 loại biểu đồ là gì?