Hallo! Selamat Datang di Marketplace produk digital, Freelancer terbaik di indonesia (69106 Members, 786 Products, 4716 Topic, 13113 Comments)

Bagaimana membuat grafik komparasi dengan Highchart pada AdminLTE?

Dibuat
Login Terakhir 5 Bulan lalu,
Telah Dilihat 5555 Kali
Yakobus sutejo Mengatakan : Sultan Account
  1. Selamat pagi bang Robby..
  2. Selamat pagi teman-teman...
  3.  
  4. Saya sedang membuat tampilan Dashboard dengan AdminLTE berupa grafik/chart dengan Highchart.
  5. Untuk data tunggal, misalnya data laporan bulanan sudah berhasil..
  6.  
  7. Saya pengin membandingkan 2 data yaitu data standar dan data capaian, misalnya sbb :
  8.  
  9. -------------------------------------------------------------------------------------------------------
  10. Item Jan Feb Mar Apr Mei Jun Jul Agt Sept Okt Nov Des
  11. -------------------------------------------------------------------------------------------------------
  12. Standar 80% 80% 80% 80% 80% 80% 80% 80% 80% 80% 80% 80%
  13. Capaian 80% 76% 75% 65% 80% 85% 80% 76% 75% 65% 80% 85%
  14. ------------------------------------------------------------------------------------------------------
  15.  
  16. Jadi data standarnya adalah selalu sama, tetapi data capaian fluktuatif.
  17.  
  18. Bagaimana kodenya ya?
  19. Saya sedang utak-atik dari script grafik.php yang ada di Swarakalibata 3.4, masih bingung penerapannya...
  20.  
  21. Terima kasih
  22.  

Ada 3 Jawaban

PHPMU.COM Support
commented on 09 Jan 2018 08:20:01
  1. Assalam, disini sudah ada dokumentasinya mas :
  2. https://www.highcharts.com/demo/column-basic
  3.  
  4. atau juga bisa copas bulat2 script grafik dari SIASELAH,.. :)
Yakobus sutejo
commented on 09 Jan 2018 08:53:14
  1. Oke coba saya pelanari mas Robby..
  2. Terima kasih...
  3.  
  4. Tetapi setelah buka link www.highcharts.com, saya tertarik juga dengan grafik model GAUGE..
  5. Saya coba terapkan juga :
  6.  
  7. <script type="text/javascript" src="assets/plugins/jQuery/jquery.min.js"></script>
  8. <script type="text/javascript">
  9. $(function () {
  10. //Highcharts.chart('container99', {
  11. $('#container99').highcharts({
  12. data: {
  13. table: 'datatable1'
  14. },
  15. chart: {
  16. type: 'gauge',
  17. plotBackgroundColor: null,
  18. plotBackgroundImage: null,
  19. plotBorderWidth: 0,
  20. plotShadow: false
  21. },
  22.  
  23. title: {
  24. text: 'Speedometer'
  25. },
  26.  
  27. pane: {
  28. startAngle: -150,
  29. endAngle: 150,
  30. background: [{
  31. backgroundColor: {
  32. linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
  33. stops: [
  34. [0, '#FFF'],
  35. [1, '#333']
  36. ]
  37. },
  38. borderWidth: 0,
  39. outerRadius: '109%'
  40. }, {
  41. backgroundColor: {
  42. linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
  43. stops: [
  44. [0, '#333'],
  45. [1, '#FFF']
  46. ]
  47. },
  48. borderWidth: 1,
  49. outerRadius: '107%'
  50. }, {
  51. // default background
  52. }, {
  53. backgroundColor: '#DDD',
  54. borderWidth: 0,
  55. outerRadius: '105%',
  56. innerRadius: '103%'
  57. }]
  58. },
  59.  
  60. // the value axis
  61. yAxis: {
  62. min: 0,
  63. max: 200,
  64.  
  65. minorTickInterval: 'auto',
  66. minorTickWidth: 1,
  67. minorTickLength: 10,
  68. minorTickPosition: 'inside',
  69. minorTickColor: '#666',
  70.  
  71. tickPixelInterval: 30,
  72. tickWidth: 2,
  73. tickPosition: 'inside',
  74. tickLength: 10,
  75. tickColor: '#666',
  76. labels: {
  77. step: 2,
  78. rotation: 'auto'
  79. },
  80. title: {
  81. text: 'km/h'
  82. },
  83. plotBands: [{
  84. from: 0,
  85. to: 120,
  86. color: '#55BF3B' // green
  87. }, {
  88. from: 120,
  89. to: 160,
  90. color: '#DDDF0D' // yellow
  91. }, {
  92. from: 160,
  93. to: 200,
  94. color: '#DF5353' // red
  95. }]
  96. },
  97.  
  98. series: [{
  99. name: 'Speed',
  100. data: [80],
  101. tooltip: {
  102. valueSuffix: ' km/h'
  103. }
  104. }]
  105.  
  106. },
  107. // Add some life
  108. function (chart) {
  109. if (!chart.renderer.forExport) {
  110. setInterval(function () {
  111. var point = chart.series[0].points[0],
  112. newVal,
  113. inc = Math.round((Math.random() - 0.5) * 20);
  114.  
  115. newVal = point.y + inc;
  116. if (newVal < 0 || newVal > 200) {
  117. newVal = point.y - inc;
  118. }
  119.  
  120. point.update(newVal);
  121.  
  122. }, 3000);
  123. }
  124. });
  125. });
  126. </script>
  127.  
  128.  
  129. <div class="box box-primary">
  130. <div class="box-header">
  131. <h3 class="box-title">Grafik Penjualan</h3>
  132. <div class="box-tools pull-right">
  133. <button class="btn btn-box-tool" data-widget="collapse" data-toggle="tooltip" title="Collapse"><i class="fa fa-minus"></i></button>
  134. <button class="btn btn-box-tool" data-widget="remove" data-toggle="tooltip" title="Remove"><i class="fa fa-times"></i></button>
  135. </div>
  136. </div>
  137.  
  138. <div class="box-body chat" id="chat-box">
  139. <div id="container99" style="min-width: 310px; min-height: 340px; margin: 0 auto"></div>
  140. <table id="datatable1" style='display:none'>
  141. <thead>
  142. <tr>
  143. <th></th>
  144. <th>Regulasi</th>
  145. </tr>
  146. </thead>
  147. <tbody>
  148. <?php
  149. //------------dataku-----------//
  150. ?>
  151. </tbody>
  152. </table>
  153. </div><!-- /.chat -->
  154. </div><!-- /.box (chat box) -->
  155.  
  156. Gak berhasil...
  157. Bisa bantu contoh nya mas..
  158. Terima kasih
Yakobus sutejo
commented on 10 Jan 2018 11:38:25
  1. Terima kasih mas Robby..
  2. Sudah berhasil grafiknya ....
  3.  
  4. Yang model GAUGE / SPIDOMETER, masih butuh pencerahan...
  5.  
Terdapat 1 File dilampirkan :
1. chart.jpeg (59 KB)
Maaf, Untuk Memberikan Komentar Anda Harus Login !!!

Online