I have a chart that is created according to the year, which is passed by AJAX and returns a JSON containing the values to create the chart. Well, I send AJAX with the year, I return the JSON, however ... It makes a mistake, it creates everything wrong, follow my code.
My controller where I return the data and create the JSON:
public function comparativo_json(){
$html = '';
$data = $this->relatoriosmodel->getComparativo($this->input->post('ano'));
$html .= '[';
foreach($data['mesesFuncionario'] as $func):
$html .= "{";
$html .= "name: '".$data['funcionarioDados'][$func['id']]->nome."',";
unset($func['id']);
$html .= "data: [ "; foreach($func as $f){ $html .= $f.','; } substr($f,-1); $html .= "]";
$html .= "},";
endforeach;
$html .= ']';
echo json_encode($html);
}
My JS:
<script type="text/javascript">
$(function(){
$('#ano').change(function(){
$.ajax({
url: '/relatorio/comparativo_json',
type: 'POST',
dataType: 'json',
data: {ano: $("#ano option:selected").val()},
success: function(data){
$('#containerHighCharts').highcharts({
title: {
text: 'Comparativo de Vendas',
x: -20 //center
},
subtitle: {
text: 'Ano de Referência: '+$("#ano option:selected").val(),
x: -20
},
xAxis: {
categories: ['Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun',
'Jul', 'Ago', 'Set', 'Out', 'Nov', 'Dez']
},
yAxis: {
title: {
text: 'Reais (R$)'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
valueSuffix: ' (R$) Reais'
},
legend:{
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
series: data,
});
}
});
});
});
</script>
The JSON that it returns, which by the way is correct, according to the pattern requested by the plugin:
[
{
name: 'Richard Feliciano',
data: [ 0,0,0,0,1816,17100,2400,0,0,0,0,0,]
},
{
name: 'Ewerton Melo',
data: [ 0,0,0,0,0,12400,0,0,0,0,0,0,]
},
]
Image containing the error:
I just need to make the data
return print correctly.