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

avatar farah92
@farah92

49 Kontribusi 10 Poin

Dipost 4 tahun yang lalu

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