เพราะสมองไม่ได้มีไว้กั้นหู: PHP :: สร้างกราฟต่าง ๆ ด้วย PHP

วันอังคารที่ 28 พฤษภาคม พ.ศ. 2562

PHP :: สร้างกราฟต่าง ๆ ด้วย PHP

ตัวอย่าง
https://intranet.sci.com/sci/AF/ConsumeChart/OT1.php?Year=2018

1. Download lib มาไว้ที่เครื่อง ที่ Run Web apache
https://www.highcharts.com/blog/download/

2. เข้าดูตัวอย่างใน examples จะมีตัวอย่างกราฟต่าง ๆ
PHP ตัวอย่าง เช่น
<?php
error_reporting(E_ERROR);
define('IN_PHPBB', true);
$phpbb_root_path = (defined('PHPBB_ROOT_PATH')) ? PHPBB_ROOT_PATH : '../../../';
$phpEx = substr(strrchr(__FILE__, '.'), 1);
include($phpbb_root_path . 'common.' . $phpEx);
 
include($phpbb_root_path ."sci/include/config.php");
//include($phpbb_root_path ."sci/include/db.php");
include($phpbb_root_path ."sci/include/functions.php");
include($phpbb_root_path ."sci/include/db2.php");
 
$dep = array('DS', 'IF', 'OD', 'PD', 'QA', 'SS2', 'SS1:SS', 'SS1', 'PR', 'WH');
$depTH = array('ฝอบ.', 'ฝทง.', 'ฝพอ.', 'ฝผล.', 'ฝปค.', 'ฝข.2', 'งสข.', 'ฝข.1', 'ฝวจ.', 'งคส.');
//$SQL = "SELECT AccountNum,AccountName,SUM(AMOUNT),Department FROM sci_AxUsedWaste.Data"; 
 
$curYear = $_GET["Year"];
if($curYear == ""){
    $curYear = date("Y");
    $yearLoop = array('2019', '2018', '2017');
} else {
    $yearLoop = array($curYear);
}
 
?>
<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Highcharts Example</title>
 
        <style type="text/css">
 
        </style>
    </head>
    <body>
<script src="../lib/code/highcharts.js"></script>
<script src="../lib/code/modules/exporting.js"></script>
<script src="../lib/code/modules/export-data.js"></script>
 
<!-- ---------------------------------------- 1 ------------------------------------------------------ -->  
<div id="container" style="min-width: 310px; max-width: 1000px; margin: 0 auto"></div>
 
        <script type="text/javascript">
Highcharts.setOptions({
    lang: {
      decimalPoint: '.',
      thousandsSep: ','
    }
});
var chart = new Highcharts.Chart({
      chart: {
         renderTo: 'container',
         type: 'line'
      },
        title: {
                text: "กราฟแสดงจำนวน OT แยกฝ่าย"
        },
 
        xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
        max: 11
        },
 
        yAxis: {
        title: {
            text: 'บาท'
        }
      },        
        tooltip: {
        crosshairs: true,
        shared: true
        },
        
        plotOptions: {
        line: {
            dataLabels: {
                enabled: true
            },
            marker: {
                radius: 4,
                lineColor: '#666666',
                lineWidth: 1
            }
        },
        /*series: {
            cursor: 'pointer',
            point: {
                events: {
                    click: function () {
                        //alert('Category: ' + this.category + ', value: ' + this.y);
                         location.href = 'consumeByMonth.php?acc=<?php  echo $acc ?>' + '&mm=' + this.category + '&yy=' + <?php  echo $curYear ?>;
                    }
                }
            }
        }*/
        },      
        series: [
<?php
    for($i = 0; $i < 10; $i++ ){
        $data = [];
        $SQL = "SELECT * FROM sci_consume_chart.ot"; 
        $SQL .= " WHERE YearMonth LIKE '$curYear-%'";
        $SQL .= " AND Department LIKE '$depTH[$i]%'";
        $SQL .= " ORDER BY Department";
        $result = $mysqli->query($SQL);
//      echo $SQL;
//      exit;
        while($row = $result->fetch_array()){
            $data += [ $row["YearMonth"] => $row["OTCost"] ];
        }
        
        for($n = 1; $n < date(m); $n++){
            $date = sprintf($curYear."-%02s", $n);
            if(!array_key_exists($date, $data)){
                $data += [ $date => 0 ];
            }       
        }
        ksort($data);
?>          
      {
        name: <?php echo "'".$depTH[$i]."'" ?>,
         data: [<?php echo join($data, ',') ?>]
      },
<?php
    }
?>      
      ]  
});
        </script>
 
<!-- --------------------------------------------- 2 ---------------------------------------------------- -->   
<br>
<br>        
 
<?php
//############# Line 1 PD Weight ##################//
$data1 = [];    
$SQL = "SELECT * FROM sci_consume_chart.PD_weight"; 
$SQL .= " WHERE YearMonth LIKE '$curYear-%'";
$SQL .= " ORDER BY YearMonth";
$result = $mysqli->query($SQL);
while($row = $result->fetch_array()){
    $data1 += [ $row["YearMonth"] => $row["Weight"] ];
}
 
for($n = 1; $n <= 12; $n++){
    $date = sprintf($curYear."-%02s", $n);
    if(!array_key_exists($date, $data1)){
        $data1 += [ $date => 0 ];
    }       
}
ksort($data1);
//print_r($dataColumn);     
 
//############# Line 2 OTHour ##################//
for($i = 0; $i < 10; $i++ ){
    $data2 = [];    //Reset.
    $SQL = "SELECT SUM(OTHour) AS SumOTHour, YearMonth FROM sci_consume_chart.ot"; 
    $SQL .= " WHERE YearMonth LIKE '$curYear-%'";
    $SQL .= " GROUP BY YearMonth";
    $SQL .= " ORDER BY Department";
    $result = $mysqli->query($SQL);
    while($row = $result->fetch_array()){
        $data2 += [ $row["YearMonth"] => $row["SumOTHour"] ];
    }
    
    for($n = 1; $n <= 12; $n++){
        $date = sprintf($curYear."-%02s", $n);
        if(!array_key_exists($date, $data2)){
            $data2 += [ $date => 0 ];
        }       
    }
    ksort($data2);
   $data2 = join($data2, ',');
}
 
 
?>
<div id="container2" style="min-width: 310px; max-width: 1180px; margin: 0 auto"></div>
<script type="text/javascript">
var chart2 = new Highcharts.chart('container2', {
    chart: {
        zoomType: 'xy'
    },
    title: {
        text: "กราฟแสดงน้ำหนักผลิต (กก.) และ OT (ชั่วโมง)"
    },
    subtitle: {
        text: ''
    },
    xAxis: [{
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
            'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
        crosshair: true
    }],
    yAxis: [{ // Primary yAxis
        labels: {
            format: '{value} กิโลกรัม',
            style: {
                color: Highcharts.getOptions().colors[1]
            }
        },
        title: {
            text: 'น้ำหนักผลิต',
            style: {
                color: Highcharts.getOptions().colors[1]
            }
        },
        opposite: true
 
    }, { // Secondary yAxis
        gridLineWidth: 0,
        title: {
            text: 'OT',
            style: {
                color: Highcharts.getOptions().colors[1]
            }
        },
        labels: {
            format: '{value} ชั่วโมง',
            style: {
                color: Highcharts.getOptions().colors[1]
            }
        }
    }],
    tooltip: {
        shared: true
    },
    legend: {
          //layout: 'vertical', 
        layout: 'horizontal',
        align: 'left',
        x: 100,
        verticalAlign: 'top',
        y: 20,
        floating: true,
        backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || 'rgba(255,255,255,0.25)'
    },
        plotOptions: {
        column: {
            dataLabels: {
                enabled: true,
                color: 'red'         
            }
        },
        line: {
            dataLabels: {
                enabled: true
            },
            marker: {
                radius: 4,
                lineColor: '#666666',
                lineWidth: 1
            }
        },/*
        series: {
            cursor: 'pointer',
            point: {
                events: {
                    click: function () {
                        //alert('Category: ' + this.category + ', value: ' + this.y);
                         location.href =  'TopItemByMonth.php?itemid=<?php echo $itemid ?>' + '&mm=' +  this.category + '&yy=' + <?php echo $prvYear ?>;
                    }
                }
            }
        }*/
        },    
    series: [{
        name: 'น้ำหนักผลิต',
        type: 'column',
        data: [<?php echo join($data1, ',') ?>],
        tooltip: {
            valueSuffix: ' กิโลกรัม'
        }
 
    }, {
        name: 'Sum ทุกฝ่าย',
        type: 'line',
        yAxis: 1,
        data: [<?php echo $data2; ?>],
        tooltip: {
            valueSuffix: ' บาท'
        }
                    
    }]
});
 
</script>   
<br>
<br>
<!-- ---------------------------------------- 3 ------------------------------------------------------ -->  
<div id="container3" style="min-width: 310px; max-width: 1000px; margin: 0 auto"></div>
 
        <script type="text/javascript">
Highcharts.setOptions({
    lang: {
      decimalPoint: '.',
      thousandsSep: ','
    }
});
var chart3 = new Highcharts.Chart({
      chart: {
         renderTo: 'container3',
         type: 'line'
      },
        title: {
                text: "กราฟแสดงอัตราส่วน OT/น้ำหนักผลิต (ชั่วโมง/ตัน)"
        },
 
        xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
        max: 11
        },
 
        yAxis: {
        title: {
            text: 'ชั่วโมง'
        }
      },        
        tooltip: {
        crosshairs: true,
        shared: true
        },
        
        plotOptions: {
        line: {
            dataLabels: {
                enabled: true
            },
            marker: {
                radius: 4,
                lineColor: '#666666',
                lineWidth: 1
            }
        },
        /*series: {
            cursor: 'pointer',
            point: {
                events: {
                    click: function () {
                        //alert('Category: ' + this.category + ', value: ' + this.y);
                         location.href = 'consumeByMonth.php?acc=<?php  echo $acc ?>' + '&mm=' + this.category + '&yy=' + <?php  echo $curYear ?>;
                    }
                }
            }
        }*/
        },      
        series: [
<?php
if($curYear == date(Y)){
    $loop = 3;
} else {
    $loop = 1;
}   
 
for($i = 0; $i < $loop; $i++ ){
    $data3 = [];
    $SQL = "SELECT * FROM sci_consume_chart.PD_weight"; 
    $SQL .= " WHERE YearMonth LIKE '$yearLoop[$i]-%'";
    $SQL .= " ORDER BY YearMonth";
    $result = $mysqli->query($SQL);
    //$x = 1;
    while($row = $result->fetch_array()){
        //echo $x.":".$row["Weight"]."<br>";
        $SQL2 = "SELECT SUM(OTHour) AS SumOTHour FROM sci_consume_chart.ot"; 
        $SQL2 .= " WHERE YearMonth = '".$row["YearMonth"]."'";
        $SQL2 .= " GROUP BY '".$row["YearMonth"]."'";
        $result2 = $mysqli->query($SQL2);
        //echo $SQL2."<br>";
         
        $row2 = $result2->fetch_array();
        $ValuePrint = number_format($row2["SumOTHour"] / ($row["Weight"] / 1000), 2, ".", "");
        $data3 += [ $row["YearMonth"] => $ValuePrint ];
        //$x++; 
    }
    
    if($curYear == $yearLoop[$i]){
        for($n = 1; $n < date(m); $n++){
            $date = sprintf($curYear."-%02s", $n);
            if(!array_key_exists($date, $data3)){
                $data3 += [ $date => 0 ];
            }       
        }
    }   
    ksort($data3);
?>          
      {
        name: <?php echo "'".$yearLoop[$i]."'" ?>,  
         data: [<?php echo join($data3, ',') ?>]
      }, 
<?php 
}
?>           
      ]  
});
        </script>   
        
    </body>
</html>
เพราะสมองไม่ได้มีไว้กั้นหู

หน้าเว็บ

วันอังคารที่ 28 พฤษภาคม พ.ศ. 2562

PHP :: สร้างกราฟต่าง ๆ ด้วย PHP

ไม่มีความคิดเห็น:

แสดงความคิดเห็น
