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

Bagaimana membuat Charts GAUGE dengan HighCharts?

Dibuat
Login Terakhir 5 Bulan lalu,
Telah Dilihat 3018 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

Online