how to replace code in highcharts+datatables? (i want data from google sheets)

i have datatables + highcharts (in Child rows ) and i want change code and i want data from google sheets and Is it possible to change?

now data from json and i want data from google sheets and i want code replace https://caucasusoffline.com/data/1/country.json

https://codepen.io/intprotest/pen/YeOKBg?editors=1011

datatables+highcharts screen

Google Spreadsheet

  Highcharts.setOptions({
        global: {
            useUTC: true
        }
    });
    var main_data = country_data;
    var countryArray = null;
    countryArray = new Array();
    var table = "";
    var chart_type = "";
    var countryArray = [];
    var sorted_countryArray = [];
    var networkArray = [];
    var sorted_networkArray = [];
    var chart_container = "country_container";
    var resetsearch = false

    function drawtable(data, divid, tableid, type) {
        $('#' + divid).html('<div><div class="tablebody"><table width="100%" cellpadding="0" cellspacing="0" border="0" class="display" id="' + tableid + '"><tr><td colspan="2"><div class="loading">Loading . .. . </div></td></tr></table></div></div>');
        if (type == "country") {
            var columns = [
                {"width": "15%", "title": "Rank", "targets": 0, "visible": true, "searchable": false, "orderable": true},
                {"width": "15%", "title": "IPv6 %", "targets": 1, "visible": true, "searchable": false, "orderable": true},
                {"width": "15%", "title": "Country", "targets": 2, "visible": true, "searchable": true, "orderable": true},
                //{"title": "groth rate", "targets": 3, "visible": true, "searchable": false, "orderable": false},
                {"targets": 3, "visible": true, "searchable": false, "orderable": false}
            ];
            var order = [1, "desc"];
        }
        if (type == "networks") {
            var columns = [
                {"width": "15%", "title": "Rank", "targets": 0, "visible": true, "searchable": false, "orderable": true},
                {"width": "15%", "title": "IPv6 %", "targets": 1, "visible": true, "searchable": false, "orderable": true},
                {"width": "15%", "title": "Network", "targets": 2, "visible": true, "searchable": true, "orderable": true},
                //{"title": "groth rate", "targets": 3, "visible": true, "searchable": false, "orderable": false},
                {"targets": 3, "visible": true, "searchable": false, "orderable": false}
            ];
            var order = [0, "asc"];
        }

        var table = $('#' + tableid).dataTable({
            "data": data,
            'filter': true,
            "order": [order],
            language: {
                searchPlaceholder: "Search"
            },
            "paging": false,
            "autoWidth": false,
            "info": false,
            columns: columns,
            initComplete: function(settings, json) {
                $('div.loading').parent().remove();
            },
            rowCallback: function(row, data) {
                $('td:eq(3)', row).hide();
            },
            drawCallback: function(settings) {
                $('#country_data_table').find('*').removeClass('select trChart');
                $('#asn_data_table').find('*').removeClass('select trChart');
                $('#country_data_table tr').attr("title", "Click on the bar to view the graph");
            }
        });
        $('#myInputTextField').keyup(function() {
            table.fnFilter(this.value);
        });

        // $('.dataTables_scrollBody').jScrollPane({autoReinitialise: true});
        return table;
    }

    function drawAreaChart(obj, options, main_data, index) {
        options.chart.renderTo = 'country_container' + index;
        $('#country_container' + index).empty();
        var country = $(obj).children(':nth-child(3)').html().replace("&amp;", "&");
        options.series = [];
        var series1 = new Array();
        var chart_array = [];
        for (i in main_data) {
            if (i == country) {
                series1[i] = {
                    showInLegend: '',
                    name: '',
                    type: '',
                    pointInterval: '',
                    data: []
                };
                series1[i].showInLegend = false;
                series1[i].name = i;
                series1[i].type = 'area';
                series1[i].pointInterval = 24 * 3600 * 1000;
                var json_data = main_data[i];
                for (a in json_data) {
                    chart_array.push([parseInt(a), parseFloat(json_data[a])])
                }

                chart_array.sort(function(a, b) {
                    return a[0] - b[0]
                });
                for (var j in chart_array) {
                    series1[i].data.push(([(chart_array[j][0] * 1000), chart_array[j][1]]));
                    //series1[i].data.push(([chart_array[j][1]]));
                }
                options.series.push(series1[i]);
                options.title.text = '';
            }
        }
        if ($(window).width() <= 767) {
            options.navigation.buttonOptions.enabled = false;
        }
        var chart = new Highcharts.Chart(options);
        $('html, body').animate({scrollTop: $("#country_container" + index).offset().top}, 1000);
        return chart;
    }

    function timeConverter(UNIX_timestamp, footer) {
        var a = new Date(UNIX_timestamp);
        var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
        var months = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'];
        var year = a.getFullYear();
        var month = months[a.getMonth()];
        var date = a.getDate();
        var hour = a.getHours();
        var min = a.getMinutes();
        var sec = a.getSeconds();
        if (footer == "yes")
            var time = month + '/' + date + '/' + year;
        else
            var time = month + '/' + date;
        return time;
    }

    function maxKey(a) {
        var max, k; // don't set max=0, because keys may have values < 0  
        for (var key in a) {
            if (a.hasOwnProperty(key)) {
                max = parseInt(key);
                break;
            }
        } //get any key  
        for (var key in a) {
            if (a.hasOwnProperty(key)) {
                if ((k = parseInt(key)) > max)
                    max = k;
            }
        }
        return max;
    }

    function maxValue(data) {
        //var data = JSON.parse(a);

        var maxProp = null
        var maxValue = -1
        for (var prop in data) {
            if (data.hasOwnProperty(prop)) {
                var value = data[prop]
                if (value > maxValue) {
                    maxProp = prop
                    maxValue = value
                }
            }
        }
        return maxValue;
    }

    $(document).ready(function() {
        //$("#download_network_data").attr("href","")
        $('.btn').tooltip();
        var lasttime = maxKey(country_data['Canada']);
        $(".datafooter span").html("" + timeConverter((lasttime * 1000), "yes"));
        /*
         * Country array start
         * @type Array
         */
        for (i in country_data) {
            var sorted_countries = [];
            //sum = maxValue(country_data[i]);                    
            sorted_countries.push(country_data[i][maxKey(country_data[i])]);
            sorted_countries.push(i);
            sorted_countryArray.push(sorted_countries);
        }
        //sort the array in desc order according to Ipv6 data
        sorted_countryArray.sort(function(a, b) {
            return b[0] - a[0];
        });
        //prepare the array for table chart                
        var index = 0;
        for (i in sorted_countryArray) {
            var countries = [];
            index++;
            countries.push(index);
            countries.push(sorted_countryArray[i][0].toFixed(1) + "%");
            countries.push(sorted_countryArray[i][1]);
            //countries.push(index);
            countries.push('<div id="country_container' + index + '" class="area-chart"></div>');
            countryArray.push(countries);
        }
        /*
         * Country array End
         * @type Array
         */

        /*
         * Network array start
         * @type Array
         */
        for (i in asn_data) {
            var sorted_networks = [];
            //            var sum = 0;
            //            for (j in asn_data[i]) {
            //                sum += asn_data[i][j];
            //            }
            if (i > 0) {
                //console.log(i);
            } else {

                sorted_networks.push(asn_data[i][maxKey(asn_data[i])]);
                //sorted_networks.push(sum);
                sorted_networks.push(i);
                sorted_networkArray.push(sorted_networks);
            }
        }
        //sort the array in desc order according to Ipv6 data
        //        sorted_networkArray.sort(function(a, b) {
        //            return b[0] - a[0];
        //        });
        //prepare the array for table chart
        var index = 0;
        for (i in sorted_networkArray) {
            var networks = [];
            index++;
            networks.push(index);
            networks.push(sorted_networkArray[i][0].toFixed(1) + "%");
            networks.push(sorted_networkArray[i][1]);
            //networks.push(index);
            networks.push('<div id="country_container' + index + '" class="area-chart"></div>');
            networkArray.push(networks);
        }

        chart_type = document.location.toString().split("#")[1];
        //hash = document.location.toString().split("#")[1].split("-");
        //chart_type = hash[0];

        if (chart_type == "networks") {
            $(".ipv6btn").children().first().addClass("selected");
            main_data = asn_data;
            chart_container = "country_container";
            options.plotOptions.area.fillColor = "#2c6f97";
            options.plotOptions.area.lineColor = "#479fd3";
            options.navigation.menuItemHoverStyle.background = "#2c6f97";
            $(".boxshadow").removeClass("green");
            drawtable(networkArray, 'country_data_div', 'country_data_table', "networks");
        } else {
            chart_type = "countries"
            drawtable(countryArray, 'country_data_div', 'country_data_table', "country");
        }

        //            if (hash[1] > 0) {    
        //                var obj = $('#country_data_table tbody').children().eq(hash[1] - 1);
        //                $(obj).addClass("select trChart");
        //                $(obj).children().last().addClass("tdChart").show();                
        //                drawAreaChart(obj, options, main_data, hash[1]);                
        //            }

        $(".ipv6btn a").click(function() {
            $('#country_data_table').remove();
            $('#country_data_table_wrapper').remove();
            $(".ipv6btn a").removeClass("selected");
            $(this).addClass("selected");

            chart_type = this.href.split("#")[1];

            if (chart_type == "networks") {
                main_data = asn_data;
                chart_container = "country_container";
                options.plotOptions.area.fillColor = "#2c6f97";
                options.plotOptions.area.lineColor = "#479fd3";
                options.navigation.menuItemHoverStyle.background = "#2c6f97";
                $(".boxshadow").removeClass("green");
                drawtable(networkArray, 'country_data_div', 'country_data_table', "networks");
            }
            if (chart_type == "countries") {
                main_data = country_data;
                chart_container = "country_container";
                options.plotOptions.area.fillColor = "#5d6d2e";
                options.plotOptions.area.lineColor = "#97c409";
                options.navigation.menuItemHoverStyle.background = "#5d6d2e";
                $("#country_data_div").show();
                $("#asn_data_div").hide();
                $(".boxshadow").addClass("green");
                drawtable(countryArray, 'country_data_div', 'country_data_table', "country");
            }
            //$('.dataTables_scrollBody').jScrollPane({autoReinitialise: true});
        });

        $('#country_data_table tbody tr').live('click', function(e) {
            e.preventDefault();
            var trIndex = $(this).children().first().html();

            if ($(this).hasClass("select")) {
                $(this).removeClass("select trChart");
                $(this).children().last().removeClass("tdChart").hide();
                $(this).attr("title", "Click on the bar to view the graph");
            } else {
                $(this).removeAttr("title");
                $('#country_data_table').find('*').removeClass('select trChart');
                $('#country_data_table').find('td:last-child').removeClass('tdChart').hide();
                $(this).addClass("select trChart");
                $(this).children().last().addClass("tdChart").show();
            }

            //window.location.hash = chart_type+'-'+trIndex;
            options.chart.renderTo = 'country_container' + trIndex;
            $('#country_container' + trIndex).empty();
            var country = $(this).children(':nth-child(3)').html().replace("&amp;", "&");
            options.series = [];
            var series1 = new Array();
            var chart_array = [];
            for (i in main_data) {
                if (i == country) {
                    series1[i] = {
                        showInLegend: '',
                        name: '',
                        type: '',
                        pointInterval: '',
                        data: []
                    };
                    series1[i].showInLegend = false;
                    series1[i].name = i;
                    series1[i].type = 'area';
                    series1[i].pointInterval = 24 * 3600 * 1000;
                    var json_data = main_data[i];
                    for (a in json_data) {
                        chart_array.push([parseInt(a), parseFloat(json_data[a])])
                    }

                    chart_array.sort(function(a, b) {
                        return a[0] - b[0]
                    });
                    for (var j in chart_array) {
                        series1[i].data.push(([(chart_array[j][0] * 1000), chart_array[j][1]]));
                        //series1[i].data.push(([chart_array[j][1]]));
                    }
                    options.series.push(series1[i]);
                    options.title.text = i;
                }
            }
            if ($(window).width() <= 767) {
                options.navigation.buttonOptions.enabled = false;
            }
            var chart = new Highcharts.Chart(options);
        });

        $(document).on('keyup', "#country_data_table_filter input", function() {
            if ($(this).val().length > 0) {
                if (!resetsearch)
                    $("<a class='resetsearch'>X</a>").insertBefore(this);
                resetsearch = true;
            } else {
                resetsearch = false;
                $(".resetsearch").remove();
            }
        });

        $(document).on('keyup', "#myInputTextField", function() {
            if ($(this).val().length > 0) {
                if (!resetsearch)
                    $("<a class='resetsearch'>X</a>").insertBefore(this);
                resetsearch = true;
            } else {
                resetsearch = false;
                $(".resetsearch").remove();
            }
        });

        $(".resetsearch").live('click', function() {
            $("#country_data_table_filter input").val("");
            $("#myInputTextField").val("");
            resetsearch = false;
            $(".resetsearch").remove();
            if (chart_type == "networks")
                drawtable(networkArray, 'country_data_div', 'country_data_table', "networks");
            else
                drawtable(countryArray, 'country_data_div', 'country_data_table', "country");
        });

        $(window).bind('resize', function() {
            //            $('#country_data_table').remove();
            //            $('#country_data_table_wrapper').remove();
            //            if (chart_type == "networks")
            //                drawtable(networkArray, 'country_data_div', 'country_data_table', "networks");
            //            else
            //                drawtable(countryArray, 'country_data_div', 'country_data_table', "country");

        }).trigger('resize');
    });