How To hide table after showing it

[AhmedEmadAhmed]

How to hide shown table after viewing it from export

[dplatten]

I wanted to do this too, and have modified the source code to allow it. My modifications assume that the user has jQuery available to them. You need to modify the "View the data table below the chart" section of the code as shown below. With these modifications when you click on "Toggle data table" a second time the table is hidden again:

    /**
     * View the data in a table below the chart
     */
    Highcharts.Chart.prototype.viewData = function () {
        if (!this.insertedTable) {
            var div = document.createElement('div');
            div.className = 'highcharts-data-table';
            // Insert after the chart container
            this.renderTo.parentNode.insertBefore(div, this.renderTo.nextSibling);
            div.innerHTML = this.getTable();
            this.insertedTable = true;
            div.id = this.container.id + '-data-table';
        }
        else {
            $('#' + this.container.id + '-data-table').toggle();
        }
    };

I've also renamed the "View data table", towards the top of the code, to "Toggle data table":

    Highcharts.setOptions({
        lang: {
            downloadCSV: 'Download CSV',
            downloadXLS: 'Download XLS',
            viewData: 'Toggle data table'
        }
    });

I hope this helps you.

David

[dplatten]

My first attempt (above) used the chart's DIV container name as part of the data-table DIV name. This may fail. Also, there may be more than one chart in the DIV container. The following is more robust:

    /**
     * View the data in a table below the chart
     */
    Highcharts.Chart.prototype.viewData = function () {
        if (!this.insertedTable) {
            var div = document.createElement('div');
            div.className = 'highcharts-data-table';
            // Insert after the chart container
            this.renderTo.parentNode.insertBefore(div, this.renderTo.nextSibling);
            div.innerHTML = this.getTable();
            this.insertedTable = true;
            var date_str = new Date().getTime().toString();
            var rand_str = Math.floor(Math.random() * (1000000)).toString();
            this.insertedTableID = 'div_' + date_str + rand_str
            div.id = this.insertedTableID;
        }
        else {
            $('#' + this.insertedTableID).toggle();
        }
    };

[cinkie]

I created a .js file with code provided by @dplatten , put the file in www/ folder, and include this in ui.r (tags$head(tags$script(src = 'this_script.js'))). It works perfectly! Thanks for the advice. 👍