Hallo! Selamat Datang di Marketplace produk digital, Freelancer terbaik di indonesia (69170 Members, 793 Products, 4716 Topic, 13114 Comments)

Membuat Grafik HighChart di Podes copas dari SIASELAH blank

Dibuat
Login Terakhir 17 Hari lalu,
Telah Dilihat 1599 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 !!!

Online