Oke coba saya pelanari mas Robby.. Terima kasih... Tetapi setelah buka link www.highcharts.com, saya tertarik juga dengan grafik model GAUGE.. Saya coba terapkan juga : <script type="text/javascript" src="assets/plugins/jQuery/jquery.min.js"></script> <script type="text/javascript"> $(function () { //Highcharts.chart('container99', { $('#container99').highcharts({ data: { table: 'datatable1' }, chart: { type: 'gauge', plotBackgroundColor: null, plotBackgroundImage: null, plotBorderWidth: 0, plotShadow: false }, title: { text: 'Speedometer' }, pane: { startAngle: -150, endAngle: 150, background: [{ backgroundColor: { linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 }, stops: [ [0, '#FFF'], [1, '#333'] ] }, borderWidth: 0, outerRadius: '109%' }, { backgroundColor: { linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 }, stops: [ [0, '#333'], [1, '#FFF'] ] }, borderWidth: 1, outerRadius: '107%' }, { // default background }, { backgroundColor: '#DDD', borderWidth: 0, outerRadius: '105%', innerRadius: '103%' }] }, // the value axis yAxis: { min: 0, max: 200, minorTickInterval: 'auto', minorTickWidth: 1, minorTickLength: 10, minorTickPosition: 'inside', minorTickColor: '#666', tickPixelInterval: 30, tickWidth: 2, tickPosition: 'inside', tickLength: 10, tickColor: '#666', labels: { step: 2, rotation: 'auto' }, title: { text: 'km/h' }, plotBands: [{ from: 0, to: 120, color: '#55BF3B' // green }, { from: 120, to: 160, color: '#DDDF0D' // yellow }, { from: 160, to: 200, color: '#DF5353' // red }] }, series: [{ name: 'Speed', data: [80], tooltip: { valueSuffix: ' km/h' } }] }, // Add some life function (chart) { if (!chart.renderer.forExport) { setInterval(function () { var point = chart.series[0].points[0], newVal, inc = Math.round((Math.random() - 0.5) * 20); newVal = point.y + inc; if (newVal < 0 || newVal > 200) { newVal = point.y - inc; } point.update(newVal); }, 3000); } }); }); </script> <div class="box box-primary"> <div class="box-header"> <h3 class="box-title">Grafik Penjualan</h3> <div class="box-tools pull-right"> <button class="btn btn-box-tool" data-widget="collapse" data-toggle="tooltip" title="Collapse"><i class="fa fa-minus"></i></button> <button class="btn btn-box-tool" data-widget="remove" data-toggle="tooltip" title="Remove"><i class="fa fa-times"></i></button> </div> </div> <div class="box-body chat" id="chat-box"> <div id="container99" style="min-width: 310px; min-height: 340px; margin: 0 auto"></div> <table id="datatable1" style='display:none'> <thead> <tr> <th></th> <th>Regulasi</th> </tr> </thead> <tbody> <?php //------------dataku-----------// ?> </tbody> </table> </div><!-- /.chat --> </div><!-- /.box (chat box) --> Gak berhasil... Bisa bantu contoh nya mas.. Terima kasih
|