Highcharts Demo

author(s): Torstein Hønsi

by Jawad Ameen

HTML

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<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>

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

<div style="max-width: 800px; margin: 0 auto">
    <button id="toggle" style="margin: 10px">Toggle rows and columns</button>

    <table id="datatable">
        <thead>
            <tr>
                <th></th>
                <th>Jane</th>
                <th>John</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th>Apples</th>
                <td>3</td>
                <td>4</td>
            </tr>
            <tr>
                <th>Pears</th>
                <td>2</td>
                <td>0</td>
            </tr>
            <tr>
                <th>Plums</th>
                <td>5</td>
                <td>11</td>
            </tr>
            <tr>
                <th>Bananas</th>
                <td>1</td>
                <td>1</td>
            </tr>
            <tr>
                <th>Oranges</th>
                <td>2</td>
                <td>4</td>
            </tr>
        </tbody>
    </table>
</div>

JavaScript

var options = {
    data: {
        table: document.getElementById('datatable'),
        switchRowsAndColumns: true
    },
    chart: {
        type: 'column'
    },
    title: {
        text: 'Switched rows and columns'
    },
    yAxis: {
        allowDecimals: false,
        title: {
            text: 'Units'
        }
    }
};

$('#container').highcharts(Highcharts.merge(options));


$('#toggle').click(function () {
    options.data.switchRowsAndColumns = !options.data.switchRowsAndColumns;
    $('#container').highcharts(Highcharts.merge(options));
});