Visualizer: Hyperlinks in table charts

Step 1

Enter your site via FTP and search for 'wordpress\wp-content\uploads\visualizer'.

Step 2

Check that a file called customization.js has been created in the uploads/visualizer folder. If its not, copy the file from 'wordpress\wp-content\plugins\visualizer\js' folder into a 'uploads/visualizer' folder.

Step 3

Remove anything in that file and copy the following piece of code there. Check the comments in the snippet and change things accordingly.

Snippet for Index based column 

// user specific customizations
(function ($) {
    $(document).ready(function(){
        $('body').on('visualizer:chart:settings:extend', function(event, d){
            // change these values only.
            var chart_id = '1056'; // CHANGE THE VALUE WITH YOUR CHART ID
            var col_index = 2; // the column index that needs this behavior, please note that for the third column the index is 2, all indexes are decremented by one
            if(d.id.indexOf('visualizer-' + chart_id) === -1) return;
            $.each(d.settings.columns, function(index, col){
                // comment out the below row if all columns need the same behavior.
                if(index !== col_index) return;
                col.render = function(x){
                    return '<a href="' + x + '">x</a>';
                };
            });
        });
    });
})(jQuery);

Snippet for Title based column 

// user specific customizations
(function ($) {
    $(document).ready(function(){
        $('body').on('visualizer:chart:settings:extend', function(event, d){
            // change these values only.
            var chart_id = '1056'; // CHANGE THE VALUE WITH YOUR CHART ID
            var col_title = 'Ecuador'; // the column title that needs this behavior
            if(d.id.indexOf('visualizer-' + chart_id) === -1) return;
            $.each(d.settings.columns, function(index, col){
                // comment out the below row if all columns need the same behavior.
                if(col.title !== col_title) return;
                col.render = function(x){
                    return '<a href="' + x + '">x</a>';
                };
            });
        });
    });
})(jQuery);