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

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

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

ภาพประจำตัวสมาชิก
tsukasaz
PHP VIP Members
PHP VIP Members
โพสต์: 22001
ลงทะเบียนเมื่อ: 18/04/2012 9:39 am

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

โพสต์ที่ยังไม่ได้อ่าน โดย tsukasaz »

ทำความรู้จัก 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);
?>
The last bug isn't fixed until the last user is dead. (Sidney Markowitz, 1995)
ภาพประจำตัวสมาชิก
tsukasaz
PHP VIP Members
PHP VIP Members
โพสต์: 22001
ลงทะเบียนเมื่อ: 18/04/2012 9:39 am

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

โพสต์ที่ยังไม่ได้อ่าน โดย tsukasaz »

การแสดงผลครับ สามารถนำไปประยุกต์ใช้กับการเรียกข้อมูลจากฐานข้อมูลได้นะครับ
แนบไฟล์
charts (Small).JPG
charts (Small).JPG (16.96 KiB) Viewed 7232 times
The last bug isn't fixed until the last user is dead. (Sidney Markowitz, 1995)
ภาพประจำตัวสมาชิก
tsukasaz
PHP VIP Members
PHP VIP Members
โพสต์: 22001
ลงทะเบียนเมื่อ: 18/04/2012 9:39 am

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

โพสต์ที่ยังไม่ได้อ่าน โดย 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

โพสต์ที่ยังไม่ได้อ่าน โดย taladmall »

สอบถามเรื่อง กราฟ หัวข้อภาษาไทย มันออกมาไม่ครบครับ ตัวอักขระข้างบนจะมีปัญหา แก้ยังไงครับ
ภาพประจำตัวสมาชิก
mindphp
ผู้ดูแลระบบ MindPHP
ผู้ดูแลระบบ MindPHP
โพสต์: 41251
ลงทะเบียนเมื่อ: 22/09/2008 6:18 pm
ติดต่อ:

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

โพสต์ที่ยังไม่ได้อ่าน โดย mindphp »

รูปแบบ title

โค้ด: เลือกทั้งหมด

  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
Somruay

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

โพสต์ที่ยังไม่ได้อ่าน โดย Somruay »

tsukasaz เขียน: 23/07/2012 12:37 pm การแสดงผลครับ สามารถนำไปประยุกต์ใช้กับการเรียกข้อมูลจากฐานข้อมูลได้นะครับ
ถ้าเราจะกำหนดไม่ให้แสดงแกน y ได้รึป่าวคับ
ภาพประจำตัวสมาชิก
tsukasaz
PHP VIP Members
PHP VIP Members
โพสต์: 22001
ลงทะเบียนเมื่อ: 18/04/2012 9:39 am

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

โพสต์ที่ยังไม่ได้อ่าน โดย tsukasaz »

Somruay เขียน: 22/06/2023 11:20 am
tsukasaz เขียน: 23/07/2012 12:37 pm การแสดงผลครับ สามารถนำไปประยุกต์ใช้กับการเรียกข้อมูลจากฐานข้อมูลได้นะครับ
ถ้าเราจะกำหนดไม่ให้แสดงแกน y ได้รึป่าวคับ
ได้ครับ กำหนด yAxis.visible เป็น false

โค้ด: เลือกทั้งหมด

yAxis: {
    visible: false
}
The last bug isn't fixed until the last user is dead. (Sidney Markowitz, 1995)
บุคคลทั่วไป

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

โพสต์ที่ยังไม่ได้อ่าน โดย บุคคลทั่วไป »

ถัดไป คุณต้องสร้างเว็บเพจ HTML ด้วยไลบรารี Highcharts และพื้นที่สำหรับแสดงแผนภูมิ
ตอบกลับโพส
  • Similar Topics
    ตอบกลับ
    แสดง
    โพสต์ล่าสุด

ผู้ใช้งานขณะนี้

สมาชิกกำลังดูบอร์ดนี้: Majestic-12 [Bot] และบุคลทั่วไป 97