Assalamualaikum Warahmatullahi Wabarakatuh... Bang Robby dan teman-teman semua.. Saya sedang buat diagram interaktif dan kebetulan ada contoh script dibawah ini dan hasilnya terlampir. <html><head> <title> Membandingkan Data menggunakan Highcharts Dengan Kolom Chart </title> </head><body> <style> .chart-filter{ border-bottom: #CCC 1px solid;padding: 20px;} .btn-input {background: #1a75ff;color: #FFF;border: 0;padding: 8px 20px;border-radius: 4px;} .chart-item-title {padding:25px 0px;} .chart-item-option {margin-left: 20px;} </style> <div class="chart-filter"> <div class="chart-item-title"> <input type="checkbox" name="countries" value="Anggrek" checked /> Anggrek <input type="checkbox" name="countries" value="Bougenvile" class="chart-item-option" checked /> Bougenvile <input type="checkbox" name="countries" value="Cempaka" class="chart-item-option"/> Cempaka <input type="checkbox" name="countries" value="Dahlia" class="chart-item-option" /> Dahlia <input type="checkbox" name="countries" value="Flamboyan" class="chart-item-option"/> Flamboyan <input type="checkbox" name="countries" value="Gardenia" class="chart-item-option"/> Gardenia </div> <input type="button" id="compare" value="Lihat Data" class="btn-input" /> </div> <div id="chart"></div> </body> </html> <script src="//code.jquery.com/jquery-1.10.2.js"></script> <script src="https://code.highcharts.com/highcharts.js"></script> <script> $(function () { $(document).ready(function() { //Pilihan Default var options = { chart: { renderTo: 'chart', type: 'line', height: 500, width:850 }, title: { text: 'Contoh Grafik untuk Benchmarking ' }, xAxis: { categories: ['JAN', 'FEB', 'MAR', 'APR', 'MEI', 'JUN','JUL', 'AGT', 'SEP', 'OKT', 'NOV', 'DES' ], title: { text: 'BULAN' } }, yAxis: { allowDecimals: true, title: { text: 'CAPAIAN ( % )', align: 'middle' } }, plotOptions: { line: { dataLabels: { enabled: true } } }, series: [{},{},{},{},{},{}] }; // Pada event klik untuk membandingkan data $("#compare").on("click",function(){ var countries = ["Anggrek","Bougenvile","Cempaka","Dahlia","Flamboyan","Gardenia"]; var data = [[45,50,54,45,50,54,80,23,15,34,90,84], [41,76,92,34,45,50,31,55,45,20,35,54], [80,73,45,76,92,45,50,54,55,45,50,54], [90,83,75,76,92,45,90,94,55,65,85,95], [45,66,97,65,85,90,54,75,74,80,75,54], [70,73,75,76,72,75,70,78,75,75,70,74]]; var color = ["#10c0d2","#f1e019","#ff3333","#ccc0d0","#000","#336600"]; var selected_countries,j; // Hapus data sebelumnya dan reset data yang series for (i=0;i<data.length;i++) { options.series[i].name = ""; options.series[i].data = ""; options.series[i].color = ""; } // Data Intializeseries berdasarkan negara yang dipilih var i = 0; $ ("input[name='countries']:checked").each(function() { selected_countries = $(this).val(); j = jQuery.inArray(selected_countries,countries) if(j >= 0){ options.series[i].name = countries[j]; options.series[i].data = data[j]; options.series[i].color = color[j]; i++; } }); // Menggambar grafik dengan pilihan var chart = new Highcharts.Chart(options); // legenda layar hanya untuk data terlihat. var item; for (k=i;k<=data.length;k++) { item= chart.series[k]; if(item) { item.options.showInLegend = false; item.legendItem = null; chart.legend.destroyItem(item); chart.legend.render(); } } }); }); }); </script> Data akan saya ambil dari data mysql.Dimana saya harus meletakkan script SELECT nya SQL ya.. Terima kasih atas bantuannya.
Ada 1 File Kiriman : 1. chart.png (202 KB)
|
