Hallo! Selamat Datang di Marketplace produk digital, Freelancer terbaik di indonesia (67505 Members, 783 Products, 5291 Topic, 12956 Comments)

Membuat Grafik HighChart di Podes copas dari SIASELAH blank

Dibuat
Login Terakhir 2 Tahun lalu,
Telah Dilihat 1430 Kali
Dave Ragnarok Mengatakan : Sultan Account
  1. Assalamualaikum Warahmatullahi Wabarakatuh...
  2.  
  3. Mohon bantuannya Mas Robby & teman-teman,.
  4. Saya lagi mencoba membuat Grafik HightChart di Podes.
  5. Data HighChartnya saya ambil dari SIASELAH, data dari SIASELAH sudah saya copas dan ditempatkan di Podes.
  6. dari Data:
  7. Folder Plugin & Source.
  8.  
  9. saya mengikuti saran dari forum berikut:
  10. https://members.phpmu.com/forum/read/bagaimana-membuat-grafik-komparasi-dengan-highchart-pada-adminlte
  11.  
  12.  
  13. Berikut Source dari HighChart SIASELAH dan diedit di Podes:
  14.  
  15. <script type="text/javascript" src="plugins/jQuery/jquery.min.js"></script>
  16. <script type="text/javascript">
  17. $(function () {
  18. $('#containera').highcharts({
  19. data: {
  20. table: 'datatable'
  21. },
  22. chart: {
  23. type: 'column'
  24. },
  25. title: {
  26. text: ''
  27. },
  28. yAxis: {
  29. allowDecimals: false,
  30. title: {
  31. text: ''
  32. }
  33. },
  34. tooltip: {
  35. formatter: function () {
  36. return '<b>Kunjungan ' + this.series.name + '</b><br/>' +
  37. 'Ada ' + this.point.y + ' Kali';
  38. }
  39. }
  40. });
  41. });
  42. </script>
  43.  
  44. <div class="box box-success">
  45. <div class="box-header">
  46. <i class="fa fa-th-list"></i>
  47. <h3 class="box-title">Data Penduduk</h3>
  48. <div class="box-tools pull-right">
  49. <button class="btn btn-box-tool" data-widget="collapse" data-toggle="tooltip" title="Collapse"><i class="fa fa-minus"></i></button>
  50. <button class="btn btn-box-tool" data-widget="remove" data-toggle="tooltip" title="Remove"><i class="fa fa-times"></i></button>
  51. </div>
  52. </div>
  53.  
  54. <div class="box-body chat" id="chat-box">
  55. <script src="plugins/highchart/highcharts.js"></script>
  56. <script src="plugins/highchart/modules/data.js"></script>
  57. <script src="plugins/highchart/modules/exporting.js"></script>
  58. <div id="containera" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
  59.  
  60. <table id="datatable" style='display:none'>
  61. <thead>
  62. <tr>
  63. <th>Laki - Laki</th>
  64. <th>Perempuan</th>
  65. </tr>
  66. </thead>
  67. <tbody>
  68. <?php
  69. $sqla = ("SELECT * FROM data_penduduk_detail ORDER BY id_data_penduduk_detail DESC");
  70. $grafik = mysql_query($sqla);
  71. while ($r = mysql_fetch_array($grafik)){
  72. $laki = mysql_num_rows(mysql_query("SELECT * FROM data_penduduk_detail where jenis_kelamin='laki-laki'"));
  73. $perempuan = mysql_num_rows(mysql_query("SELECT * FROM data_penduduk_detail where jenis_kelamin='perempuan'"));
  74. echo "<tr>
  75. <td>$laki</td>
  76. <td>$perempuan</td>
  77. </tr>";
  78. }
  79. ?>
  80. </tbody>
  81. </table>
  82. </div><!-- /.chat -->
  83. </div><!-- /.box (chat box) -->
  84.  
  85.  
  86. Akan tetapi datanya tidak tampil, screenshoot nya saya lampirkan.
  87. Mohon bantuannya,. Terimakasih.
Ada 2 File Kiriman :
1. datapenduduk.png (27 KB)
2. db.png (163 KB)

Ada 3 Jawaban

Dave Ragnarok
commented on 12 Mei 2019 08:33:00
  1. Assalamualaikum,..
  2.  
  3. Setelah saya perbaiki script-nya, seperti berikut:
  4.  
  5. <article class="article-container" itemscope itemtype="http://schema.org/Article">
  6. <div class="article-content blog-page">
  7. <script type="text/javascript" src="view/phpmu/plugins/jQuery/jquery.min.js"></script>
  8. <script type="text/javascript">
  9. $(function () {
  10. $('#container').highcharts({
  11. data: {
  12. table: 'datatable'
  13. },
  14. chart: {
  15. type: 'column'
  16. },
  17. title: {
  18. text: ''
  19. },
  20. yAxis: {
  21. allowDecimals: true,
  22. title: {
  23. text: ''
  24. }
  25. },
  26. tooltip: {
  27. formatter: function () {
  28. return '<b>Data ' + this.series.name + '</b><br/>' +
  29. 'Ada ' + this.point.y + ' Orang';
  30. }
  31. }
  32. });
  33. });
  34. </script>
  35.  
  36. <div>
  37. <a href='data-penduduk.html' class='btn btn-warning btn-sm pull-right'>Kembali</a>
  38. <br/>
  39. </div>
  40.  
  41. <div class="box box-success">
  42. <h3 class="box-title">Data Penduduk</h3>
  43.  
  44. <div class="box-body chat" id="chat-box">
  45. <script src="view/phpmu/plugins/highchart/js/highcharts.js"></script>
  46. <script src="view/phpmu/plugins/highchart/js/modules/data.js"></script>
  47. <script src="view/phpmu/plugins/highchart/js/modules/exporting.js"></script>
  48. <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
  49.  
  50. <table id="datatable" style='display:none'>
  51. <thead>
  52. <tr>
  53. <th>Laki - Laki</th>
  54. <th>Perempuan</th>
  55. </tr>
  56. </thead>
  57. <tbody>
  58. <?php
  59. $grafik = mysql_query("SELECT * FROM data_penduduk_detail GROUP BY id_data_penduduk_detail ORDER BY id_data_penduduk_detail DESC LIMIT 5");
  60. while ($r = mysql_fetch_array($grafik)){
  61. $ale = tgl_grafik($r[id_data_penduduk_detail]);
  62. $laki = mysql_num_rows(mysql_query("SELECT * FROM data_penduduk_detail where jenis_kelamin='laki-laki' AND id_data_penduduk_detail='$r[id_data_penduduk_detail]'"));
  63. $perempuan = mysql_num_rows(mysql_query("SELECT * FROM data_penduduk_detail where jenis_kelamin='perempuan' AND id_data_penduduk_detail='$r[id_data_penduduk_detail]'"));
  64. echo "<tr>
  65. <th>$ale</th>
  66. <td>$laki</td>
  67. <td>$perempuan</td>
  68. </tr>";
  69. }
  70. ?>
  71. </tbody>
  72. </table>
  73. </div><!-- /.chat -->
  74. </div><!-- /.box (chat box) -->
  75. </div>
  76. </article>
  77.  
  78.  
  79. Tampilan dari HighChart sudah oke. Tetapi data di Grafik-nya tidak muncul. Ini bagaimana ya Mas Robby & teman-teman?
  80. Mohon bantuannya,. Terimakasih
Terdapat 2 File dilampirkan :
1. db3.png (163 KB)
2. masalah2.png (8 KB)
Bukhori Muslim
commented on 13 Mei 2019 11:31:19
  1. Assalamualaikum,.. sepertinya error di function tgl_grafik(),
  2. masih belum ada pada podes, coba tambahkan pada file koneksi.php function berikut :
  3. function tgl_grafik($tgl){
  4. $tanggal = substr($tgl,8,2);
  5. $bulan = getBulan(substr($tgl,5,2));
  6. $tahun = substr($tgl,0,4);
  7. return $tanggal.'_'.$bulan;
  8. }
Dave Ragnarok
commented on 14 Mei 2019 00:19:58
  1. Assalamualaikum,...
  2. saya baru nemu jawabannya, ternyata script dari <script> ....... </script> , tidak boleh diisi didalam <article class="article-container clearfix" itemscope itemtype="http://schema.org/Article"> .
  3.  
  4. Terimakasih untuk bantuannya mas.
  5. Salam
Maaf, Untuk Memberikan Komentar Anda Harus Login !!!