การตดตงและใชงาน Yii2 High Charts

รปท 1 ตวอยาง Chart Extension Yii2

ในบทนเราจะใชโปรเจค Yii2-demo สำาหรบการเรยนรการตดตงและใชงาน Chart ของ High charts ในรปแบบตาง ๆ เชน Line charts , Bar charts , Column charts, Pie Charts, Gauges Charts เปนตน

1. ตดตง yii2-highcharts-widget สามารถตดตงไดดงน

ตดตงผาน composer ดวยคำาสง

หรอเพมใน composer.json ในสวน require

รนคำาสง composer update

2. ตงคาการเชอมตอฐานขอมล ในตวอยางนใชฐานขอมล MySQL โดยเพม db connection ขนมาอก 1 ตว ไปท common > config > main-local.php ดงน

composer require --prefer-dist miloschuman/yii2-highcharts-widget "dev-master"

"miloschuman/yii2-highcharts-widget": "dev-master"

'db2' => [ 'class' => 'yii\db\Connection', 'dsn' => 'mysql:host=localhost;port=3306;dbname=hosxp', 'username' => 'root', 'password' => 'password', 'charset' => 'utf8', ],

รปท 2 การเพม Database Connection

ตอไปเรากมาเรมสรางกราฟแบบตางๆ กนเลย

แบบทดสอบท1 สรางกราฟโดยใช Highcharts::widget ชนด Column charts

1. เตรยมขอมล ชดคำาสง SQL นบจำานวนผปวยมารบบรการแยกตามแผนกของหนวยบรการ

2. สรางไฟลชอ ReportController.php ไวทตำาแหนง frontend\controllers\ ReportController.php ดงน

1. SELECT COUNT(DISTINCT hn) from vn_stat WHERE vstdate = DATE(NOW()) AND vn_stat.vn NOT IN (SELECT vn FROM er_regist )and pt_subtype = 0"

2. SELECT COUNT(DISTINCT vn) from er_regist WHERE vstdate = DATE(NOW()) $lab = Yii::$app->db2->createCommand("SELECT COUNT(DISTINCT hn) from lab_head WHERE order_date = DATE(NOW()) and confirm_report = 'Y'

3. SELECT COUNT(DISTINCT an) from an_stat WHERE ward = 02 and dchdate is NULL

4. SELECT COUNT(DISTINCT v.vn) from xray_head x LEFT OUTER JOIN vn_stat v on v.vn=x.vn WHERE v.vstdate = DATE(NOW())

5. SELECT COUNT(DISTINCT an) from an_stat WHERE ward = 01 and dchdate is NULL

6. SELECT COUNT(DISTINCT hn) from dtmain WHERE vstdate = DATE(NOW())

7. SELECT COUNT(DISTINCT hn) from vn_stat WHERE vstdate = DATE(NOW()) AND pt_subtype = 1 AND spclty in ('12','13','14','15','16','17','29','32','33','34','35','38')

8. SELECT COUNT(DISTINCT hn) from vn_stat WHERE vstdate = DATE(NOW()) and pt_subtype = 0 AND spclty = 31

9. SELECT COUNT(DISTINCT hn) from vn_stat WHERE vstdate = DATE(NOW()) and pt_subtype = 0 AND spclty = 38

<?phpnamespace frontend\controllers;

use Yii;use yii\web\Controller;

class ReportController extends Controller { public function actionRep1() { return $this->render('report1'); }}?>

3. สรางไฟลชอ report1 ไวทตำาแหนง frontend\views\report\ report1.php ดงน

<?phpnamespace frontend\controllers;

use Yii;use yii\web\Controller;

class ReportController extends Controller { public function actionRep1() { return $this->render('report1'); }}?>

<?phpuse miloschuman\highcharts\Highcharts;

/* @var $this yii\web\View */$this->title = 'จำานวนผมารบบรการแยกตามแผนก';$this->params['breadcrumbs'][] = 'Column Charts';?>

<?php $opd = Yii::$app->db2->createCommand("SELECT COUNT(DISTINCT hn) from vn_stat WHERE vstdate = DATE(NOW()) AND vn_stat.vn NOT IN (SELECT vn FROM er_regist )and pt_subtype = 0")->queryScalar(); $er = Yii::$app->db2->createCommand("SELECT COUNT(DISTINCT vn) from er_regist WHERE vstdate = DATE(NOW())")->queryScalar(); $lab = Yii::$app->db2->createCommand("SELECT COUNT(DISTINCT hn) from lab_head WHERE order_date = DATE(NOW()) and confirm_report = 'Y'")->queryScalar(); $lr = Yii::$app->db2->createCommand("SELECT COUNT(DISTINCT an) from an_stat WHERE ward = 02 and dchdate is NULL")->queryScalar(); $xray = Yii::$app->db2->createCommand("SELECT COUNT(DISTINCT v.vn) from xray_head x LEFT OUTER JOIN vn_stat v on v.vn=x.vn WHERE v.vstdate = DATE(NOW())")->queryScalar(); $ipd = Yii::$app->db2->createCommand("SELECT COUNT(DISTINCT an) from an_stat WHERE ward = 01 and dchdate is NULL")->queryScalar(); $dental = Yii::$app->db2->createCommand("SELECT COUNT(DISTINCT hn) from dtmain WHERE vstdate = DATE(NOW())")->queryScalar(); $pcu = Yii::$app->db2->createCommand("SELECT COUNT(DISTINCT hn) from vn_stat WHERE vstdate = DATE(NOW()) AND pt_subtype = 1 AND spclty in ('12','13','14','15','16','17','29','32','33','34','35','38')")->queryScalar(); $ttm = Yii::$app->db2->createCommand("SELECT COUNT(DISTINCT hn) from vn_stat WHERE vstdate = DATE(NOW()) and pt_subtype = 0 AND spclty = 31 ")->queryScalar(); $pyc = Yii::$app->db2->createCommand("SELECT COUNT(DISTINCT hn) from vn_stat WHERE vstdate = DATE(NOW()) and pt_subtype = 0 AND spclty = 38")->queryScalar();

echo Highcharts::widget([ 'scripts' => [ //'modules/exporting', 'themes/dark-unica', ], 'options' => [ 'title' => [ 'text' => 'จำานวนผปวยมารบบรการประจำาวน', ], 'xAxis' => [ 'categories' => ['OPD', 'ER', 'LAB', 'LR', 'X-RAY', 'IPD', 'DENTAL', 'PCU', 'TTM', 'PHYSICAL']

อางอง - https://github.com/miloschuman/yii2-highcharts

- http://www.highcharts.com/demo

4. ทดสอบเวบ พมพชอ URL http://localhost/yii2-demo/frontend/web/index.php?r=report/rep1 จะไดดงรป

รปท 3 แบบทดสอบท1 สรางกราฟโดยใช High charts ชนด Column

<?phpuse miloschuman\highcharts\Highcharts;

/* @var $this yii\web\View */$this->title = 'จำานวนผมารบบรการแยกตามแผนก';$this->params['breadcrumbs'][] = 'Column Charts';?>

<?php $opd = Yii::$app->db2->createCommand("SELECT COUNT(DISTINCT hn) from vn_stat WHERE vstdate = DATE(NOW()) AND vn_stat.vn NOT IN (SELECT vn FROM er_regist )and pt_subtype = 0")->queryScalar(); $er = Yii::$app->db2->createCommand("SELECT COUNT(DISTINCT vn) from er_regist WHERE vstdate = DATE(NOW())")->queryScalar(); $lab = Yii::$app->db2->createCommand("SELECT COUNT(DISTINCT hn) from lab_head WHERE order_date = DATE(NOW()) and confirm_report = 'Y'")->queryScalar(); $lr = Yii::$app->db2->createCommand("SELECT COUNT(DISTINCT an) from an_stat WHERE ward = 02 and dchdate is NULL")->queryScalar(); $xray = Yii::$app->db2->createCommand("SELECT COUNT(DISTINCT v.vn) from xray_head x LEFT OUTER JOIN vn_stat v on v.vn=x.vn WHERE v.vstdate = DATE(NOW())")->queryScalar(); $ipd = Yii::$app->db2->createCommand("SELECT COUNT(DISTINCT an) from an_stat WHERE ward = 01 and dchdate is NULL")->queryScalar(); $dental = Yii::$app->db2->createCommand("SELECT COUNT(DISTINCT hn) from dtmain WHERE vstdate = DATE(NOW())")->queryScalar(); $pcu = Yii::$app->db2->createCommand("SELECT COUNT(DISTINCT hn) from vn_stat WHERE vstdate = DATE(NOW()) AND pt_subtype = 1 AND spclty in ('12','13','14','15','16','17','29','32','33','34','35','38')")->queryScalar(); $ttm = Yii::$app->db2->createCommand("SELECT COUNT(DISTINCT hn) from vn_stat WHERE vstdate = DATE(NOW()) and pt_subtype = 0 AND spclty = 31 ")->queryScalar(); $pyc = Yii::$app->db2->createCommand("SELECT COUNT(DISTINCT hn) from vn_stat WHERE vstdate = DATE(NOW()) and pt_subtype = 0 AND spclty = 38")->queryScalar();

echo Highcharts::widget([ 'scripts' => [ //'modules/exporting', 'themes/dark-unica', ], 'options' => [ 'title' => [ 'text' => 'จำานวนผปวยมารบบรการประจำาวน', ], 'xAxis' => [ 'categories' => ['OPD', 'ER', 'LAB', 'LR', 'X-RAY', 'IPD', 'DENTAL', 'PCU', 'TTM', 'PHYSICAL']

'credits' => ['enabled' => false

], 'yAxis' => ['title' => [

'text' => 'จำานวนผมารบบรการ (คน)'] ],

'colors' => ["#f45b5b", "#7798BF"], 'series' => [ [ 'type' => 'column', 'name' => 'จำานวนผปวย', 'data' => [intval($opd), intval($er), intval($lab), intval($lr), intval($xray), intval($ipd), intval($dental), intval($pcu), intval($ttm), intval($pyc)], ], ], ] ]); ?>

แบบทดสอบท2 สรางกราฟโดยใช High charts ชนด Line Charts

1. เตรยมขอมล ชดคำาสง SQL จำานวน 10 อนดบโรคผปวย OPD ตามรหสโรค ICD-10

2. เพม Function actionRep4 ใน frontend\controllers\ ReportController.php ดงน

SELECT a.pdx,i.name AS icdname,COUNT(a.pdx) AS pdx_count,COUNT(DISTINCT a.hn) AS hn_count,COUNT(DISTINCT a.vn) AS visit_countFROM vn_stat aLEFT OUTER JOIN icd101 i ON i.code=a.main_pdxWHERE a.vstdate BETWEEN '$date1'and '$date2'AND a.pdx<>'' AND a.pdx IS NOT NULLAND a.pdx NOT LIKE 'z%'GROUP BY a.pdx,i.nameORDER BY pdx_count DESCLIMIT 10

public function actionRep4() {

$date1 = "2015-10-01";$date2 = date('Y-m-d');if (Yii::$app->request->isPost) {$date1 = $_POST['date1'];$date2 = $_POST['date2'];}

$sql = "SELECT a.pdx,i.name AS icdname,COUNT(a.pdx) AS pdx_count,COUNT(DISTINCT a.hn) AS hn_count,COUNT(DISTINCT a.vn) AS visit_countFROM vn_stat aLEFT OUTER JOIN icd101 i ON i.code=a.main_pdxWHERE a.vstdate BETWEEN '$date1'and '$date2'AND a.pdx<>'' AND a.pdx IS NOT NULLAND a.pdx NOT LIKE 'z%'GROUP BY a.pdx,i.nameORDER BY pdx_count DESCLIMIT 10 ";

$data = Yii::$app->db2->createCommand($sql)->queryAll();$dataProvider = new ArrayDataProvider(['allModels'=>$data,]);

return $this->render('report4', ['dataProvider' => $dataProvider, 'chart' => $data,'date1' => $date1,

3. สรางไฟลชอ report4 ไวทตำาแหนง frontend\views\report\ report4.php ดงน

public function actionRep4() {

$date1 = "2015-10-01";$date2 = date('Y-m-d');if (Yii::$app->request->isPost) {$date1 = $_POST['date1'];$date2 = $_POST['date2'];}

$sql = "SELECT a.pdx,i.name AS icdname,COUNT(a.pdx) AS pdx_count,COUNT(DISTINCT a.hn) AS hn_count,COUNT(DISTINCT a.vn) AS visit_countFROM vn_stat aLEFT OUTER JOIN icd101 i ON i.code=a.main_pdxWHERE a.vstdate BETWEEN '$date1'and '$date2'AND a.pdx<>'' AND a.pdx IS NOT NULLAND a.pdx NOT LIKE 'z%'GROUP BY a.pdx,i.nameORDER BY pdx_count DESCLIMIT 10 ";

$data = Yii::$app->db2->createCommand($sql)->queryAll();$dataProvider = new ArrayDataProvider(['allModels'=>$data,]);

return $this->render('report4', ['dataProvider' => $dataProvider, 'chart' => $data,'date1' => $date1,

<?php

use miloschuman\highcharts\Highcharts;use yii\web\JsExpression;use yii\grid\GridView;use yii\helpers\Html;use yii\bootstrap\ActiveForm;use yii\jui\DatePicker;

/* @var $this yii\web\View */$this->title = 'จำานวน 10 อนดบโรคผปวย OPD ตามรหสโรค ICD-10';$this->params['breadcrumbs'][] = 'Line Charts';?>

<div style='display: none'> <?= Highcharts::widget([ 'scripts' => [ 'highcharts-more', 'themes/grid', //'modules/exporting', 'modules/solid-gauge', ] ]); ?></div> <div class='well'> <?php $form = ActiveForm::begin(['layout' => 'inline']); ?> <div class="form-group"> <label class="control-label"> เลอกวนท </label> <?= DatePicker::widget([ 'name' => 'date1', 'value' => $date1, 'language' => 'th', 'dateFormat' => 'yyyy-MM-dd', 'clientOptions' => [ 'changeMonth' => true, 'changeYear' => true, ], ]); ?> </div>

<div class="form-group"> <label class="control-label"> ถง </label> <?= DatePicker::widget([ 'name' => 'date2', 'value' => $date2, 'language' => 'th', 'dateFormat' => 'yyyy-MM-dd', 'clientOptions' => [ 'changeMonth' => true, 'changeYear' => true, ] ]); ?> </div> <div class="form-group"> <?= Html::submitButton('ประมวลผล', ['class' => 'btn btn-warning btn-flat']) ?> </div><!-- /.input group --><?php ActiveForm::end(); ?></div><div class="panel panel-default"> <div class="panel-heading"> <h3 class="panel-title"><span class="glyphicon glyphicon glyphicon-signal"></span> Line Charts</h3> </div> <div class="panel-body"> <div id="container-line"></div> <?php $categ = []; for ($i = 0; $i < count($chart); $i++) { $categ[] = $chart[$i]['pdx']; } $js_categ = implode("','", $categ);

$data_pdx = []; for ($i = 0; $i < count($chart); $i++) { $data_pdx[] = $chart[$i]['pdx_count']; } $js_pdx = implode(",", $data_pdx); $data_hn = []; for ($i = 0; $i < count($chart); $i++) { $data_hn[] = $chart[$i]['hn_count']; } $js_hn = implode(",", $data_hn); $data_vn = []; for ($i = 0; $i < count($chart); $i++) { $data_vn[] = $chart[$i]['visit_count'];

<div class="form-group"> <label class="control-label"> ถง </label> <?= DatePicker::widget([ 'name' => 'date2', 'value' => $date2, 'language' => 'th', 'dateFormat' => 'yyyy-MM-dd', 'clientOptions' => [ 'changeMonth' => true, 'changeYear' => true, ] ]); ?> </div> <div class="form-group"> <?= Html::submitButton('ประมวลผล', ['class' => 'btn btn-warning btn-flat']) ?> </div><!-- /.input group --><?php ActiveForm::end(); ?></div><div class="panel panel-default"> <div class="panel-heading"> <h3 class="panel-title"><span class="glyphicon glyphicon glyphicon-signal"></span> Line Charts</h3> </div> <div class="panel-body"> <div id="container-line"></div> <?php $categ = []; for ($i = 0; $i < count($chart); $i++) { $categ[] = $chart[$i]['pdx']; } $js_categ = implode("','", $categ);

$data_pdx = []; for ($i = 0; $i < count($chart); $i++) { $data_pdx[] = $chart[$i]['pdx_count']; } $js_pdx = implode(",", $data_pdx); $data_hn = []; for ($i = 0; $i < count($chart); $i++) { $data_hn[] = $chart[$i]['hn_count']; } $js_hn = implode(",", $data_hn); $data_vn = []; for ($i = 0; $i < count($chart); $i++) { $data_vn[] = $chart[$i]['visit_count'];

$this->registerJs(" $(function () { $('#container-line').highcharts({ title: { text: 'จำานวน 10 อนดบโรคผปวย OPD ตามรหสโรค ICD-10', x: -20 //center }, subtitle: { text: '', x: -20 }, xAxis: { categories: ['$js_categ'], }, yAxis: { title: { text: 'จำานวน(ราย)' }, plotLines: [{ value: 0, width: 1, color: '#808080' }] }, tooltip: { valueSuffix: '' }, legend: { layout: 'vertical', align: 'right', verticalAlign: 'middle', borderWidth: 0 }, credits: { enabled: false }, series: [{ name: 'จำานวนวนจฉย', data: [$js_pdx] }, { name: 'จำานวนราย', data: [$js_hn] }, { name: 'จำานวนครง', data: [$js_vn] }] }); });

$this->registerJs(" $(function () { $('#container-line').highcharts({ title: { text: 'จำานวน 10 อนดบโรคผปวย OPD ตามรหสโรค ICD-10', x: -20 //center }, subtitle: { text: '', x: -20 }, xAxis: { categories: ['$js_categ'], }, yAxis: { title: { text: 'จำานวน(ราย)' }, plotLines: [{ value: 0, width: 1, color: '#808080' }] }, tooltip: { valueSuffix: '' }, legend: { layout: 'vertical', align: 'right', verticalAlign: 'middle', borderWidth: 0 }, credits: { enabled: false }, series: [{ name: 'จำานวนวนจฉย', data: [$js_pdx] }, { name: 'จำานวนราย', data: [$js_hn] }, { name: 'จำานวนครง', data: [$js_vn] }] }); });

<?php echo GridView::widget([ 'dataProvider' => $dataProvider, 'columns' => [ ['class' => 'yii\grid\SerialColumn'], [ 'attribute' => 'pdx', 'header' => 'รหสโรค' ], [ 'attribute' => 'icdname', 'header' => 'ชอโรค' ], [ 'attribute' => 'pdx_count', 'header' => 'จำานวนวนจฉย' ], [ 'attribute' => 'hn_count', 'header' => 'จำานวนราย' ], [ 'attribute' => 'visit_count', 'header' => 'จำานวนครง' ] ], ]); ?> </div> </div>

5. ทดสอบเวบ URL http://localhost/yii2-demo/frontend/web/index.php?r=report/rep4 จะไดดงรป

รปท 4 แบบทดสอบท2 สรางกราฟโดยใช High charts ชนด Line Charts

แบบทดสอบท3 สรางกราฟโดยใช High charts ชนด Solid Gauges Charts

1. ดาวนโหลดไฟล chart-donut.js จากเวบ https://gist.github.com/sirensoft/7eff8ebe17b0ecb4d1fe จากนนกสราง Folder ชอ js ไวท frontend\web\js และบนทกไฟลดงกลาวเกบไวทตำาแหนงน

รปท 5 ตำาแหนงการเพม ไฟล js

ไฟล chart-donut.js สามารถแกไขได ดงน

stops: [ [0.6, 'green'], แกไขชวงของสได [0.8, 'yellow'], [0.9, 'red'], ],

yAxis: { min: 0, max: 100, // คาสงสดของ Gauges Charts title: { text: '<b>' + title_text + '</b>'} },

dataLabels: { format: '<div style="text-align:center"><span style="font-size:25px;color:' + ((Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black') + '">{y}</span><br/>' + '<span style="font-size:12px;color:silver">จำานวน (คน)</span></div>' // แกไข label },

2. เตรยมขอมล ชดคำาสง SQL จำานวนผปวย (Patient) TYPEAREA มคาวาง

tooltip: { valueSuffix: ' รอยละ' // เพมหรอแกไขขอความอนๆ ได }

1. SELECT COUNT(DISTINCT hn) AS cc_hn FROM vn_stat WHERE vstdate BETWEEN '2015-10-01' AND DATE(NOW())AND (pdx='' OR pdx IS NULL)

2. SELECT COUNT(DISTINCT hn) AS cc_hn FROM an_stat WHERE dchdate BETWEEN '2015-10-01' AND DATE(NOW())AND (pdx='' OR pdx IS NULL)

3. SELECT COUNT(DISTINCT hn) AS cc_hn FROM patient WHERE patient.hn IN (SELECT hn FROM vn_stat WHERE vstdate BETWEEN '2015-10-01' AND DATE(NOW())) AND (patient.type_area='' OR patient.type_area<>'4' OR patient.type_area IS NULL)

4. SELECT COUNT(DISTINCT p.hn) AS cc_hn FROM er_nursing_detail en INNER JOIN ovst o ON o.vn=en.vn INNER JOIN ovst_seq os ON os.vn=en.vn INNER JOIN er_regist e ON e.vn=o.vn INNER JOIN er_pt_type erpt ON erpt.er_pt_type=e.er_pt_type AND erpt.accident_code='Y' INNER JOIN patient p ON p.hn=o.hn INNER JOIN pq_screen pq ON pq.vn=en.vn INNER JOIN opduser ou ON ou.loginname=pq.staff WHERE e.vstdate BETWEEN '2015-10-01' AND DATE(NOW()) AND (en.accident_place_type_id='' OR en.accident_place_type_id IS NULL or en.visit_type='' OR en.visit_type IS NULL or en.accident_alcohol_type_id='' OR en.accident_alcohol_type_id IS NULL or en.accident_drug_type_id='' OR en.accident_drug_type_id IS NULL or en.accident_airway_type_id='' OR en.accident_airway_type_id IS NULL or en.accident_bleed_type_id='' OR en.accident_bleed_type_id IS NULL or en.accident_splint_type_id='' OR en.accident_splint_type_id IS NULL or en.accident_fluid_type_id='' OR en.accident_fluid_type_id IS NULL or en.er_emergency_type='' OR en.er_emergency_type IS NULL ) ORDER BY e.enter_er_time

3. เพม Function actionRep3 ใน frontend\controllers\ReportController.php ดงน

public function actionRep3() { $sql_chart1 = "SELECT COUNT(DISTINCT hn) AS cc_hn FROM vn_stat WHERE vstdate BETWEEN '2015-10-01' AND DATE(NOW())AND (pdx='' OR pdx IS NULL)"; $sql_chart2 = "SELECT COUNT(DISTINCT hn) AS cc_hn FROM an_stat WHERE dchdate BETWEEN '2015-10-01' AND DATE(NOW())AND (pdx='' OR pdx IS NULL)"; $sql_chart3 = "SELECT COUNT(DISTINCT hn) AS cc_hn FROM patient WHERE patient.hn IN (SELECT hn FROM vn_stat WHERE vstdate BETWEEN '2015-10-01' AND DATE(NOW())) AND (patient.type_area='' OR patient.type_area<>'4' OR patient.type_area IS NULL)"; $sql_chart4 = "SELECT COUNT(DISTINCT p.hn) AS cc_hn FROM er_nursing_detail en INNER JOIN ovst o ON o.vn=en.vn INNER JOIN ovst_seq os ON os.vn=en.vn INNER JOIN er_regist e ON e.vn=o.vn INNER JOIN er_pt_type erpt ON erpt.er_pt_type=e.er_pt_type AND erpt.accident_code='Y' INNER JOIN patient p ON p.hn=o.hn INNER JOIN pq_screen pq ON pq.vn=en.vn INNER JOIN opduser ou ON ou.loginname=pq.staff WHERE e.vstdate BETWEEN '2015-10-01' AND DATE(NOW()) AND (en.accident_place_type_id='' OR en.accident_place_type_id IS NULL or en.visit_type='' OR en.visit_type IS NULL or en.accident_alcohol_type_id='' OR en.accident_alcohol_type_id IS NULL or en.accident_drug_type_id='' OR en.accident_drug_type_id IS NULL or en.accident_airway_type_id='' OR en.accident_airway_type_id IS NULL or en.accident_bleed_type_id='' OR en.accident_bleed_type_id IS NULL or en.accident_splint_type_id='' OR en.accident_splint_type_id IS NULL or en.accident_fluid_type_id='' OR en.accident_fluid_type_id IS NULL or en.er_emergency_type='' OR en.er_emergency_type IS NULL ) ORDER BY e.enter_er_time"; $chart1 = Yii::$app->db2->createCommand($sql_chart1)->queryAll(); $chart2 = Yii::$app->db2->createCommand($sql_chart2)->queryAll(); $chart3 = Yii::$app->db2->createCommand($sql_chart3)->queryAll(); $chart4 = Yii::$app->db2->createCommand($sql_chart4)->queryAll();

return $this->render('report3', [ 'chart1' => $chart1, 'chart2' => $chart2, 'chart3' => $chart3, 'chart4' => $chart4]); }

4. สรางไฟลชอ report3 ไวทตำาแหนง frontend\views\report\ report3.php ดงน

<?php

use miloschuman\highcharts\Highcharts;use yii\web\JsExpression;use yii\grid\GridView;use yii\helpers\Html;use yii\bootstrap\ActiveForm;use yii\jui\DatePicker;

/* @var $this yii\web\View */$this->title = 'จำานวนผปวย(Patient) TYPEAREA มคาวาง';$this->params['breadcrumbs'][] = 'Solid Gauges Charts';?>

<div style='display: none'> <?= Highcharts::widget([ 'scripts' => [ 'highcharts-more', //'themes/grid', //'modules/exporting', 'modules/solid-gauge', ] ]); ?></div> <?php//$webroot = Yii::$app->request->BaseUrl;$this->registerJsFile('@web/js/chart-donut.js', ['depends' => [\yii\web\JqueryAsset::className()]]);?><div class="panel panel-default"> <div class="panel-heading"> <h3 class="panel-title"><span class="glyphicon glyphicon glyphicon-signal"></span> Solid Gauges Charts</h3> </div> <div class="panel-body"> <!--row1 --> <div class="row"> <!-- col1---> <div class="col-md-3" style="text-align: center;"> <?php $data1 = []; for ($i = 0; $i < count($chart1); $i++) { $data1[] = $chart1[$i]['cc_hn']; } $js_cc1 = implode(",", $data1);

$this->registerJs(" var obj_div=$('#chart1'); gen_donut(obj_div,'ไมลงผลวนจฉย OPD',$js_cc1); "); ?> <div id="chart1" style="width: 300px; height: 200px; float: left"></div> </div> <!-- col2---> <div class="col-md-3" style="text-align: center;"> <?php $data2 = []; for ($i = 0; $i < count($chart2); $i++) { $data2[] = $chart2[$i]['cc_hn']; } $js_cc2 = implode(",", $data2);

$this->registerJs(" var obj_div=$('#chart2'); gen_donut(obj_div,'ไมลงผลวนจฉย IPD',$js_cc2); "); ?> <div id="chart2" style="width: 300px; height: 200px; float: left"></div> </div><!-- col3---> <div class="col-md-3" style="text-align: center;"> <?php $data3 = []; for ($i = 0; $i < count($chart3); $i++) { $data3[] = $chart3[$i]['cc_hn']; } $js_cc3 = implode(",", $data3);

$this->registerJs(" var obj_div=$('#chart3'); gen_donut(obj_div,'TYPEAREA= NULL หรอ <>4',$js_cc3); "); ?> <div id="chart3" style="width: 300px; height: 200px; float: left"></div> </div> <!-- col4--->

5. ทดสอบเวบ URL http://localhost/yii2-demo/frontend/web/index.php?r=report/rep3 จะไดดงรป

รปท 6 แบบทดสอบท3 สรางกราฟโดยใช High charts ชนด Solid Gauges

<div class="col-md-3" style="text-align: center;"> <?php $data4 = []; for ($i = 0; $i < count($chart4); $i++) { $data4[] = $chart4[$i]['cc_hn']; } $js_cc4 = implode(",", $data4);

$this->registerJs(" var obj_div=$('#chart4'); gen_donut(obj_div,'ขอมลอบตเหต-ฉกเฉนไมสมบรณ',$js_cc4); "); ?> <div id="chart4" style="width: 300px; height: 200px; float: left"></div> </div> </div></div>

การสราง Dialog SQL Code

Dialog SQL สำาหรบแสดงชดคำาสง SQL เพอไวสำาหรบตรวจสอบความถกตอง

1. เพม use yii\web\JsExpression ใน view ทตองการแสดง ชดคำาสง SQL

2. เพมตวแปรสำาหรบ Render ไปให View

3. เพมคำาสงสำาหรบแสดง dialog sql และ คำาสง <?= $sql ?> เพอแสดงคำาสง sql

use yii\web\JsExpression;

$data = Yii::$app->db2->createCommand($sql)->queryAll(); $dataProvider = new ArrayDataProvider([ 'allModels'=>$data, ]);

return $this->render('report2', ['dataProvider' => $dataProvider, 'chart' => $data,'sql' => $sql,'date1' => $date1, 'date2' => $date2]);

<div class="box-tools pull-right"> <!-- dialog sql --> <button type="button" class="btn btn-danger btn-xs" data-toggle="modal" data-target=".bs-example-modal-lg">sql script</button> <div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel"> <div class="modal-dialog modal-lg"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> <h4 class="modal-title" id="gridSystemModalLabel">SQL : จำานวนครงผปวยรบบรการทวไปจำาแนกสทธและคาใชจาย(ไมนบสงเสรม)</h4> </div> <div class="modal-body"> <?= $sql ?> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> </div> </div>

4. ทดสอบพมพ URL http://localhost/yii2-demo/frontend/web/index.php?r=report/rep2 และกดปม SQL script กจะม dialog ชดคำาสง SQL แสดงขนมา ดงรปท 8

รปท 7 แสดงปม sql script

รปท 8 Dialog ชดคำาสง SQL

<div class="box-tools pull-right"> <!-- dialog sql --> <button type="button" class="btn btn-danger btn-xs" data-toggle="modal" data-target=".bs-example-modal-lg">sql script</button> <div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel"> <div class="modal-dialog modal-lg"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> <h4 class="modal-title" id="gridSystemModalLabel">SQL : จำานวนครงผปวยรบบรการทวไปจำาแนกสทธและคาใชจาย(ไมนบสงเสรม)</h4> </div> <div class="modal-body"> <?= $sql ?> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> </div> </div>