Biểu đồ động trong PHP

Question

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ới

Nội dung chính Show

Bước 1. Cài đặt phần mềm tiên quyết
Bước 2. Tạo cơ sở dữ liệu và khởi tạo với dữ liệu gốc trong MySQL
Bước 3. Triển khai chương trình máy chủ dựa trên PHP
Bước 4. Tích hợp biểu đồ với dữ liệu từ Server
Làm cách nào để tạo biểu đồ động trong PHP?
Làm cách nào để tạo biểu đồ thanh động trong PHP?
Làm cách nào để tạo biểu đồ hình tròn động trong PHP với MySQL?
Làm cách nào để tạo biểu đồ trong PHP?

Như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

    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

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

7 để 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);
        }
    ?>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

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

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

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

0

Mã 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

Làm cách nào để tạo biểu đồ động trong PHP?

Tạo đồ thị và biểu đồ động bằng PHP .

Tạo phân trang nâng cao với PHP và MySQL

Phân trang bảng dữ liệu bằng PHP & MySQL

Tạo phân trang bảng Bootstrap với jQuery

Làm cách nào để tạo biểu đồ thanh động trong PHP?

Bước 1. Tạo bảng cơ sở dữ liệu. .

Bước 2. Bao gồm tệp JavaScript. .

Bước 3. Tạo vùng chứa biểu đồ thanh. .

Bước 4. Tạo biểu đồ hoặc biểu đồ thanh động. .

Bước5. Lấy dữ liệu từ bảng cơ sở dữ liệu MySQL. .

3 suy nghĩ về "Tạo biểu đồ thanh động với JavaScript, PHP & MySQL"

Làm cách nào để tạo biểu đồ hình tròn động trong PHP với MySQL?

Đây là các bước chính để tạo biểu đồ hình tròn trong PHP MySQL. .

Đầu tiên, chúng ta cần bao gồm FusionCharts. js lớp JavaScript và FusionCharts. php. .

Tiếp theo, bao gồm DBConn. php để kết nối với cơ sở dữ liệu

Tạo tài liệu XML và lưu trữ nó trong một biến strXML

Kết xuất Biểu đồ hình tròn 3D với dữ liệu từ $strXML

Làm cách nào để tạo biểu đồ trong PHP?

Ví dụ 1. Tạo biểu đồ đường . Một mảng đã được sử dụng để thiết lập dữ liệu để vẽ biểu đồ. Đối tượng Graph đã được sử dụng để hiển thị biểu đồ và đối tượng LinePlot đã được sử dụng để tạo biểu đồ đường bằng cách sử dụng đối tượng Graph. Create a PHP file with the following script to draw a line chart of green color. An array has been used to set the data for drawing the chart. The Graph object has been used for displaying the chart, and the LinePlot object has been used to create the line chart by using the Graph object.

programming php

Biểu đồ động trong PHP

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

Bước 2. Tạo cơ sở dữ liệu và khởi tạo với dữ liệu gốc trong MySQL

Bước 3. Triển khai chương trình máy chủ dựa trên PHP

Bước 4. Tích hợp biểu đồ với dữ liệu từ Server

Làm cách nào để tạo biểu đồ động trong PHP?

Làm cách nào để tạo biểu đồ thanh động trong PHP?

Làm cách nào để tạo biểu đồ hình tròn động trong PHP với MySQL?

Làm cách nào để tạo biểu đồ trong PHP?

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội