Biểu đồ thanh php từ cơ sở dữ liệu

Đối với hướng dẫn này, chúng tôi sẽ xem xét một bảng điểm rất đơn giản có hai cột playerid và score và 5 mục

bảng điểm

CREATE TABLE `score` [
  `playerid` int[10] unsigned NOT NULL AUTO_INCREMENT,
  `score` int[11] DEFAULT '0',
  PRIMARY KEY [`playerid`]
] ENGINE=InnoDB DEFAULT CHARSET=utf8;

Dữ liệu bảng điểm

INSERT INTO `score` VALUES [1,10],[2,40],[3,20],[4,9],[5,20];

Tạo một dự án mới

Tạo một thư mục dự án mới và đặt tên là chartjs. Ghi chú. Vui lòng đặt tên cho dự án của bạn theo sự lựa chọn của bạn. Bên trong thư mục dự án chartjs tạo một thư mục con và đặt tên là js. Điều này sẽ giữ tất cả các tệp javascript

Di chuyển các tệp JS trong thư mục js

Sao chép biểu đồ. tối thiểu. js và jquery. tối thiểu. js bên trong thư mục js mà chúng tôi đã tạo bên trong thư mục dự án chartjs. Và tạo một ứng dụng. js bên trong thư mục js. Điều này sẽ chứa tất cả mã javascript mà chúng ta sẽ viết cho dự án này

Tạo dữ liệu. php để lấy dữ liệu từ bảng MySQL

Tạo một tệp dữ liệu mới. php bên trong thư mục chartjs. Tệp này sẽ chứa mã php sẽ lấy dữ liệu từ bảng điểm và hiển thị ở định dạng JSON

Tập tin. dữ liệu. php

error];
}

//query to get data from the table
$query = sprintf["SELECT playerid, score FROM score ORDER BY playerid"];

//execute query
$result = $mysqli->query[$query];

//loop through the returned data
$data = array[];
foreach [$result as $row] {
  $data[] = $row;
}

//free memory associated with result
$result->close[];

//close connection
$mysqli->close[];

//now print the data
print json_encode[$data];

Đầu ra của dữ liệu. tập tin php

Để có được đầu ra của dữ liệu. php mở nó trong trình duyệt web của bạn [Chrome chẳng hạn]

URL. localhost/chartjs/dữ liệu. php

[  
   {  
      "playerid":"1",
      "score":"10"
   },
   {  
      "playerid":"2",
      "score":"40"
   },
   {  
      "playerid":"3",
      "score":"20"
   },
   {  
      "playerid":"4",
      "score":"9"
   },
   {  
      "playerid":"5",
      "score":"20"
   }
]

Tạo biểu đồ. tệp html để hiển thị biểu đồ thanh

Bây giờ hãy tạo một tệp mới bên trong thư mục dự án chartjs và đặt tên là bargraph. html tệp này sẽ hiển thị biểu đồ thanh

Tập tin. thanh biểu đồ. html

  
    ChartJS - BarGraph
    
  
  
    

      
    

    
    
    
    
  

Viết một số javascript trong ứng dụng. js

Chúng tôi sẽ thực hiện cuộc gọi AJAX từ ứng dụng. js thành dữ liệu. php để tìm nạp dữ liệu JSON sẽ được sử dụng để vẽ biểu đồ thanh

Hôm nay, Chúng tôi muốn chia sẻ với các bạn cách tạo biểu đồ thanh trong php và mysql. Trong bài đăng này, chúng tôi sẽ chỉ cho bạn cách tạo biểu đồ hình tròn trong php bằng cách sử dụng các giá trị cơ sở dữ liệu, hãy nghe biểu đồ. js – lấy dữ liệu từ cơ sở dữ liệu bằng mysql và php, chúng tôi sẽ cung cấp cho bạn bản demo và ví dụ để thực hiện. Trong bài đăng này, chúng ta sẽ tìm hiểu về Biểu đồ Laravel và Dữ liệu đồ thị từ Cơ sở dữ liệu với một ví dụ

Tạo biểu đồ thanh động bằng JavaScript, PHP & MySQL

nội dung

Cũng nên đọc phần này 👉   làm cách nào để lấy dữ liệu mảng tuần tự hóa trong php?

ở đây trong Ví dụ này Bạn tìm hiểu Tất cả về Ví dụ về biểu đồ thanh trong mã nguồn php mysql, cách tạo bảng điều khiển trong php mysql với bản demo và mã nguồn đầy đủ

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

CREATE TABLE `citizens` [
  `id` int[10] UNSIGNED NOT NULL,
  `continent` varchar[255] NOT NULL,
  `pop_percent` varchar[255] NOT NULL,
  `pop_total` varchar[255] NOT NULL
] ENGINE=InnoDB DEFAULT CHARSET=utf8;

INSERT INTO `citizens` [`id`, `continent`, `pop_percent`, `pop_total`] VALUES
[1, 'Rajkot', '59.69', '4,436,224,110'],
[2, 'Surat', '16.36', '1,216,130,110'],
[3, 'Ahemdabad', '9.94', '738,849,110'],
[4, 'Bhavnagar', '7.79', '579,024,110'],
[5, 'Jammnagar', '7.79', '422,535,110'],
[6, 'Junaghdh', '0.54', '39,901,110'],
[7, 'Morabi', '0.01', '1,106'];

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

$[document].ready[function[] {
	$.ajax[{				
		type : 'POST',
		url  : 'chart_data.php',	
		dataType:'json',
		success : function[response]{
			var chartData = JSON.parse[response];
			var chartOptions = {
			  'height': 350,
			  'title': 'List of continents by citizens [%]',
			  'width': 1000,
			  'fixPadding': 18,
			  'barFont': [0, 12, "bold"],
			  'labelFont': [0, 13, 0]
			};
			graphite[chartData, chartOptions, barChart];			
		}
	}];
}];

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