ดึงข้อมูลจาก MySQL มาสร้างกราฟด้วย highcharts
8 มี.ค. 2016 , 26,197 Views , หมวดหมู่ jQuery,JavaScript,Ajax MySQL PHP ทุกหมวดหมู่ โค๊ดดิ้ง , ป้ายกำกับ:highcharts, mysql, php
โดยที่มีเงื่อนไขว่า ฟิวด์สุดท้ายที่ Select มาต้องเป็นตัวเลข
กราฟแบบ Pie
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 |
<?php $query = "SELECT industry,count(industry) FROM company GROUP BY industry "; $res_c = $mysqli->query($query); if (!$res_c) { die('<p><strong style="color:#FF0000">!! Invalid query:</strong> ' . $mysqli->error.'</p>'); } ?> <script src="//code.jquery.com/jquery-1.12.0.min.js"></script> <script src="https://code.highcharts.com/highcharts.js"></script> <script type="text/javascript"> $(function () { $('#piechart').highcharts({ chart: { plotBackgroundColor: null, plotBorderWidth: null, plotShadow: false, type: 'pie' }, title: { text: 'กำหนด title ของกราฟ' }, tooltip: { pointFormat: '{series.name}: <b>{point.y:,.0f} ({point.percentage:.1f}%)</b>' }, plotOptions: { pie: { allowPointSelect: true, cursor: 'pointer', dataLabels: { enabled: true, format: '<b>{point.name}</b>: {point.y:,.0f} (<strong>{point.percentage:.1f} %</strong>)', style: { color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black' } } } }, credits: { enabled: false }, series: [{ name: "Total", colorByPoint: true, data: [ <?php $c_field = $res_c->field_count-1; $c=0; while($row = $res_c->fetch_array(MYSQLI_NUM)){ $c++; ?> <?php if($c>1){ ?>,<?php } ?> { name: "<?php echo htmlspecialchars(addslashes(str_replace("\t","",str_replace("\n","",str_replace("\r","",$row[0]))))); ?>", y: <?php echo $row[$c_field]; ?> } <?php } ?> ] }] }); }); </script> <!--แสดงกราฟ--> <div id="piechart"></div> |
กราฟแบบ Bar
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 |
<?php $query = "SELECT industry,count(industry) FROM company GROUP BY industry "; $res_c = $mysqli->query($query); if (!$res_c) { die('<p><strong style="color:#FF0000">!! Invalid query:</strong> ' . $mysqli->error.'</p>'); } ?> <script src="//code.jquery.com/jquery-1.12.0.min.js"></script> <script src="https://code.highcharts.com/highcharts.js"></script> <script type="text/javascript"> $(function () { $('#barchart').highcharts({ chart: { type: 'column' }, title: { text: 'กำหนด title ของกราฟ' }, /* subtitle: { text: '' },*/ xAxis: { categories: [ <?php $c_field = $res_c->field_count-1; $c=0; while($row = $res_c->fetch_array(MYSQLI_NUM)){ $c++; ?> <?php if($c>1){ ?>,<?php } $data[] = $row[$c_field]; ?> '<?php echo htmlspecialchars(addslashes(str_replace("\t","",str_replace("\n","",str_replace("\r","",$row[0]))))); ?>' <?php } ?> ], crosshair: true }, yAxis: { min: 0, title: { text: 'Values' } }, 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:,.0f} </b></td></tr>', footerFormat: '</table>', shared: true, useHTML: true }, plotOptions: { column: { pointPadding: 0.2, borderWidth: 0, dataLabels: { enabled: true } } }, credits: { enabled: false }, series: [{ name: 'Values', data: [<?php echo join(',',$data); ?>] }] }); }); </script> <!--แสดงกราฟ--> <div id="barchart"></div> |
ตัวอย่างการแสดงผล
See the Pen heightchart by Suttipong Choysakda (@nathanbc46) on CodePen.
ดูการใช้งานเพิ่มเติม http://www.highcharts.com/
Related Posts
ป้ายกำกับ:highcharts, mysql, php
