Highcharts Demo

author(s): Torstein Hønsi

by glam

HTML

<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/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

<table class="table table-bordered table-condensed table-hover table-striped" id="datatable">
                        <thead>
                            <tr>
                                <th>Tgl</th>
                                                                      <th>Alfamart</th>
                                                                      <th>Indomaret</th>
                                                             </tr>
                        </thead>
                        
                        <tbody>
                                                            <tr>
                                    <td>2018-10-01</td>
                                                                            <td>0</td>
                                                                            <td>0</td>
                                                                    </tr>

                                                            <tr>
                                    <td>2018-10-02</td>
                                                                            <td>0</td>
                                                                            <td>0</td>
                                                                    </tr>

                                                            <tr>
                                    <td>2018-10-03</td>
                                                                            <td>0</td>
                                                                            <td>0</td>
                                                         ...

JavaScript

Highcharts.chart('container', {
    data: {
        table: 'datatable'
    },
    chart: {
        type: 'column'
    },
    title: {
        text: 'Data extracted from a HTML table in the page'
    },
    yAxis: {
        allowDecimals: false,
        title: {
            text: 'Units'
        }
    },
    tooltip: {
        formatter: function () {
            return '<b>' + this.series.name + '</b><br/>' +
                this.point.y + ' ' + this.point.name.toLowerCase();
        }
    }
});