การใช้งาน Highcharts โดยส่งข้อมูลแบบ JSON

หมวดสำหรับแบ่งบันความ รู้ต่างๆ จะมีหมวดย่อยๆ ในหมวดนี้ เช่น php, SQL, XML, CSS

Moderators: mindphp, ผู้ดูแลกระดาน

User avatar
tsukasaz
PHP VIP Members
PHP VIP Members
Posts: 12915
Joined: 18/04/2012 9:39 am

การใช้งาน Highcharts โดยส่งข้อมูลแบบ JSON

Post by tsukasaz »

ทำความรู้จัก highcharts สร้างกราฟ บนหน้าเว็บโดยใช้ Javascript

สามารถดาวน์โหลดเวอร์ชั่นล่าสุดของ Highcharts ได้ที่ http://www.highcharts.com/download

สำหรับกระทู้นี้จะแสดงการใช้งาน Highcharts โดยรับส่งข้อมูลผ่าน Ajax ข้อมูลที่ส่งใช้รูปแบบของ JSON ตัวอย่างโค้ดใช้ Highcharts 2.2.5 และ jQuery 1.7.2 นะครับ

ตัวอย่างโค้ด

Code: Select all

<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

Code: Select all

<?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);
?>
The last bug isn't fixed until the last user is dead. (Sidney Markowitz, 1995)
User avatar
tsukasaz
PHP VIP Members
PHP VIP Members
Posts: 12915
Joined: 18/04/2012 9:39 am

Re: การใช้งาน Highcharts โดยส่งข้อมูลแบบ JSON

Post by tsukasaz »

การแสดงผลครับ สามารถนำไปประยุกต์ใช้กับการเรียกข้อมูลจากฐานข้อมูลได้นะครับ
Attachments
charts (Small).JPG
charts (Small).JPG (16.96 KiB) Viewed 4862 times
The last bug isn't fixed until the last user is dead. (Sidney Markowitz, 1995)
User avatar
tsukasaz
PHP VIP Members
PHP VIP Members
Posts: 12915
Joined: 18/04/2012 9:39 am

Re: การใช้งาน Highcharts โดยส่งข้อมูลแบบ JSON

Post by tsukasaz »

ตัวอย่างเพิ่มเติมเป็นแบบ live chart
http://www.highcharts.com/studies/live-server.htm
The last bug isn't fixed until the last user is dead. (Sidney Markowitz, 1995)
taladmall

Re: การใช้งาน Highcharts โดยส่งข้อมูลแบบ JSON

Post by taladmall »

สอบถามเรื่อง กราฟ หัวข้อภาษาไทย มันออกมาไม่ครบครับ ตัวอักขระข้างบนจะมีปัญหา แก้ยังไงครับ
User avatar
mindphp
ผู้ดูแลระบบ MindPHP
ผู้ดูแลระบบ MindPHP
Posts: 26681
Joined: 22/09/2008 6:18 pm
Contact:

Re: การใช้งาน Highcharts โดยส่งข้อมูลแบบ JSON

Post by mindphp »

รูปแบบ title

Code: Select all

  title: {
            text: 'Fruit Consumptions'
         },
ติดตาม VDO: http://www.youtube.com/c/MindphpVideoman
ติดตาม FB: https://www.facebook.com/pages/MindphpC ... 9517401606
หมวดแชร์ความรู้: https://www.mindphp.com/forums/viewforum.php?f=29
รับอบรม และพัฒนาระบบ: https://www.mindphp.com/forums/viewtopic.php?f=6&t=2042
Post Reply
  • Similar Topics
    Replies
    Views
    Last post

Return to “Share Knowledge”

Who is online

Users browsing this forum: No registered users and 33 guests