ทำความรู้จัก highcharts สร้างกราฟ บนหน้าเว็บโดยใช้ Javascript
สามารถดาวน์โหลดเวอร์ชั่นล่าสุดของ Highcharts ได้ที่
http://www.highcharts.com/download
สำหรับกระทู้นี้จะแสดงการใช้งาน Highcharts โดยรับส่งข้อมูลผ่าน Ajax ข้อมูลที่ส่งใช้รูปแบบของ JSON ตัวอย่างโค้ดใช้ Highcharts 2.2.5 และ jQuery 1.7.2 นะครับ
ตัวอย่างโค้ด
โค้ด: เลือกทั้งหมด
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="js/highcharts.src.js"></script>
<script type="text/javascript">
var options; // ประกาศตัวแปรสำหรับเก็บค่า Options ต่างๆ เพื่อกำหนดให้กับ Charts
function requestData() { // เรียกข้อมูลเข้ามาแสดงด้วย Ajax
jQuery.ajax({
url: 'json.php',
success: function(data) {
var series;
jQuery.each(data, function(seriesname, subdata) {
// ใช้ jQuery.each ดึงข้อมูลจากรูปแบบ JSON และกำหนดค่าให้กับตัวแปร series ข้อมูลที่เก็บเข้าไปจะอยู่ในรูปแบบ Object
series = {
data: []
};
series.name = seriesname; // กำหนดชื่อของ series
jQuery.each(subdata, function(key, value) {
series.data.push(parseFloat(value)); // วนลูปเก็บค่าของแต่ละ series
});
options.series.push(series); // นำค่าของ series เข้าไปเก็บใน options
});
var chart = new Highcharts.Chart(options);
},
cache: false
});
}
jQuery(document).ready(function() {
options = ({
// renderTo คือให้กราฟแสดงที่ำไหน ส่วน type เป็นรูปแบบของกราฟ
chart: {
renderTo: 'container',
type: 'column'
},
// กำหนดชื่อให้ charts
title: {
text: 'Fruit Consumptions'
},
// กำหนดชื่อให้แกน Y และค่าที่น้อยสุดของแกน
yAxis: {
min: 0,
title: {
text: 'Units'
}
},
// กำหนดหมวดหมู่ข้อมูลของแกน X
xAxis: {
categories: ['Apples','Pears','Oranges','Bananas']
},
// แสดงข้อมูลใน charts โดยในตัวอย่างจะดึงจากไฟล์ JSON เข้ามา
series: []
});
// ดึงข้อมูลผ่าน Ajax
requestData();
});
</script>
</head>
<body>
<div id="container" style="width: 800px; height: 400px; margin: 0 auto"></div>
</body>
</html>
ไฟล์ข้อมูล JSON
โค้ด: เลือกทั้งหมด
<?php
header("Content-type: text/json");
$data = array(
'John' => array(8,4,6,5),
'Jane' => array(3,4,2,3),
'Joe' => array(6,7,9,7)
);
echo json_encode($data);
?>
[url=https://www.mindphp.com/forums/viewtopic.php?f=29&t=12648]ทำความรู้จัก highcharts สร้างกราฟ บนหน้าเว็บโดยใช้ Javascript[/url]
สามารถดาวน์โหลดเวอร์ชั่นล่าสุดของ Highcharts ได้ที่ http://www.highcharts.com/download
สำหรับกระทู้นี้จะแสดงการใช้งาน Highcharts โดยรับส่งข้อมูลผ่าน Ajax ข้อมูลที่ส่งใช้รูปแบบของ JSON ตัวอย่างโค้ดใช้ Highcharts 2.2.5 และ jQuery 1.7.2 นะครับ
ตัวอย่างโค้ด
[code]<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="js/highcharts.src.js"></script>
<script type="text/javascript">
var options; // ประกาศตัวแปรสำหรับเก็บค่า Options ต่างๆ เพื่อกำหนดให้กับ Charts
function requestData() { // เรียกข้อมูลเข้ามาแสดงด้วย Ajax
jQuery.ajax({
url: 'json.php',
success: function(data) {
var series;
jQuery.each(data, function(seriesname, subdata) {
// ใช้ jQuery.each ดึงข้อมูลจากรูปแบบ JSON และกำหนดค่าให้กับตัวแปร series ข้อมูลที่เก็บเข้าไปจะอยู่ในรูปแบบ Object
series = {
data: []
};
series.name = seriesname; // กำหนดชื่อของ series
jQuery.each(subdata, function(key, value) {
series.data.push(parseFloat(value)); // วนลูปเก็บค่าของแต่ละ series
});
options.series.push(series); // นำค่าของ series เข้าไปเก็บใน options
});
var chart = new Highcharts.Chart(options);
},
cache: false
});
}
jQuery(document).ready(function() {
options = ({
// renderTo คือให้กราฟแสดงที่ำไหน ส่วน type เป็นรูปแบบของกราฟ
chart: {
renderTo: 'container',
type: 'column'
},
// กำหนดชื่อให้ charts
title: {
text: 'Fruit Consumptions'
},
// กำหนดชื่อให้แกน Y และค่าที่น้อยสุดของแกน
yAxis: {
min: 0,
title: {
text: 'Units'
}
},
// กำหนดหมวดหมู่ข้อมูลของแกน X
xAxis: {
categories: ['Apples','Pears','Oranges','Bananas']
},
// แสดงข้อมูลใน charts โดยในตัวอย่างจะดึงจากไฟล์ JSON เข้ามา
series: []
});
// ดึงข้อมูลผ่าน Ajax
requestData();
});
</script>
</head>
<body>
<div id="container" style="width: 800px; height: 400px; margin: 0 auto"></div>
</body>
</html>[/code]
ไฟล์ข้อมูล JSON
[code=php]<?php
header("Content-type: text/json");
$data = array(
'John' => array(8,4,6,5),
'Jane' => array(3,4,2,3),
'Joe' => array(6,7,9,7)
);
echo json_encode($data);
?>[/code]