Breaking

วันศุกร์ที่ 1 เมษายน พ.ศ. 2559

สร้างกราฟ + PHP + DATABASE



การสร้างกราฟ เพื่อแสดงประกอบกับรายงาน
ง่ายๆเพียงใช้ CanvasJs
ตัวอย่างดังรูปภาพ

หมายเหตุ... ลิงค์ที่ไฮไลท์ ให้ดาวโหลดไฟล์ หรือจะวางเป็น CDN ก้อได้ค่ะ
CDN canvasjs.min.js : https://cdnjs.cloudflare.com/ajax/libs/canvasjs/1.7.0/canvasjs.min.jsหา CDN ตัวแรกไม่เจอนะคะ ใครมีขอลิงค์ให้เราบ้างนะ ขอบคุนนค้าาาา 
========================================================
<!DOCTYPE HTML>
<html>

<head>
<title>CanvasJS Chart jQuery Plugin</title>
<script type="text/javascript" src="/assets/script/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="/assets/script/jquery.canvasjs.min.js"></script>
<script type="text/javascript">
window.onload = function () {

//Better to construct options first and then pass it as a parameter
var options = {
title: {
text: "Column Chart using jQuery Plugin"
},
                animationEnabled: true,
data: [
{
type: "column", //change it to line, area, bar, pie, etc
dataPoints: [
{ x: 10, y: 10 },
{ x: 20, y: 11 },
{ x: 30, y: 14 },
{ x: 40, y: 16 },
{ x: 50, y: 19 },
{ x: 60, y: 15 },
{ x: 70, y: 12 },
{ x: 80, y: 10 }
]
}
]
};

$("#chartContainer").CanvasJSChart(options);

}
</script>
</head>
<body>
<div id="chartContainer" style="height: 300px; width: 100%;"></div>
</body>

</html>


=========================================================




















Download : http://canvasjs.com/jquery-charts/

1 ความคิดเห็น:

Post Top Ad

Your Ad Spot

หน้าเว็บ