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

Bagaimana membuat Charts GAUGE dengan HighCharts?

Dibuat
Login Terakhir 5 Bulan lalu,
Telah Dilihat 2555 Kali
Yakobus sutejo Mengatakan : Sultan Account 
  1. Assalamualaikum Warahmatullahi Wabarakatuh...
  2.  
  3. Selamat Malam mas Roby dan teman-teman semua,
  4. Tolong pencerahannya bagaimana membuat grafik GAUGE dengan HighCharts, database MySQL dan menampilkan container ya?
  5.  
  6. Saya lihat contoh yang ada di tutorial highcharts seperti ini:
  7. <html>
  8. <head>
  9. <meta charset="UTF-8" />
  10. <title>Highcharts ?? | ???(w3big.com)</title>
  11. <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
  12. <script src="http://code.highcharts.com/highcharts.js"></script>
  13. <script src="http://code.highcharts.com/highcharts-more.js"></script>  
  14. </head>
  15. <body>
  16. <div id="container" style="width: 550px; height: 400px; margin: 0 auto"></div>
  17. <script language="JavaScript">
  18. $(document).ready(function() {  
  19.    var chart = {      
  20.       type: 'gauge',
  21.       plotBackgroundColor: null,
  22.       plotBackgroundImage: null,
  23.       plotBorderWidth: 0,
  24.       plotShadow: false
  25.    };
  26.    var title = {
  27.       text: '???'   
  28.    };     
  29.  
  30.    var pane = {
  31.       startAngle: -150,
  32.       endAngle: 150,
  33.       background: [{
  34.          backgroundColor: {
  35.             linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
  36.             stops: [
  37.                [0, '#FFF'],
  38.                [1, '#333']
  39.             ]
  40.          },
  41.          borderWidth: 0,
  42.          outerRadius: '109%'
  43.       }, {
  44.          backgroundColor: {
  45.             linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
  46.             stops: [
  47.                [0, '#333'],
  48.                [1, '#FFF']
  49.             ]
  50.          },
  51.          borderWidth: 1,
  52.          outerRadius: '107%'
  53.      }, {
  54.          // default background
  55.      }, {
  56.          backgroundColor: '#DDD',
  57.          borderWidth: 0,
  58.          outerRadius: '105%',
  59.          innerRadius: '103%'
  60.      }]
  61.    };
  62.  
  63.    // the value axis
  64.    var yAxis = {
  65.       min: 0,
  66.       max: 200,
  67.  
  68.       minorTickInterval: 'auto',
  69.       minorTickWidth: 1,
  70.       minorTickLength: 10,
  71.       minorTickPosition: 'inside',
  72.       minorTickColor: '#666',
  73.  
  74.       tickPixelInterval: 30,
  75.       tickWidth: 2,
  76.       tickPosition: 'inside',
  77.       tickLength: 10,
  78.       tickColor: '#666',
  79.       labels: {
  80.          step: 2,
  81.          rotation: 'auto'
  82.       },
  83.       title: {
  84.          text: 'km/h'
  85.       },
  86.       plotBands: [{
  87.          from: 0,
  88.          to: 120,
  89.          color: '#55BF3B' // green
  90.       }, {
  91.          from: 120,
  92.          to: 160,
  93.          color: '#DDDF0D' // yellow
  94.       }, {
  95.          from: 160,
  96.          to: 200,
  97.          color: '#DF5353' // red
  98.       }]
  99.    };
  100.  
  101.    var series= [{
  102.         name: 'Speed',
  103.         data: [80],
  104.         tooltip: {
  105.            valueSuffix: ' km/h'
  106.         }
  107.    }];     
  108.  
  109.    var json = {};   
  110.    json.chart = chart; 
  111.    json.title = title;       
  112.    json.pane = pane; 
  113.    json.yAxis = yAxis; 
  114.    json.series = series;     
  115.  
  116.    // Add some life
  117.    var chartFunction = function (chart) {
  118.       if (!chart.renderer.forExport) {
  119.          setInterval(function () {
  120.          var point = chart.series[0].points[0], newVal, inc = Math.round((Math.random() - 0.5) * 20);
  121.          newVal = point.y + inc;
  122.          if (newVal < 0 || newVal > 200) {
  123.             newVal = point.y - inc;
  124.          }
  125.          point.update(newVal);
  126.          }, 3000);
  127.       }
  128.    };
  129.  
  130.    $('#container').highcharts(json,chartFunction);
  131. });
  132. </script>
  133. </body>
  134. </html>
  135.  
  136. Tampilan seperti gambar terlampir.
  137.  
  138. Bagaimana supaya saya dapat mengisi datanya dengan data yang dari tabel MySQL lalu tampilannya didalam container seperti contoh shart yang selama ini diberikan mas Roby...?
  139.  
  140. Terima kasih.
Ada 1 File Kiriman :
1. gauge.jpg (49 KB)
Maaf, Untuk Memberikan Komentar Anda Harus Login !!!

CV Asktech Indonesia

Cari Produk Digital, Freelancer Terbaik dan Terpercaya di Indonesia

CV Asktech Indonesia
Jl. Angkasa Puri, Perundam V, Tunggul Hitam
Padang 25176 - Indonesia

Telp./Fax. (0751) 461695
Phone/WA. +62-812-6777-1344
E-mail robby.prihandaya@gmail.com

Tentang Kami

Jam Layanan

  • Senin - Jum'at: 09:00 - 17:00 WIB
  • Sabtu - Minggu: 09:00 - 15:00 WIB

Knowledgebase