1
I’m trying to change the encoding of my chart that I made using Google Charts with data coming from a json file. I’ve changed the contentType
of $.ajax()
but nothing happened.
The chart is displayed correctly, the only defect are the letters that got bugged.
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
// Load the Visualization API and the piechart package.
google.load('visualization', '1', {'packages':['treemap']});
// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawChart);
function drawChart() {
var jsonData = $.ajax({
url: "data.json",
dataType:"json",
contentType:"application/json; charset=utf-8",
async: false
}).responseText;
// Create our data table out of JSON data loaded from server.
var data = new google.visualization.DataTable(jsonData);
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.TreeMap(document.getElementById('chart_div'));
chart.draw(data, {
minColor: '#1F89CC',
midColor: '#FFFC1B',
maxColor: '#FF0302',
headerHeight: 15,
fontColor: 'black',
showScale: false,
width: 800,
height: 640
});
}
</script>
Json file:
{
"cols": [
{"id":"","label":"Perguntas","pattern":"","type":"string"},
{"id":"","label":"Pergunta","pattern":"","type":"string"},
{"id":"size","label":"Size","pattern":"","type":"number"},
{"id":"color","label":"Color","pattern":"","type":"number"}
],
"rows": [
{"c":[{"v":"Perguntas","f":null}, {"v": null,"f": null}, {"v": 0, "f": null}, {"v": 0, "f": null}]},
{"c":[{"v":"SMD foi sua primeira opção de curso?","f":null}, {"v": "Perguntas","f": null}, {"v": 0, "f": null}, {"v": 0, "f": null}]},
{"c":[{"v":"Sim","f":null}, {"v": "SMD foi sua primeira opção de curso?","f": null}, {"v": 63, "f": null}, {"v": -10, "f": null}]},
{"c":[{"v":"Não","f":null}, {"v": "SMD foi sua primeira opção de curso?","f": null}, {"v": 20, "f": null}, {"v": 100, "f": null}]},
{"c":[{"v":"Semestre de ingresso","f":null}, {"v": "Perguntas","f": null}, {"v": 0, "f": null}, {"v": 0, "f": null}]},
{"c":[{"v":"2010.1","f":null}, {"v": "Semestre de ingresso","f": null}, {"v": 6, "f": null}, {"v": 8, "f": null}]},
{"c":[{"v":"2011.1","f":null}, {"v": "Semestre de ingresso","f": null}, {"v": 13, "f": null}, {"v": -1, "f": null}]},
{"c":[{"v":"2012.1","f":null}, {"v": "Semestre de ingresso","f": null}, {"v": 12, "f": null}, {"v": 3, "f": null}]},
{"c":[{"v":"2013.1","f":null}, {"v": "Semestre de ingresso","f": null}, {"v": 18, "f": null}, {"v": 7, "f": null}]},
{"c":[{"v":"2013.2","f":null}, {"v": "Semestre de ingresso","f": null}, {"v": 11, "f": null}, {"v": 1, "f": null}]},
{"c":[{"v":"2014.1","f":null}, {"v": "Semestre de ingresso","f": null}, {"v": 11, "f": null}, {"v": -3, "f": null}]},
{"c":[{"v":"2014.2","f":null}, {"v": "Semestre de ingresso","f": null}, {"v": 6, "f": null}, {"v": -6, "f": null}]},
{"c":[{"v":"2015.1","f":null}, {"v": "Semestre de ingresso","f": null}, {"v": 20, "f": null}, {"v": 10, "f": null}]},
{"c":[{"v":"Sexo","f":null}, {"v": "Perguntas","f": null}, {"v": 0, "f": null}, {"v": 0, "f": null}]},
{"c":[{"v":"Masculino","f":null}, {"v": "Sexo","f": null}, {"v": 63, "f": null}, {"v": -10, "f": null}]},
{"c":[{"v":"Feminino","f":null}, {"v": "Sexo","f": null}, {"v": 33, "f": null}, {"v": 5, "f": null}]},
{"c":[{"v":"Grade Curricular supre suas necessidades","f":null}, {"v": "Perguntas","f": null}, {"v": 0, "f": null}, {"v": 0, "f": null}]},
{"c":[{"v":"Completamente","f":null}, {"v": "Grade Curricular supre suas necessidades","f": null}, {"v": 17, "f": null}, {"v": -10, "f": null}]},
{"c":[{"v":"Razoavelmente","f":null}, {"v": "Grade Curricular supre suas necessidades","f": null}, {"v": 61, "f": null}, {"v": 1, "f": null}]},
{"c":[{"v":"Parcialmente","f":null}, {"v": "Grade Curricular supre suas necessidades","f": null}, {"v": 14, "f": null}, {"v": 6, "f": null}]},
{"c":[{"v":"não","f":null}, {"v": "Grade Curricular supre suas necessidades","f": null}, {"v": 5, "f": null}, {"v": 11, "f": null}]}
]
}
You can post the variable content
jsonData
?– Guilherme Lautert
I added the JSON file, remembering that it works normally and I only have this coding problem anyway
– Matheus Bonfim
According to the codepen, and for the past data not the problem, check the charset of your page, and try to take the
contentType
in ajax.– Guilherme Lautert
Managed to solve the problem @Matheusbonfim?
– Guilherme Lautert
It worked! I created another JSON file using the same data and it worked, just didn’t quite understand why.
– Matheus Bonfim
If possible, analyze and answer your own question so if it occurs with another person I can help. = D
– Guilherme Lautert
Solved your doubt?
– durtto