วันอังคารที่ 12 สิงหาคม พ.ศ. 2557

สร้างกราฟ ด้วย Chart.js แบบที legend

      การสร้างกราฟด้วย Chart.js จะมีปัญหาที่ไม่สามารถสร้าง legent ได้ แต่มีวิธีแก้ไข
โดยใช้ Chart.js.legend  สามาร D/L ได้ที่ https://github.com/bebraw/Chart.js.legend
แล้วแก้ไข code ดังนี้

<?
$g_label="labels : ['1-01/01/56','2-01/02/56','3-01/032/56','4-01/04/56','5-01/05/56','6-01/06/56']";
$fbs_data="data : [100,125,120,128,100,130]";
$systolic_data="data : [120,150,110,180,100,120]";
$dyastolic_data="data : [80,110,70,120,60,80]";
?>
<!DOCTYPE html>
<html>
<head>
<link href="assets/chart_legent/demo.css" rel="stylesheet" type="text/css">
<script src="assets/chart_legent/Chart.js"></script>
<script src="assets/chart_legent/legend.js"></script>

<meta charset=utf-8 />
<meta name="viewport" content="width=device-width, user-scalable=no" />
<title></title>

<script>
        if(!!(window.addEventListener)) window.addEventListener('DOMContentLoaded', main);
        else window.attachEvent('onload', main);

        function main() {
            lineChart();
          }

        function lineChart() {
            var data = {
                <? echo $g_label;?>,
                datasets : [
                    {
                    fillColor : "rgba(220,220,220,0.5)",
                    //strokeColor : "rgba(220,220,220,1)",
                    //pointColor : "rgba(220,220,220,1)",
                    pointStrokeColor : "#fff",

                    pointColor : "rgba(255,128,0,1)",   //สีส้ม
                    strokeColor : "rgba(255,255,0,1)",  //สีเหลือง
                    pointHighlightFill : "#FF0000",     //สีแดง


                     <? echo $fbs_data;?>,
                    title : 'FBS'
                },
                {
                    fillColor : "rgba(151,187,205,0.5)",
                    strokeColor : "rgba(0,128,192,1)",  //ฟ้าเข้ม
                    //pointColor : "rgba(151,187,205,1)",
                    pointColor : "rgba(0,0,255,1)",             //blue
                    pointStrokeColor : "#fff",
                    <? echo $systolic_data;?>,
                    title : 'Systolic'
                },
                {
                    fillColor : "rgba(151,187,205,0.5)",
                    strokeColor : "rgba(151,187,205,1)",
                    pointColor : "rgba(151,187,205,1)",
                    pointStrokeColor : "#fff",
                    <? echo $dyastolic_data;?>,
                    title : 'Dyastolic'
                }
                ]
            };

            var ctx = document.getElementById("lineChart").getContext("2d");
            new Chart(ctx).Line(data);

            legend(document.getElementById("lineLegend"), data);

            // testing adding twice (should get same result)
            legend(document.getElementById("lineLegend"), data);
            showTooltips: true;
        }

</script>

</head>
<body>

<br><br>

<div align="center">
   กราฟแสดงแนวโน้มของค่าความดันโลหิตและระดับน้ำตาลในกระแสเลือด
   <div>
    <canvas id="lineChart" width="900" height="300"></canvas>
    <div id="lineLegend"></div>
   </div>
</div>


</body>
</html>



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