สร้างการฟบนเว็บแท่งด้วย jqplot

หากต้องการแสดงผลข้อมูลเป็นกราฟบนหน้าเว็บเราสามารถใช้  jqplot ซึ่งเป็น javascript library มาใช้ในการสร้างกราฟบนเว็บ ได้ดังนี้

1. เรียกใช้  javascript library และ style sheet

<link rel="stylesheet" type="text/css" href="http://projectsoft.biz/graph/jquery.jqplot.css" />
<script language="javascript" type="text/javascript" src="http://projectsoft.biz/graph/jquery.js"></script>
<script language="javascript" type="text/javascript" src="http://projectsoft.biz/graph/jquery.jqplot.js"></script>
<script language="javascript" type="text/javascript" src="http://projectsoft.biz/graph/plugins/jqplot.barRenderer.js"></script>
<script language="javascript" type="text/javascript" src="http://projectsoft.biz/graph/plugins/jqplot.categoryAxisRenderer.js"></script>


2. สร้างพื้นที่แสดงกราฟบนเว็บ

<div id="chart1" style="width:ใส่ความกว้างของกราฟpx; height:ใส่ความสูงของกราฟpx;"></div>


3. ใส่ code javascript render กราฟ


<script class="code" type="text/javascript">
  $(document).ready(function(){

    plot1 = $.jqplot('chart1', [ใส่ค่าของแต่ละ item], {
      seriesDefaults:{
        renderer:$.jqplot.BarRenderer,
        rendererOptions: {fillToZero: true}
      },
      series:[
        ใส่ชื่อ item
      ],
      legend: {
        show: true,
        placement: 'outsideGrid'
      },
      axes: {
        xaxis: {
          renderer: $.jqplot.CategoryAxisRenderer,
          ticks: ['ใส่ข้อความที่ต้องการให้แสดงในแกน X']
        },
        yaxis: {
          autoscale: true,
          tickOptions: {formatString: 'หน่วยของค่า item'}
        }
      }
    });
  });
  </script>

ตัวอย่างเช่น

<script class="code" type="text/javascript">
  $(document).ready(function(){

    plot1 = $.jqplot('chart1', [[200],[460],[260],[300]], {
      seriesDefaults:{
        renderer:$.jqplot.BarRenderer,
        rendererOptions: {fillToZero: true}
      },
      series:[
        {label:'มกราคม'},{label:'กมุภาพันธ์'},{label:'มีนาคม'},{label:'เมษายน'}
      ],
      legend: {
        show: true,
        placement: 'outsideGrid'
      },
      axes: {
        xaxis: {
          renderer: $.jqplot.CategoryAxisRenderer,
          ticks: ['เดือน']
        },
        yaxis: {
          autoscale: true,
          tickOptions: {formatString: '%d ล้านบาท'}
        }
      }
    });
  });
  </script>

ผลลัพธ์ที่ได้ คือ

รับทำโปรเจคนักศึกษา