Postingan lainnya
Buku Ini Koding!
Baru!
Buku ini akan jadi teman perjalanan kamu belajar sampai dapat kerjaan di dunia programming!
Highcharts drilldown with html table
Siang gan ,.. mau tanya kalau ambil data highcharts tapi dari tabel html gimana ya ?
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<script src="https://code.highcharts.com/modules/drilldown.js"></script>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="<?php echo base_url(); ?>assets/jquery.tabletojson.min.js"></script>
<script src="<?php echo base_url(); ?>assets/jquery.tabletojson.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
<table id='example-table'>
<thead>
<tr>
<th>Name</th>
<th>y</th>
<th data-override="Score">drilldown</th></tr>
</thead>
<tbody>
<tr>
<td>Chrome</td>
<td>100</td>
<td>Chrome</td></tr>
<tr>
<td>Firefox</td>
<td>10.57</td>
<td>Firefox</td></tr>
<tr>
<td>Internet Explorer</td>
<td>7.23</td>
<td>Internet Explorer</td></tr>
</tbody>
</table>
<script type="text/javascript">
var dataAwal = [{name: "Chrome",y: 100,drilldown: "Chrome"},{name: "Firefox",y: 10.57,drilldown: "Firefox"},{name: "Internet Explorer",y: 7.23,drilldown: "Internet Explorer"}];
var dataSeries = [{name: "Chrome",id: "Chrome",data: [["v65.0",0.1],["v64.0",1.3],["v63.0",53.02],["v62.0",1.4],["v61.0", 0.88],["v60.0",0.56],["v59.0",0.45],["v58.0", 0.49],["v57.0",0.32],["v56.0",0.29],["v55.0", 0.79],["v47.0",0.11],["v43.0",0.17],["v29.0",0.26]]},{name: "Firefox",id: "Firefox",data: [["v65.0",0.1],["v64.0",1.3],["v63.0",53.02],["v62.0",1.4],["v61.0", 0.88],["v60.0",0.56],["v59.0",0.45],["v58.0", 0.49],["v57.0",0.32],["v56.0",0.29],["v55.0", 0.79],["v47.0",0.11],["v43.0",0.17],["v29.0",0.26]]}];
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: 'Browser market shares. January, 2018'
},
subtitle: {
text: 'Click the columns to view versions. Source: <a href="http://statcounter.com" target="_blank">statcounter.com</a>'
},
xAxis: {
type: 'category'
},
yAxis: {
title: {
text: 'Total percent market share'
}
},
legend: {
enabled: false
},
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: true,
format: '{point.y:.1f}%'
}
}
},
tooltip: {
headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}%</b> of total<br/>'
},
series: [
{
name: "Browsers",
colorByPoint: true,
data: dataAwal
}
],
drilldown: {
series: dataSeries
}
});
</script>
kalau di ketik biasa sih bisa .. tapi kalau dari tabel html bagaimana ya . makasih
0
Tanggapan
ambil dari table html itu gmn maksudnya gan?
Jadi data nya mau dibuat dinamis .. jadi saya mau ngambil data nya dari datatable yang ada di html . contoh nya ada di pict 1
nama table example-table
Belum ada Jawaban. Jadi yang pertama Jawaban
Login untuk ikut Jawaban