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:
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!