public function AppendChartScriptTemplate()
{
$content = <<<EOD
<!--you should move this to a permanent home -->
<script>
var \$myChart;
// register the graph component
Vue.component('graph', {
template: '#graph-template',
data: function(){
return {
labels: [],
values: [],
name: ':::model:::',
type: 'line',
period: '1year'
};
},
ready: function () {
this.loadData();
},
methods: {
changeType: function () {
this.setConfig();
},
loadData: function () {
\$.getJSON(':::chartApiRoute:::', function (data) {
this.labels = data.data.labels;
this.values = data.data.values;
this.setConfig(this.type);
}.bind(this));
},
changePeriod: function () {
\$.getJSON(':::chartApiRoute:::?period=' + this.period, function (data) {
this.labels = data.data.labels;
this.values = data.data.values;
this.setConfig(this.type);
}.bind(this));
},
setConfig : function () {
var ctx = document.getElementById('canvass').getContext('2d');
var config = {
type: this.type,
data: {
labels: this.labels,
datasets: [{
label: this.name,
data: this.values,
fill: true,
borderDash: [5, 5]
}]
},
options: {
responsive: true,
legend: {
position: 'bottom'
},
hover: {
mode: 'label'
},
scales: {
xAxes: [{
display: true,
scaleLabel: {
display: false,
labelString: 'months'
}
}],
yAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: '# of ' + this.name
}
}]
},
title: {
display: true,
text: this.name
}
}
};
// destroy existing chart
if (typeof \$myChart !== "undefined") {
\$myChart.destroy();
}
// set instance, so we can destroy when rendering new chart
\$myChart = new Chart( ctx, { type: this.type, data: config.data, options:config.options });
}
}
});
// new vue instance
var chart = new Vue ({
el: '#chart'
});
</script>
<!-- End Chart Script -->
EOD;
return $this->tokenBuilder->insertTokensIntoContent($content);
}