fordev22.com รับพัฒนาระบบ รับพัฒนาเว็บแอพพลิเคชั่น รับพัฒนาเว็บไซต์ รับเขียนโปรแกรม สอนทำเว็บ สอนเขียนเว็บ สอนทำเว็บ php สอนBootstrap สอนทำเว็บราคาถูก รับทำเว็บไซต์ราคาถูก โปรเจ็คจบ ทำเว็บแบบง่าย ๆ สอนทำเว็บรองรับมือถือ สอนทำเว็บรองรับทุกอุปกรณ์ สอนคอมพิวเตอร์ html php css web app sql Bootstrap Mysql XAMPP

PHP+MySqli EP.18 การนำข้อมูลจาก Database มาทำกราฟ
(Chart With php)

database

-- phpMyAdmin SQL Dump
-- version 4.7.0
-- https://www.phpmyadmin.net/
--
-- Host: localhost
-- Generation Time: Sep 17, 2019 at 07:15 PM
-- Server version: 10.1.25-MariaDB
-- PHP Version: 5.6.31

SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
SET AUTOCOMMIT = 0;
START TRANSACTION;
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: `sqli_1`
--

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

--
-- Table structure for table `chart_tbl`
--

CREATE TABLE `chart_tbl` (
  `ch_id` int(11) NOT NULL,
  `ch_name` varchar(20) NOT NULL,
  `ch_price` varchar(50) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

--
-- Dumping data for table `chart_tbl`
--

INSERT INTO `chart_tbl` (`ch_id`, `ch_name`, `ch_price`) VALUES
(1, 'Product_A', '2900'),
(2, 'Product_B', '3900'),
(3, 'Product_C', '4900'),
(4, 'Product_D', '5900'),
(5, 'Product_E', '6900');

--
-- Indexes for dumped tables
--

--
-- Indexes for table `chart_tbl`
--
ALTER TABLE `chart_tbl`
  ADD PRIMARY KEY (`ch_id`);

--
-- AUTO_INCREMENT for dumped tables
--

--
-- AUTO_INCREMENT for table `chart_tbl`
--
ALTER TABLE `chart_tbl`
  MODIFY `ch_id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=6;COMMIT;

/*!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.7.0

-- https://www.phpmyadmin.net/

-- Host: localhost

-- Generation Time: Sep 17, 2019 at 07:15 PM

-- Server version: 10.1.25-MariaDB

-- PHP Version: 5.6.31

SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";

SET AUTOCOMMIT = 0;

START TRANSACTION;

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: `sqli_1`

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

-- Table structure for table `chart_tbl`

CREATE TABLE `chart_tbl` (

`ch_id` int(11) NOT NULL,

`ch_name` varchar(20) NOT NULL,

`ch_price` varchar(50) NOT NULL

) ENGINE=InnoDB DEFAULT CHARSET=utf8;

-- Dumping data for table `chart_tbl`

INSERT INTO `chart_tbl` (`ch_id`, `ch_name`, `ch_price`) VALUES

(1, 'Product_A', '2900'),

(2, 'Product_B', '3900'),

(3, 'Product_C', '4900'),

(4, 'Product_D', '5900'),

(5, 'Product_E', '6900');

-- Indexes for dumped tables

-- Indexes for table `chart_tbl`

ALTER TABLE `chart_tbl`

ADD PRIMARY KEY (`ch_id`);

-- AUTO_INCREMENT for dumped tables

-- AUTO_INCREMENT for table `chart_tbl`

ALTER TABLE `chart_tbl`

MODIFY `ch_id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=6;COMMIT;

/*!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 */;

code

//for chart
	$datesave = array();
	$ptotal = array();



	while($rs = mysqli_fetch_array($rs_my_order)){
	$datesave[] = "\"".$rs['datesave']."\"";
	$ptotal[] = "\"".$rs['ptotal']."\"";
	}
	$datesave = implode(",", $datesave);
	$ptotal = implode(",", $ptotal);



	echo $datesave;
	echo "<hr>";
	echo $ptotal;

//for chart

$datesave = array();

$ptotal = array();

while($rs = mysqli_fetch_array($rs_my_order)){

$datesave[] = "\"".$rs['datesave']."\"";

$ptotal[] = "\"".$rs['ptotal']."\"";

}

$datesave = implode(",", $datesave);

$ptotal = implode(",", $ptotal);

echo $datesave;

echo "<hr>";

echo $ptotal;

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.bundle.js"></script>
<hr>
<p align="center">
    <canvas id="myChart" width="800px" height="300px"></canvas>
    <script>
    var ctx = document.getElementById("myChart").getContext('2d');
    var myChart = new Chart(ctx, {
    type: 'line',//ปรับแบบ bar และ line
    data: {
    labels: [<?php echo $datesave;?>
    
    ],
    datasets: [{
    label: 'รายงานภาพรวม แยกตามเดือน(บาท)',
    data: [<?php echo $ptotal;?>
    ],
    backgroundColor: [
    'rgba(255, 99, 132, 0.2)',
    'rgba(54, 162, 235, 0.2)',
    'rgba(255, 206, 86, 0.2)',
    'rgba(75, 192, 192, 0.2)',
    'rgba(153, 102, 255, 0.2)',
    'rgba(255, 159, 64, 0.2)'
    ],
    borderColor: [
    'rgba(255,99,132,1)',
    'rgba(54, 162, 235, 1)',
    'rgba(255, 206, 86, 1)',
    'rgba(75, 192, 192, 1)',
    'rgba(153, 102, 255, 1)',
    'rgba(255, 159, 64, 1)'
    ],
    borderWidth: 1
    }]
    },
    options: {
    scales: {
    yAxes: [{
    ticks: {
    beginAtZero:true
    }
    }]
    }
    }
    });
    </script>
</p>

<hr>

var ctx = document.getElementById("myChart").getContext('2d');

var myChart = new Chart(ctx, {

type: 'line',//ปรับแบบ bar และ line

data: {

labels: [<?php echo $datesave;?>

datasets: [{

label: 'รายงานภาพรวม แยกตามเดือน(บาท)',

data: [<?php echo $ptotal;?>

backgroundColor: [

'rgba(255, 99, 132, 0.2)',

'rgba(54, 162, 235, 0.2)',

'rgba(255, 206, 86, 0.2)',

'rgba(75, 192, 192, 0.2)',

'rgba(153, 102, 255, 0.2)',

'rgba(255, 159, 64, 0.2)'

borderColor: [

'rgba(255,99,132,1)',

'rgba(54, 162, 235, 1)',

'rgba(255, 206, 86, 1)',

'rgba(75, 192, 192, 1)',

'rgba(153, 102, 255, 1)',

'rgba(255, 159, 64, 1)'

borderWidth: 1

}]

options: {

scales: {

yAxes: [{

ticks: {

beginAtZero:true

}

}]

}

});

</script>

</p>

ระบบ ตระกร้าสินค้า

You might also like