Highcharts doesn't show if I pass parameters - php

Question

I have a problem when I pass parameters with json_encode because I need to pass two arrays from php to javascript. My code run ok if i don't put the arrays
This is my javascript charts code:
function ChangeChartType(chart, series, newType) {
newType = newType.toLowerCase();
for (var i = 0; i < series.length; i++) {
var srs = series[0];
try {
srs.chart.addSeries({
type: newType,
stack: srs.stack,
yaxis: srs.yaxis,
name: srs.name,
color: srs.color,
data: srs.options.data
},
false);
series[0].remove();
} catch (e) {
}
}
}
// Two charts definition
var chart1, chart2;
// Una vez que el DOM (documento) ha acabado de cargar
$(document).ready(function() {
// First chart initialization
chart1 = new Highcharts.Chart({
chart: {
renderTo: 'chart_1',
type: 'column',
height: 350,
},
title: {
text: "<?php echo $titulo; ?>"
},
xAxis: {
categories: ['Processing.js', 'Impact.js', 'Other', 'Ease.js', 'Box2D.js', 'WebGL', 'DOM', 'CSS', 'Canvas', 'Javascript']
},
yAxis: {
title: {
text: 'Meses'
}
},
},function(chart){
//var i = 0;
for(i=0; i<3; i++) {
chart.addSeries({
data: [32, 43, 42],
index: 0,
zIndex:1
});
}
});
// Second chart initialization (pie chart)
chart2 = new Highcharts.Chart({
chart: {
renderTo: 'chart_2',
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
},
title: {
text: "<?php echo $titulo; ?>"
},
tooltip: {
formatter: function() {
var s;
if (this.point.name) { // the pie chart
s = ''+
this.point.name +': '+ this.y + ' totales';
} else {
s = ''+
this.x +': '+ this.y + ' totales';
}
return s;
}
//pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
color: '#000000',
connectorColor: '#000000',
format: '<b>{point.name}</b>: {point.percentage:.1f} %'
},
showInLegend: true
}
},
series: [{
type: 'pie',
name: 'Resultado',
data: [<?php echo $resultado ?>]
}]
});
// Switchers (of the Chart1 type) - onclick handler
$('.switcher').click(function () {
var newType = $(this).attr('name');
ChangeChartType(chart1, chart1.series, newType);
});
});
I open both charts with a dialog window
$(function() {
$( "#dialog1" ).dialog({
autoOpen: false,
width: 950,
height: 460,
show: {
effect: "blind",
duration: 1000
},
hide: {
effect: "blind",
duration: 1000
}
});
$( "#dialog2" ).dialog({
autoOpen: false,
width: 650,
height: 760,
show: {
effect: "blind",
duration: 1000
},
hide: {
effect: "blind",
duration: 1000
}
});
$( "#opener1" ).click(function() {
$( "#dialog1" ).dialog( "open" );
});
$( "#opener2" ).click(function() {
$( "#dialog2" ).dialog( "open" );
});
});
The problem is when i try add this arrays to add months and names instead of ['Processing.js', 'Impact.js', 'Other', 'Ease.js', 'Box2D.js', 'WebGL', 'DOM', 'CSS', 'Canvas', 'Javascript'] and default names
// Two charts definition
var chart1, chart2;
// Una vez que el DOM (documento) ha acabado de cargar
$(document).ready(function() {
var nombres = <?php echo json_encode($names); ?>; //I CAN'T SEE MY FIRST PIE CHART
var meses = <?php echo json_encode($valorX); ?>; //WHEN I INSERT BOTH VARIABLES
// First chart initialization
chart1 = new Highcharts.Chart({
chart: {
renderTo: 'chart_1',
type: 'column',
height: 350,
},
My portion of php
$valorX = array('Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre');
$names = array('Ana', 'Elena', 'Juan');
So, I don't know what i did wrong. With only these arrays declared, my second chart (Pie chart) doesn't appear. My code is under construction. Sorry my bad english, coding and Thanks you very much!!!!!!