getting data from google sheets works on jsfiddle but not local client

Question

I have JScript code that calls google sheets data, but while this code can access the data on JSFiddle, it does not access the data through the local client. Checking prior answers, I checked that I wrapped my js code in DOM handler, and I think I loaded the libraries appropriately. In fact the elements load, just without the data for some reason.

Here is the jsfiddle.

Here is my HTML body

<!doctype html>
<html>

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script src="js/raphael-2.1.4.min.js"></script>
<script src="js/justgage.js"></script> 
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/heatmap.js"></script>
<script src="https://code.highcharts.com/modules/treemap.js"></script> 
<script src="https://code.highcharts.com/modules/data.js"></script>
<script src="https://code.highcharts.com/modules/data.src.js"></script>
<script src="https://code.highcharts.com/stock/highcharts-more.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="js/custom.js"></script>
<meta charset="utf-8"/>
<title>Waste Water Management Design Exercise</title>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" type="text/css" href="css/jquery-ui.css">
<link rel="stylesheet" type="text/css" href="css/styles.css">
<link rel="stylesheet" type="text/css" href="https://code.highcharts.com/css/highcharts.css">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
</head>

<body>

<div id="masterDiv">
<h2>Design Objectives</h2> 
<div id="tabs">
    <ul>
        <li>
            <a href="#tab-1">Line Graph</a>
        </li>
        <li>
            <a href="#tab-2">Bar Graph</a>    
        </li>
        <li>
            <a href="#tab-3">Objective View</a>
        </li>
    </ul>
    <div id="tab-1">
        <div id="objective_line">    
        </div>
    </div>
    <div id="tab-2">
        <div id="objective_bar"></div>
    </div>
    <div id="tab-3">
        <div id="obj_view"></div>    
    </div>
    </div>
<br>
<br>
<div class="selector">
<div id="exiting" class="category on">
    <h3>Design Cost Breakdown</h3>
</div>
<div id="entering" class="category off">
 <h3>Parameter Variations</h3>
</div>  
</div>    
  <div id="containerBar" style="min-width: 310px; height: 450px; margin: 0 auto"></div>
  <div id="table_div" style="min-width: 310px; height: 450px; margin: 0 auto">
</div>
</div>
</body>
</html>

And here is my JScript Code

$(document).ready(function() {
$("#table_div").hide();


$("#entering").click(function(){
$("#containerBar").hide();
$("#table_div").show();
$(this).removeClass("off").addClass("on");
$("#exiting").removeClass("on").addClass("off");
}); 

$("#exiting").click(function(){
$("#table_div").hide();
$("#containerBar").show();
$(this).removeClass("off").addClass("on");
$("#entering").removeClass("on").addClass("off");
});

$(function() {
$( "#tabs" ).tabs();
} );

$(function () {

Highcharts.chart('obj_view', {

    chart: {
        type: 'column'
},

    title: {
        text: 'Objective Breakdown'
},


    xAxis: {
        tickmarkPlacement: 'on',
        title: {
            text: 'Design Iterations'
        }
},

    yAxis:{
        min: 0,
        title: {
            text: 'Cost in $ Millions',
            align: 'low'
            },
        labels: {
            overflow: 'justify'
            }
        },

tooltip: {
    valueSuffix: ' millions',
    shared: true
},

plotOptions: {
    bar: {
        dataLabels: {
            enabled: true
        }
    }
},

legend: {
    layout: 'vertical',
    align: 'right',
    verticalAlign: 'top',
    y: 20,
    floating: true
}, 

data: {
    googleSpreadsheetKey: '1DsSVLzwRE3p1trqynO4O2LRwwxnvfkBK9xOGzLHAY4Q',
    switchRowsAndColumns: true
}

})
});


$(function () {

Highcharts.chart('objective_line', {

    chart: {
        type: 'line'
},

    title: {
        text: 'Overall Design Objective Comparisons'
},


    xAxis: {
        tickmarkPlacement: 'on',
        title: {
            text: 'Design Objectives'
        }
},

    yAxis:{
        min: 0,
        title: {
            text: 'Cost in $ Millions',
            align: 'low'
            },
        labels: {
            overflow: 'justify'
            }
        },

tooltip: {
    valueSuffix: ' millions',
    shared: true
},

plotOptions: {
    bar: {
        dataLabels: {
            enabled: true
        }
    }
},

legend: {
    layout: 'vertical',
    align: 'right',
    verticalAlign: 'top',
    y: 20,
    floating: true
}, 

data: {
    googleSpreadsheetKey: '1DsSVLzwRE3p1trqynO4O2LRwwxnvfkBK9xOGzLHAY4Q'
}

})
});

$(function () {

Highcharts.chart('objective_bar', {

    chart: {
        type: 'bar'
},

    title: {
        text: 'Overall Design Objective Comparisons'
},


    xAxis: {
        tickmarkPlacement: 'on',
        title: {
            text: 'Design Objectives'
        }
},

    yAxis:{
        min: 0,
        title: {
            text: 'Cost in $ Millions',
            align: 'low'
            },
        labels: {
            overflow: 'justify'
            }
        },

tooltip: {
    valueSuffix: ' millions',
    shared: true
},

plotOptions: {
    bar: {
        dataLabels: {
            enabled: true
        }
    }
},

legend: {
    layout: 'vertical',
    align: 'right',
    verticalAlign: 'top',
    y: 20,
    floating: true
}, 

data: {
    googleSpreadsheetKey: '1DsSVLzwRE3p1trqynO4O2LRwwxnvfkBK9xOGzLHAY4Q'
}

})
});

$(function () {
Highcharts.chart('containerBar', {
    chart: {
        type: 'column'
    },
    title: {
        text: 'Design Cost Breakdown'
    },
    yAxis: {
        min: 0,
        title: {
            text: '$ 1M'
        },
        stackLabels: {
            enabled: true,
            style: {
                fontWeight: 'bold',
                color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
            }
        }
    },
    legend: {
        align: 'right',
        x: 0,
        verticalAlign: 'middle',
        y: 30,
        floating: false,
        backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white',
        borderColor: '#CCC',
        borderWidth: 1,
        shadow: false,
        width: 180
    },
    tooltip: {
        headerFormat: '<b>{point.x}</b><br/>',
        pointFormat: '{series.name}: {point.y}<br/>Total: {point.stackTotal}'
    },
    plotOptions: {
        column: {
            stacking: 'normal',
            dataLabels: {
                enabled: false,
                color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
            }
        }
    },

    data:{
        googleSpreadsheetKey: '1DsSVLzwRE3p1trqynO4O2LRwwxnvfkBK9xOGzLHAY4Q',
        googleSpreadsheetWorksheet: 2
    }

});
});

$(function () {
google.charts.load('current', {'packages':['table']});
google.charts.setOnLoadCallback(drawTable);

function drawTable() {
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Parameter');
    data.addColumn('string', 'Design 1');
    data.addColumn('string', 'Design 2');
    data.addColumn('string', 'Design 3');
    data.addRows([
      ['Waste Water Piping', 'No', 'Yes', 'Yes'],
      ['Waste Water Storage', 'Yes', 'No', 'Yes'],
      ['Waste Water Reuse', 'Yes', 'Yes', 'No'],
      ['Pipe Size', 'N/A', 'Medium', 'Small'],
      ['Storage Container Size', 'Medium', 'N/A', 'Small'],
      ['Waste Water Reuse Proportion', '30%', '40%', 'N/A']
    ]);

    var table = new google.visualization.Table(document.getElementById('table_div'));

    table.draw(data, {showRowNumber: false, width: '80%', height: '100%'});
  }
});
});

I'm getting "Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://spreadsheets.google.com/feeds/cells/1t4sTYW0nXpPEY5jcWYlvb-RqVbivbzZYyr7QB2ucS_k/1/public/values?alt=json. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing)." — nilesguo, Mar 14 '18 at 22:29

score 1 · Accepted Answer · answered Mar 14 '18 at 22:43

1

This is due to a security 'feature' in Browsers:

https://www.thegeekstuff.com/2016/09/disable-same-origin-policy/

Disable same origin policy in Chrome

You could disable the security feature, or use a local web server. This one is quite easy to use: https://chrome.google.com/webstore/detail/web-server-for-chrome/ofhbbkphhbklhfoeikjpcbhemlocgigb

answered Mar 14 '18 at 22:43

ryanpcmcquen

5,446
3
20
34

Because that is running on a server. – ryanpcmcquen Mar 14 '18 at 22:49
1

Thank you so much! – nilesguo Mar 16 '18 at 02:41

getting data from google sheets works on jsfiddle but not local client

1 Answers1