記入日：2023-01-20 編集日：2023-01-20
SQL見るだけクエリ。今回はSQLから少し離れて、SQLで取得したデータを元に、グラフを作成してみようと思います。
chart.jsというグラフ作成する為の便利なツールがあります。今回はchart.jsを使用して、商品毎の日別売上をグラフ化してみます。
前回同様、以下のsql_orderテーブルには、販売商品毎のレコードが入っております。
テーブル名：sql_order
| id | order_id | name | item_id | price | quantity | size | datetime | status |
|---|---|---|---|---|---|---|---|---|
| 1 | 1 | 伊藤 明日香 | sku-0001 | 3000 | 1 | S | 2022-12-16 07:00:00 | 1 |
| 2 | 1 | 伊藤 明日香 | sku-0002 | 2500 | 3 | S | 2022-12-16 07:00:00 | 1 |
| 3 | 1 | 伊藤 明日香 | sku-0003 | 9000 | 1 | S | 2022-12-16 07:00:00 | 1 |
| 4 | 2 | 原田 和美 | sku-0001 | 3000 | 1 | L | 2022-12-16 10:00:00 | 1 |
| 5 | 2 | 原田 和美 | sku-0002 | 2500 | 1 | L | 2022-12-16 10:00:00 | 1 |
| 6 | 2 | 原田 和美 | sku-0003 | 9000 | 2 | L | 2022-12-16 10:00:00 | 1 |
| 7 | 3 | 高橋 由美子 | sku-0001 | 3000 | 1 | M | 2022-12-16 18:00:00 | 1 |
| 8 | 3 | 高橋 由美子 | sku-0002 | 2500 | 5 | S | 2022-12-16 18:00:00 | 1 |
| 9 | 3 | 高橋 由美子 | sku-0003 | 9000 | 1 | M | 2022-12-16 18:00:00 | 1 |
| 10 | 4 | 田中 明日香 | sku-0001 | 3000 | 1 | S | 2022-12-16 22:00:00 | 1 |
| 11 | 4 | 田中 明日香 | sku-0002 | 2500 | 1 | S | 2022-12-16 22:00:00 | 1 |
| 12 | 4 | 田中 明日香 | sku-0003 | 9000 | 2 | S | 2022-12-16 22:00:00 | 1 |
| 13 | 5 | 小林 美佐子 | sku-0001 | 3000 | 1 | L | 2022-12-17 10:00:00 | 1 |
| 14 | 5 | 小林 美佐子 | sku-0002 | 2500 | 1 | L | 2022-12-17 10:00:00 | 1 |
| 15 | 5 | 小林 美佐子 | sku-0003 | 9000 | 2 | L | 2022-12-17 10:00:00 | 1 |
| 16 | 6 | 渡辺 雄一 | sku-0001 | 3000 | 1 | S | 2022-12-18 08:00:00 | 1 |
| 17 | 6 | 渡辺 雄一 | sku-0002 | 2500 | 1 | S | 2022-12-18 08:00:00 | 1 |
| 18 | 6 | 渡辺 雄一 | sku-0003 | 9000 | 1 | S | 2022-12-18 08:00:00 | 1 |
| 19 | 7 | 佐藤 智子 | sku-0001 | 3000 | 12 | M | 2022-12-18 15:00:00 | 1 |
| 20 | 7 | 佐藤 智子 | sku-0002 | 2500 | 1 | S | 2022-12-18 15:00:00 | 1 |
| 21 | 7 | 佐藤 智子 | sku-0003 | 9000 | 1 | M | 2022-12-18 15:00:00 | 1 |
| 22 | 8 | 坂本 純子 | sku-0001 | 3000 | 1 | S | 2022-12-19 20:00:00 | 1 |
| 23 | 8 | 坂本 純子 | sku-0002 | 2500 | 1 | S | 2022-12-19 20:00:00 | 1 |
| 24 | 8 | 坂本 純子 | sku-0003 | 9000 | 3 | S | 2022-12-19 20:00:00 | 1 |
| 25 | 9 | 加藤 和子 | sku-0001 | 3000 | 1 | L | 2022-12-20 10:00:00 | 1 |
| 26 | 9 | 加藤 和子 | sku-0002 | 2500 | 8 | L | 2022-12-20 10:00:00 | 1 |
| 27 | 9 | 加藤 和子 | sku-0003 | 9000 | 1 | L | 2022-12-20 10:00:00 | 1 |
| 28 | 10 | 山口 晴子 | sku-0001 | 3000 | 1 | M | 2022-12-20 19:00:00 | 1 |
| 29 | 10 | 山口 晴子 | sku-0002 | 2500 | 1 | L | 2022-12-20 19:00:00 | 1 |
| 30 | 10 | 山口 晴子 | sku-0003 | 9000 | 3 | L | 2022-12-20 19:00:00 | 1 |
SQLで取得した以下の二次元連想配列（商品毎の日別売上）データからchart.jsを使用して、以下のようなグラフを作成する事ができます。
Array
(
[0] => Array
(
[date] => 2022-12-16
[1] => 12000
[2] => 25000
[3] => 54000
[total] => 91000
)
[1] => Array
(
[date] => 2022-12-17
[1] => 3000
[2] => 2500
[3] => 18000
[total] => 23500
)
[2] => Array
(
[date] => 2022-12-18
[1] => 39000
[2] => 5000
[3] => 18000
[total] => 62000
)
[3] => Array
(
[date] => 2022-12-19
[1] => 3000
[2] => 2500
[3] => 27000
[total] => 32500
)
[4] => Array
(
[date] => 2022-12-20
[1] => 6000
[2] => 22500
[3] => 36000
[total] => 64500
)
)
| 日付 | sku-0001 | sku-0002 | sku-0003 | 合計数 |
|---|---|---|---|---|
2022-12-16 |
12,000 |
25,000 |
54,000 |
91,000 |
2022-12-17 |
3,000 |
2,500 |
18,000 |
23,500 |
2022-12-18 |
39,000 |
5,000 |
18,000 |
62,000 |
2022-12-19 |
3,000 |
2,500 |
27,000 |
32,500 |
2022-12-20 |
6,000 |
22,500 |
36,000 |
64,500 |
SQLの使いどころ
サイトに大量の情報を掲載することは、ユーザーにとってとても便利なことです。しかし、情報が多すぎると、目的の情報を見つけるのが困難になります。そのため、SQLを使用することで、情報を効率的に管理することができます。
SQLを使用することで、データベース内の情報を検索したり、フィルタリングしたりすることができます。これにより、ユーザーは目的の情報をスムーズかつ簡単に見つけることができます。
また、SQLを使用することで、データを集計したり、統合したりすることもできます。これにより、ユーザーはさまざまな視点から情報を分析することができます。つまり、サイトに多くの情報を掲載することが重要である一方で、その情報を効率的かつ簡単に管理することが求められる場合には、SQLが不可欠であるといえます。
KK
機械工学を専攻。工業デザイナーとして、国内及び海外の自動車・搬送ラインの設計などに従事した後、2003年にウェブシステム会社を設立。UI設計やウェブシステムの開発、DX化のディレクションなどを行っています。