I cannot modify the coding of my charts in Google Chart

Asked

Viewed 103 times

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?

  • I added the JSON file, remembering that it works normally and I only have this coding problem anyway

  • 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.

  • Managed to solve the problem @Matheusbonfim?

  • It worked! I created another JSON file using the same data and it worked, just didn’t quite understand why.

  • If possible, analyze and answer your own question so if it occurs with another person I can help. = D

  • Solved your doubt?

Show 2 more comments
No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.