Read 136 times | Created 2013-08-14 04:50:41 | Updated 2013-08-14 08:05:04 | | |

 

<?php 
/*
-- 
-- Database: `test` 
-- 
-- Table structure for table `tbl_data` 
-- 
DROP TABLE IF EXISTS `tbl_data`; 
CREATE TABLE IF NOT EXISTS `tbl_data` ( 
  `id_data` int(11) unsigned NOT NULL AUTO_INCREMENT, 
  `date` DATE NOT NULL, 
  `dep` VARCHAR(15) NOT NULL,
  `time` int(11) unsigned NOT NULL,
  PRIMARY KEY (`id_data`) 
) ENGINE=MyISAM  DEFAULT CHARSET=utf8; 
-- 
-- Dumping data for table `tbl_data`
INSERT INTO `tbl_data`(`date`,`dep`,`time`)
VALUES
('2013-07-01','purchasing1',123),
('2013-07-02','purchasing1',120),
('2013-07-03','purchasing1',90),
('2013-07-06','purchasing1',90),
('2013-07-15','purchasing1',100),
('2013-07-22','purchasing1',90),
('2013-07-23','purchasing1',900),
('2013-07-24','purchasing1',90),
('2013-07-24','purchasing2',90),
('2013-07-24','purchasing2',900),
('2013-07-24','purchasing1',900),
('2013-07-24','purchasing1',900),
('2013-07-25','purchasing1',100),
('2013-07-25','purchasing2',100),
('2013-07-25','purchasing1',100);
*/
$dbhost='localhost';
$dbuser='root';
$dbpass='';
$dbname='test';
$db=new mysqli($dbhost,$dbuser,$dbpass,$dbname);
$sql="SELECT 
        date, 
        SUM(IF(dep='purchasing1',time,0)) AS data1, 
        SUM(IF(dep='purchasing2',time,0)) AS data2
      FROM 
        tbl_data
      GROUP BY 
        date";
$result=$db->query($sql);
$category=array();
$data1=array();
$data2=array();
while($record=$result->fetch_object()){
  $category[]=$record->date;
  $data1[]=$record->data1;
  $data2[]=$record->data2;
}
?>
<!DOCTYPE html>
<html>
  <head>
    <title>Bar Chart</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script type="text/javascript">
    jQuery.noConflict();
    </script>
    <script type="text/javascript">
      (function($){ // encapsulate jQuery
        $(function () {
          $('#container').highcharts({
            chart: {
              type: 'column'
            },
            title: {
              text: 'Purchasing Data'
            },
            subtitle: {
              text: 'Source: fb phpindonesia'
            },
            xAxis: {
            categories: [<?php echo "'".implode("','",$category)."'";?>]
            },
            yAxis: {
              min: 0,
              title: {
                text: 'Times'
              }
            },
            tooltip: {
              headerFormat:'<span style="font-size:10px">{point.key}</span><table>',
              pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                           '<td style="padding:0"><b>{point.y:.1f}</b></td></tr>',
              footerFormat: '</table>',
              shared: true,
              useHTML: true
            },
            plotOptions: {
              column: {
                pointPadding: 0.2,
                borderWidth: 0
              }
            },
            series: [{
                name: 'Purchasing 1',
                data: [<?php echo implode(",",$data1);?>]
        
            }, {
                name: 'Purchasing 2',
                data: [<?php echo implode(",",$data2);?>]
            }]
          });
        });
    })(jQuery);
    </script>
  </head>
  <body>
	  <div style="margin: 5px">
	    <script src="http://code.highcharts.com/highcharts.js"></script>
      <script src="http://code.highcharts.com/modules/exporting.js"></script>
      <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
	  </div>
  </body>
</html>