ตย. กราฟ+php+mysqli+json, fusioncharts+php+mysqli

ตย. กราฟ+php+mysqli+json, fusioncharts+php+mysqli

ลองทำตามและนำไปประยุกต์ใช้นะครับ

ตาราง myproduct (ส่วนฐานข้อมูลในที่นี้ใช้ชื่อ test )

-- phpMyAdmin SQL Dump
-- version 4.5.1
-- http://www.phpmyadmin.net
--
-- Host: 127.0.0.1
-- Generation Time: Aug 01, 2017 at 05:29 AM
-- Server version: 10.1.16-MariaDB
-- PHP Version: 5.5.38

SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
SET time_zone = "+00:00";


/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
/*!40101 SET NAMES utf8mb4 */;

--
-- Database: `test`
--

-- --------------------------------------------------------

--
-- Table structure for table `myproduct`
--

CREATE TABLE `myproduct` (
  `p_id` int(11) NOT NULL,
  `p_name` varchar(100) NOT NULL,
  `p_price` float(10,2) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

--
-- Dumping data for table `myproduct`
--

INSERT INTO `myproduct` (`p_id`, `p_name`, `p_price`) VALUES
(1, 'สินค้า A', 160.00),
(2, 'สินค้า B', 40.00),
(3, 'สินค้า C', 100.00),
(4, 'สินค้า D', 150.00);

--
-- Indexes for dumped tables
--

--
-- Indexes for table `myproduct`
--
ALTER TABLE `myproduct`
  ADD PRIMARY KEY (`p_id`);

--
-- AUTO_INCREMENT for dumped tables
--

--
-- AUTO_INCREMENT for table `myproduct`
--
ALTER TABLE `myproduct`
  MODIFY `p_id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=5;
/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;

-- phpMyAdmin SQL Dump

-- version 4.5.1

-- http://www.phpmyadmin.net

-- Host: 127.0.0.1

-- Generation Time: Aug 01, 2017 at 05:29 AM

-- Server version: 10.1.16-MariaDB

-- PHP Version: 5.5.38

SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";

SET time_zone = "+00:00";

/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;

/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;

/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;

/*!40101 SET NAMES utf8mb4 */;

-- Database: `test`

-- --------------------------------------------------------

-- Table structure for table `myproduct`

CREATE TABLE `myproduct` (

`p_id` int(11) NOT NULL,

`p_name` varchar(100) NOT NULL,

`p_price` float(10,2) NOT NULL

) ENGINE=InnoDB DEFAULT CHARSET=utf8;

-- Dumping data for table `myproduct`

INSERT INTO `myproduct` (`p_id`, `p_name`, `p_price`) VALUES

(1, 'สินค้า A', 160.00),

(2, 'สินค้า B', 40.00),

(3, 'สินค้า C', 100.00),

(4, 'สินค้า D', 150.00);

-- Indexes for dumped tables

-- Indexes for table `myproduct`

ALTER TABLE `myproduct`

ADD PRIMARY KEY (`p_id`);

-- AUTO_INCREMENT for dumped tables

-- AUTO_INCREMENT for table `myproduct`

ALTER TABLE `myproduct`

MODIFY `p_id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=5;

/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;

/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;

/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;

ไฟล์เชื่อมต่อฐานข้อมูลและสร้างไฟล์ json คอมเม้นดูใน code เลยนะครับ

<?php
$servername = "localhost";
$username = "root";
$password = "";//ไม่มีก็ไม่ต้องใส่
$dbName = "test";
$conn = new mysqli($servername, $username, $password, $dbName);
//ให้อ่านภาษาไทยได้ คอมเม้น devbanban.com 
mysqli_query($conn, "SET NAMES 'utf8' "); 
//ถ้าเชื่อมต่อฐานอข้มูลไม่ได้ให้แจ้งเตือน
if ($conn->connect_error) {
  die("Connection failed: " . $conn->connect_error);
}
//เอาข้อมูลจากตารางมาแสดง
$query = "SELECT * FROM myproduct";

$result = $conn->query($query);
//เอาเข้ากระบวนการ jsonnnnnn
$jsonArray = array();
//loop ข้อมูลออกมา
if ($result->num_rows > 0) {
  while($row = $result->fetch_assoc()) {
    $jsonArrayItem = array();
    //label คือแนวนอน หรือเอาชื่อสินค้ามาแสดง
    $jsonArrayItem['label'] = $row['p_name'];
    //value แนวตั้ง
    $jsonArrayItem['value'] = $row['p_price'];
    array_push($jsonArray, $jsonArrayItem);
  }
}
//ปิดการเชื่อมต่อ
$conn->close();
header('Content-type: application/json; charset=utf-8');
//ลองแสดง json, run หน้านี้ลองดูได้เลย  
echo json_encode($jsonArray);
?>

<?php

$servername = "localhost";

$username = "root";

$password = "";//ไม่มีก็ไม่ต้องใส่

$dbName = "test";

$conn = new mysqli($servername, $username, $password, $dbName);

//ให้อ่านภาษาไทยได้ คอมเม้น devbanban.com

mysqli_query($conn, "SET NAMES 'utf8' ");

//ถ้าเชื่อมต่อฐานอข้มูลไม่ได้ให้แจ้งเตือน

if ($conn->connect_error) {

die("Connection failed: " . $conn->connect_error);

}

//เอาข้อมูลจากตารางมาแสดง

$query = "SELECT * FROM myproduct";

$result = $conn->query($query);

//เอาเข้ากระบวนการ jsonnnnnn

$jsonArray = array();

//loop ข้อมูลออกมา

if ($result->num_rows > 0) {

while($row = $result->fetch_assoc()) {

$jsonArrayItem = array();

//label คือแนวนอน หรือเอาชื่อสินค้ามาแสดง

$jsonArrayItem['label'] = $row['p_name'];

//value แนวตั้ง

$jsonArrayItem['value'] = $row['p_price'];

array_push($jsonArray, $jsonArrayItem);

}

//ปิดการเชื่อมต่อ

$conn->close();

header('Content-type: application/json; charset=utf-8');

//ลองแสดง json, run หน้านี้ลองดูได้เลย

echo json_encode($jsonArray);

ไฟล์ app.js คอมเม้นดูใน code เลยนะครับ

$(function() {
    $.ajax({

        url: 'http://localhost/chart/chart_data.php',
        type: 'GET',
        success: function(data) {
            chartData = data;
            var chartProperties = {
                "caption": "กราฟแสดงเปรียบเทียบราคาสินค้า",
                "xAxisName": "รายการสินค้า",
                "yAxisName": "ราคา",
                "rotatevalues": "1",
                "theme": "zune"
                //รายชื่อ them = carbon, fint, ocean,zune
            };

            apiChart = new FusionCharts({
                type: 'column2d',
                renderAt: 'chart-container',
                width: '800',
                height: '500',
                dataFormat: 'json',
                dataSource: {
                    "chart": chartProperties,
                    "data": chartData
                }
            });
            apiChart.render();
        }
    });
});

$(function() {

$.ajax({

url: 'http://localhost/chart/chart_data.php',

type: 'GET',

success: function(data) {

chartData = data;

var chartProperties = {

"caption": "กราฟแสดงเปรียบเทียบราคาสินค้า",

"xAxisName": "รายการสินค้า",

"yAxisName": "ราคา",

"rotatevalues": "1",

"theme": "zune"

//รายชื่อ them = carbon, fint, ocean,zune

};

apiChart = new FusionCharts({

type: 'column2d',

renderAt: 'chart-container',

width: '800',

height: '500',

dataFormat: 'json',

dataSource: {

"chart": chartProperties,

"data": chartData

}

});

apiChart.render();

}

});

หน้าแสดงกราฟ index.php

<meta charset="utf-8">
<!DOCTYPE html>
<html>
<head>
  <title>กราฟราคาสินค้า</title>
</head>
<body>

  <div id="chart-container">แสดงกราฟ</div>
  <script src="js/jquery-2.1.4.js"></script>
  <script src="js/fusioncharts.js"></script>
  <script src="js/fusioncharts.charts.js"></script>
  <script src="js/themes/fusioncharts.theme.zune.js"></script>

  <!--ข้อมูลที่เรียกออกมาอยู่ใน app.js -->
  <script src="js/app.js"></script>

  <p>
  ref : 
http://www.fusioncharts.com/dev/using-with-server-side-languages/tutorials/php-mysql-charts.html 
  </p>
  <br>
</body>
</html>

<!-- ref : http://www.fusioncharts.com/dev/using-with-server-side-languages/tutorials/php-mysql-charts.html -->

<!DOCTYPE html>

<html>

<head>

<title>กราฟราคาสินค้า</title>

</head>

<body>

<div id="chart-container">แสดงกราฟ</div>

<p>

ref :

http://www.fusioncharts.com/dev/using-with-server-side-languages/tutorials/php-mysql-charts.html

</p>

<br>

</body>

</html>

ผลการทำงาน

ดาวน์โหลด code ทั้งหมดได้ที่ mychart

ref: http://www.fusioncharts.com/dev/using-with-server-side-languages/tutorials/php-mysql-charts.html

devbanban

ตย. กราฟ+php+mysqli+json, fusioncharts+php+mysqli

Byพิศิษฐ์ บวรเลิศสุธี

Related

Related Post

ระบบบริหารบุคลากร ระบบ HR + ระบบบันทึกเวลาเข้างาน

ฟรีคลิปสอนทำเว็บไซต์ PHP PDO MySQL AdminLTE3 2024

ระบบหอพัก , อพาร์ทเม้นท์ รายวัน รายเดือน ราคาเบาๆ เอาไปต่อยอดได้ 2024

You missed