Echo PHP Functions into Highcharts Drilldown - php

Question

I have 2 functions that generate "drill down" data for highcharts presentation.
If I run the functions outside of the highcharts javascript and use then manually inset the data generated (as below) into the javascript the chart works fine:
$(function () {
Highcharts.theme = {
chart: {
height: 480,
//margin: [0, 0, 0, 0],
spacingTop: 30,
spacingBottom: 20,
spacingLeft: 0,
spacingRight: 20,
renderTo: 'this_week_chart',
type: "line",
style: {
//fontFamily: "Open Sans"
font: '"Open Sans","Source Sans Pro",Helvetica,sans-serif'
}
}
};
Highcharts.setOptions(Highcharts.theme);
var chart = new Highcharts.Chart({
series: [{
type: "column",
index: 0,
name: "Total Sales Value (inc. tax)",
data:
[
{name: 'Monday', y: null, drilldown: 'Monday'},
{name: 'Tuesday',y: 890, drilldown: 'Tuesday'},
{name: 'Wednesday',y: 1150.5, drilldown: 'Wednesday'},
{name: 'Thursday',y: 1519.5, drilldown: 'Thursday'},
{name: 'Friday', y: null, drilldown: 'Friday'},
{name: 'Saturday', y: null, drilldown: 'Saturday'},
{name: 'Sunday', y: null, drilldown: 'Sunday'}
]
}],
drilldown: {
series:
[
{name: 'Monday',id: 'Monday',data: []},
{name: 'Tuesday',id: 'Tuesday',data: [['17',67],['18',95.5],['19',185],['20',228],['21',209],['22',98],['23',7.5]]},
{name: 'Wednesday',id: 'Wednesday',data: [['17',26],['18',176.5],['19',135.5],['20',248],['21',215],['22',277],['23',72.5]]},
{name: 'Thursday',id: 'Thursday',data: [['0',null],['17',22],['18',111.5],['19',383],['20',211],['21',456.5],['22',157],['23',178.5]]},
{name: 'Friday',id: 'Friday',data: [['0',90],['17',158],['18',203],['19',324.5],['20',509],['21',290.5],['22',5],['23',27.5]]},
{name: 'Saturday',id: 'Saturday',data: [['1',69]]},
{name: 'Sunday',id: 'Sunday',data: []}
]
},
tooltip: {
borderRadius: 5,
shared: true
},
legend: {
enabled: false
},
plotOptions: {
arearange: {
tooltip: {
followPointer: true
}
},
series: {
dataLabels: {
style: {
fontWeight: "normal",
fontSize: "10"
}
}
},
column: {
dataLabels: {
format: '${y:,.0f}',
enabled: true,
}
}
},
yAxis: {
labels: {
format: '${value:,.0f}'
}
},
xAxis: {
type: "datetime",
dateTimeLabelFormats: {
day: '%a, %b %e'
}
}
});
});
</script>
If I insert the data as variables however (as follows) the code no longer works:
</script>
<script type="text/javascript">
$(function () {
Highcharts.theme = {
chart: {
height: 480,
//margin: [0, 0, 0, 0],
spacingTop: 30,
spacingBottom: 20,
spacingLeft: 0,
spacingRight: 20,
renderTo: 'this_week_chart',
type: "line",
style: {
//fontFamily: "Open Sans"
font: '"Open Sans","Source Sans Pro",Helvetica,sans-serif'
}
}
};
Highcharts.setOptions(Highcharts.theme);
var chart = new Highcharts.Chart({
series: [{
type: "column",
index: 0,
name: "Total Sales Value (inc. tax)",
data:
<?php produce_HC_simple_drill_top($HC_SERIES_BY_DAY, "DAY", "TOTAL_SALES");?>
}],
drilldown: {
series:
<?php produce_HC_simple_drill_bottom_hour($HC_SERIES_BY_DAY,"DAY","TOTAL_SALES", "SALE_HOUR", "TOTAL_SALES", $This_wk_starts, $This_wk_ends); ?>
},
tooltip: {
borderRadius: 5,
shared: true
},
legend: {
enabled: false
},
plotOptions: {
arearange: {
tooltip: {
followPointer: true
}
},
series: {
dataLabels: {
style: {
fontWeight: "normal",
fontSize: "10"
}
}
},
column: {
dataLabels: {
format: '${y:,.0f}',
enabled: true,
}
}
},
yAxis: {
labels: {
format: '${value:,.0f}'
}
},
xAxis: {
type: "datetime",
dateTimeLabelFormats: {
day: '%a, %b %e'
}
}
});
});
</script>
This makes no sense as I've inserted data generated by PHP into highcharts before without using drilldowns and everything works fine. I can't figure out what is wrong here at all, can anyone help?