I have a datos.json file that contains data in Spanish with accents and other special characters. When using it in a Highcharts graphic, it displays the accents and eñes with question marks.
Needless to say, the .html file contains a <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> , that the encoding of all the files are in UTF-8 , that there is the <html lang="es"> tag, which I tried changing the extension to PHP and incorporating a header('Content-Type: text/html; charset=utf-8'); at the beginning of the file, which I tried incorporating a <script charset="UTF-8"> in the graph's script. Even change the $.getJSON('data.json', function(data) {} , that is originally used in this chart, by a $.ajax({}) to be able to configure the scriptCharset and the contentType with UTF-8 but nothing always the same result. I could not use a unescape(encodeURIComponent(data)) or decodeURIComponent(escape(data)) since it does not display the graphic.
Archivo datos.json:
[["Perro", 55], ["Niño", 34], ["papá", 31], ["mamá", 26], ["gato", 18]]
Chart script (reduced for the example):
<script>
$(document).ready(function() {
var options = {
chart: {
renderTo: 'container',
type: 'column'
},
series: [{}]
};
$.ajax({
url: "datos.json",
scriptCharset: "utf-8",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(data) {
options.series[0].data = data;
var chart = new Highcharts.Chart(options);
}
});
});
</script>
Result:
Update: The json file is generated by a Python script, saving it in the following way:
#Cuenta las 10 palabras más repetidas de una colección llamada filteredtext
counter = collections.Counter(filteredtext).most_common(10)
#Genera un archivo json con los datos de counter
#Utilizo 'ensure_ascii=False' para que imprima los acentos y eñes.
counterJson = json.dumps(counter, ensure_ascii=False)
#Guarda los datos en un archivo plano de extención.json
json = open('datos.json',"w")
json.write(counterJson)
json.close()