Error: GET http://mywebsite.com/tmp/highchart_oqoCdS 403 (Forbidden) - php

Question

The server seems pretty unhappy trying to work with the jQuery min file. The error that is being reported is:
GET http://mywebsite.com/tmp/highchart_C6MyqK 403 (Forbidden)
jquery.min.js:2
The highchart_C6MyqK is a json file that is created with a random name from the code below. My eventual goal is to create this Highstock chart:
http://www.highcharts.com/stock/demo/compare
Though when loading the page, it stays blank with the forbidden error. I have tried this code on two different server hosts with the same error.
Here is my code. The first half is getting the data, the second half is creating the graph.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js">
</script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script src="http://code.highcharts.com/stock/highstock.js"></script>
<script src="http://code.highcharts.com/stock/modules/exporting.js"></script>
<?php
//Find all .csv files
$files = glob('*.csv');
$dates = array();
for($i=0;$i<count($files);$i++){
$str = substr($files[$i],-14, -4);
$dates[] = $str;
}
sort($dates);
//Get data from csv files
$tmpFile = tempnam('tmp/','highchart_');
$out = fopen($tmpFile, "w");
fputs($out, '[');
for($i=0;$i<count($files);$i++){
if (($handle = fopen($files[$i], "r")) !== FALSE) {
while (($data = fgetcsv($handle, 1000, ',')) !== FALSE) {
$timestamp = strtotime($data[0].' '.$data[1]);
fputs($out, '['.(int)$timestamp.','.(float)$data[2].','.
(float)$data[3].','.(float)$data[4].','.(float)$data[5].','.
(float)$data[12].','.(float)$data[13].']');
}
fclose($handle);
}
}
fputs($out, ']');
fclose($out);
?>
<script type="text/javascript">
$(function() {
var seriesOptions = [],
yAxisOptions = [],
seriesCounter = 0,
names = ['CBS min', 'CBS max', 'CBS avg. peak min', 'CBS avg. peak max', 'LKFS', 'LRA' ],
colors = Highcharts.getOptions().colors;
$.each(names, function(i, name) {
$.getJSON('<? echo $tmpFile ?>', function(data) {
seriesOptions[i] = {
name: name,
data: data
};
seriesCounter++;
if (seriesCounter == names.length) {
createChart();
}
});
});
// create the chart when all data is loaded
function createChart() {
$('#container').highcharts('StockChart', {
chart: {
},
rangeSelector: {
selected: 4
},
yAxis: {
labels: {
formatter: function() {
return (this.value > 0 ? '+' : '') + this.value + '%';
}
},
plotLines: [{
value: 0,
width: 2,
color: 'silver'
}]
},
plotOptions: {
series: {
compare: 'percent'
}
},
tooltip: {
pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> ({point.change}%)<br/>',
valueDecimals: 2
},
series: seriesOptions
});
}
});
</script>
<div id="container" style="height: 500px; min-width: 600px"></div>
Thanks in advance for your insight!

Answer 1

The problem is probably related to the permissions of the JSON file you created. Check if it has read permissions (for everyone, not only the file's owner).
If not (which is probably the case), put this at the end of your PHP function creating the file, under fclose($out):
chmod($tmpFile, 0644); # Read/write for file owner, read for everyone else
It needs to be readable by everyone since JavaScript is executed client-side and not server-side.