ชาวเราเหล่าคนทำเว็บโปรแกรมมิ่ง เมื่อทำโปรแกรมออกมาสักตัวหนึ่ง สิ่งที่มักจะหลีกหนีไม่พ้นก็คือการแสดงกราฟ

pChart เป็นคลาส PHP ที่ใช้สำหรับสร้างกราฟโดยเฉพาะ จุดเด่นที่เห็นได้ชัดก็คือใช้ง่าย และผลลัพธ์ออกมาสวยงาม

คลาสตัวนี้ผมรู้จักมาจากคุณ 7 ซึ่งก็คงต้องขอขอบคุณไว้ ณ ตรงนี้ด้วย ผมคิดอยู่หลายวันว่าจะเขียนบทความเรื่องนี้อย่างไรดี ให้ท่านอ่านรู้เรื่องได้ไม่ยากนัก คิดไปคิดมาตกลงในใจว่าจะแสดงโค้ดสำหรับสร้างกราฟสำเร็จรูปขึ้นมาเลย ท่านจะได้ก้อปแล้วใช้งานได้เลย หลังจากนั้นจึงอธิบายโค้ด ในจุดที่จำเป็นต้องรู้ เผื่อการแก้ไขให้ตรงกับความต้องการ

แจ้งกรอบการนำเสนอไว้ จะได้ทำใจให้เป็นไปในแนวทางเดียวกัน ตั้งแต่เริ่มต้น ผลลัพธ์ของโค้ดที่นำมาเสนอจะเป็นดังภาพด้านล่าง

pchart-01

1. ดาวนโหลดคลาส pChart

เวอร์ชั่นที่ใช้คือ pChart 1.27 – beta ดาวน์โหลดที่นี่

2. เขียนโค้ด

<?php
  // Standard inclusions      
  include("pChart/pData.class");   
  include("pChart/pChart.class");   
 
  // Dataset definition    
  $DataSet = new pData;   
  $DataSet->AddPoint(array(1079,1151,1185,1226,1121,738,710),"Visitor");
  $DataSet->AddPoint(array("1 พ.ย.","2 พ.ย.","3 พ.ย.","4 พ.ย.","5 พ.ย.","6 พ.ย.","7 พ.ย."),"Day");
  $DataSet->AddSerie("Visitor");   
  $DataSet->SetAbsciseLabelSerie("Day");   
  $DataSet->SetYAxisName("Visitors");
  $DataSet->SetYAxisUnit("ip");
 
  // Initialise the graph   
  $Graph = new pChart(700,230);   
  $Graph->setFontProperties("Fonts/tahoma.ttf",8);   
  $Graph->setGraphArea(70,30,680,200);   
  $Graph->drawFilledRoundedRectangle(7,7,693,223,5,240,240,240);   
  $Graph->drawRoundedRectangle(5,5,695,225,5,230,230,230);   
  $Graph->drawGraphArea(255,255,255,TRUE);
  $Graph->drawScale($DataSet->GetData(),$DataSet->GetDataDescription(),SCALE_NORMAL,150,150,150,TRUE,0,2);   
  $Graph->drawGrid(4,TRUE,230,230,230,50);
 
  // Draw the 0 line   
  $Graph->setFontProperties("Fonts/tahoma.ttf",6);   
  $Graph->drawTreshold(0,143,55,72,TRUE,TRUE);   
 
  // Draw the line graph
  $Graph->drawLineGraph($DataSet->GetData(),$DataSet->GetDataDescription());   
  $Graph->drawPlotGraph($DataSet->GetData(),$DataSet->GetDataDescription(),3,2,255,255,255);   
 
  // Finish the graph   
  $Graph->setFontProperties("Fonts/tahoma.ttf",8);   
  $Graph->drawLegend(75,35,$DataSet->GetDataDescription(),255,255,255);   
  $Graph->setFontProperties("Fonts/tahoma.ttf",10);   
  $Graph->drawTitle(60,22,"Google Analytics",50,50,50,585);   
  $Graph->Stroke("example1.png");      
 ?>

คำอธิบาย

  include("pChart/pData.class");   
  include("pChart/pChart.class");

อินคลูดคลาส pchart เข้ามาใช้งานในโปรเจ็กเรา

  $DataSet = new pData;   
  $DataSet->AddPoint(array(1079,1151,1185,1226,1121,738,710),"Visitor");
  $DataSet->AddPoint(array("1 พ.ย.","2 พ.ย.","3 พ.ย.","4 พ.ย.","5 พ.ย.","6 พ.ย.","7 พ.ย."),"Day");

กำหนดข้อมูลที่ต้องการนำไปสร้างเป็นกราฟ ให้ชื่อ Visitor กับ Day
Visitor เก็บจำนวนคนเข้าเว็บตั้งแต่วันที่ 1 พ.ย. – 7 พ.ย.
Day เป็นตัวบอกว่าข้อมูล Visitor นั้นเป็นของวันใด และ Day นี้จะนำไปทำเป็นลาเบล เส้นแกน X
สังเกตุให้ดีขนาด array Visitor และ Day เท่ากัน 1079 เป็นของ 1 พ.ย. , 1151 เป็นของ 2 พ.ย.

  $DataSet->AddSerie("Visitor");

บอกคลาส pchart ว่า Visitor นั้นเราต้องการเอาไปแสดงเป็นเส้นกราฟ

  $DataSet->SetYAxisName("Visitors");
  $DataSet->SetYAxisUnit("ip");

พิมพ์คำว่า Visitors ip ออกมาในแกน Y เพื่อแสดงให้รู้ว่า ตัวเลขในแกน Y นั้นหมายถึงอะไร

  $Graph = new pChart(700,230);

สร้างกราฟขนาด 700*230 px

  $Graph->setFontProperties("Fonts/tahoma.ttf",8);   
  $Graph->setGraphArea(70,30,680,200);

ใช้ฟอนต์ tahoma ขนาด 8 พ้อย พิมพ์ตัวหนังสือต่างๆในกราฟ และ
กำหนดเนื้อกราฟ กั้นซ้าย 70 กั้นบน 30 ยาวไปสิ้นสุดที่จุด 680 และสูงสิ้นสุดที่จุด 200

กราฟนั้นมันจะประกอบไปด้วย พื้นที่ๆใช้สำหรับพิมพ์ลาเบลต่างๆ และพื้นที่ๆสำหรับพิมพ์เส้นกราฟ
ถ้าเรากำหนด เนื้อกราฟเป็น 0 ,0,700,230 ขนาดเท่ากับที่เรากำหนดในคำสั่ง pChart(700,230) พอดีเป๊ะ
ผลลัพธ์ที่ออกมาก็จะมีแต่เส้นกราฟ รายละเอียดไม่มีที่เหลือให้แสดง

  $Graph->setFontProperties("Fonts/tahoma.ttf",6);   
  $Graph->drawTreshold(0,143,55,72,TRUE,TRUE);

กำหนดตำแหน่งเส้นเป้าหมาย การแสดงผลจะเป็นเส้นประขึ้นมาในกราฟ
ถ้าสมมติว่าผมกำหนดไว้ในแต่ละเดือนว่าคนที่เข้าเว็บอย่างต่ำจะต้อง 400 เวลาทำกราฟเพื่อแสดงในที่ประชุมผมก็กำหนด
$Graph->drawTreshold( 400 ,143,55,72,TRUE,TRUE);
รู้แค่ตัวเลขตัวแรกก็พอนะครับ ตัวอื่นไม่ต้องสนใจว่ามีความหมายอะไร ก้อปแล้วใช้ได้เลย

  $Graph->drawTitle(60,22,"Google Analytics",50,50,50,585);

พิมพ์หัวกราฟเป็นคำว่า Google Analytics จะได้รู้ว่าเรากำลังแสดงอะไรกัน

  $Graph->Stroke("example1.png");

หลังจากกำหนดรายละเอียดทั้งหมดมาแล้วก็ถึงเวลา พลอตกราฟให้ออกมาทางเบราเซอร์
ในกรณีที่ท่านต้องการให้สร้างเป็นไฟล์ภาพกราฟไว้บนเซิฟเวอร์ ให้ใช้คำสั่ง
$Graph->Render(“example1.png”);
แทน เสร็จแล้วจะนำไปแนบอีเมล์ หรือทำอะไรต่อ ก็สุดแต่ท่านจะจินตนาการ เอาละครับ

ตัวอย่างกราฟ 2 เส้น

เปลี่ยนแปลงแค่นิดหน่อยเอง

  $DataSet->AddPoint(array(1079,1151,1185,1226,1121,738,710),"Visitor");
  $DataSet->AddPoint(array(1000,800,950,623,540,675,451),"Returner");
  $DataSet->AddPoint(array("1 พ.ย.","2 พ.ย.","3 พ.ย.","4 พ.ย.","5 พ.ย.","6 พ.ย.","7 พ.ย."),"Day");
  $DataSet->AddSerie("Visitor");   
  $DataSet->AddSerie("Returner");

โค้ดกราฟ 2 เส้น

<?php
  // Standard inclusions      
  include("pChart/pData.class");   
  include("pChart/pChart.class");   
 
  // Dataset definition    
  $DataSet = new pData;   
  $DataSet->AddPoint(array(1079,1151,1185,1226,1121,738,710),"Visitor");
  $DataSet->AddPoint(array(1000,800,950,623,540,675,451),"Returner");
  $DataSet->AddPoint(array("1 พ.ย.","2 พ.ย.","3 พ.ย.","4 พ.ย.","5 พ.ย.","6 พ.ย.","7 พ.ย."),"Day");
  $DataSet->AddSerie("Visitor");   
  $DataSet->AddSerie("Returner");   
  $DataSet->SetAbsciseLabelSerie("Day");   
  $DataSet->SetYAxisName("Visitors");
  $DataSet->SetYAxisUnit("ip");
 
  // Initialise the graph   
  $Graph = new pChart(700,230);   
  $Graph->setFontProperties("Fonts/tahoma.ttf",8);   
  $Graph->setGraphArea(70,30,680,200);   
  $Graph->drawFilledRoundedRectangle(7,7,693,223,5,240,240,240);   
  $Graph->drawRoundedRectangle(5,5,695,225,5,230,230,230);   
  $Graph->drawGraphArea(255,255,255,TRUE);
  $Graph->drawScale($DataSet->GetData(),$DataSet->GetDataDescription(),SCALE_NORMAL,150,150,150,TRUE,0,2);   
  $Graph->drawGrid(4,TRUE,230,230,230,50);
 
  // Draw the 0 line   
  $Graph->setFontProperties("Fonts/tahoma.ttf",6);   
  $Graph->drawTreshold(0,143,55,72,TRUE,TRUE);   
 
  // Draw the line graph
  $Graph->drawLineGraph($DataSet->GetData(),$DataSet->GetDataDescription());   
  $Graph->drawPlotGraph($DataSet->GetData(),$DataSet->GetDataDescription(),3,2,255,255,255);   
 
  // Finish the graph   
  $Graph->setFontProperties("Fonts/tahoma.ttf",8);   
  $Graph->drawLegend(75,35,$DataSet->GetDataDescription(),255,255,255);   
  $Graph->setFontProperties("Fonts/tahoma.ttf",10);   
  $Graph->drawTitle(60,22,"Google Analytics",50,50,50,585);   
  $Graph->Stroke("example1.png");      
 ?>

pchart-02

pChart
Avatar

วัชรเมธน์ ชิษณุคุปต์ ศรีเนธิโรทัย

Programmer, Blogger

ชีวิตมันคือการเดินทางเพื่อค้นหาอะไรบางอย่าง และเพื่อค้นพบอะไรบางอย่าง สิ่งที่รู้แล้วจะได้บอกกล่าวให้คนข้างหลังได้ฟัง เพื่อเดินลุยเข้าไปในพงหนามอย่างเตรียมใจไว้แล้วว่าอาจจะต้องเจ็บ