Advertisement
cdsatrian

categories+series highchart

Oct 2nd, 2013
168
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
PHP 2.07 KB | None | 0 0
  1. <?php  
  2. $koneksi=mysql_connect('localhost','root','');
  3. mysql_select_db('toy_store',$koneksi);
  4. $sql=mysql_query("SELECT nama_band,vote FROM tb_voting");
  5. $series=array();
  6. $categories=array();
  7. while($record=mysql_fetch_array($sql)){
  8.   $series[]="{name: '".$record['nama_band']."',data:".$record['vote']."}";
  9.   $categories[]=$record['nama_band'];
  10. }
  11. ?>
  12. <!DOCTYPE HTML>
  13. <html>
  14.   <head>
  15.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  16.     <title>Highcharts Example</title>
  17.     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
  18.     <script type="text/javascript">
  19.     $(function () {
  20.         $('#container').highcharts({
  21.             chart: {
  22.                 type: 'column'
  23.             },
  24.             title: {
  25.                 text: 'Voting'
  26.             },
  27.             subtitle: {
  28.                 text: 'Source: WorldClimate.com'
  29.             },
  30.             xAxis: {
  31.                 categories: ['<?php echo implode("','",$categories);?>']
  32.             },
  33.             yAxis: {
  34.                 min: 0,
  35.                 title: {
  36.                     text: 'Rainfall (mm)'
  37.                 }
  38.             },
  39.             tooltip: {
  40.                 headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
  41.                 pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
  42.                     '<td style="padding:0"><b>{point.y:.1f} Vote</b></td></tr>',
  43.                 footerFormat: '</table>',
  44.                 shared: true,
  45.                 useHTML: true
  46.             },
  47.             plotOptions: {
  48.                 column: {
  49.                     pointPadding: 0.2,
  50.                     borderWidth: 0
  51.                 }
  52.             },
  53.             series: [<?php echo implode(",",$series);?>]
  54.         });
  55.     });
  56.     </script>
  57.   </head>
  58.   <body>
  59.     <script src="js/highcharts.js"></script>
  60.     <script src="js/modules/exporting.js"></script>
  61.     <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
  62.   </body>
  63. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement