How to pass values of an Ajax request to Google Chart?

Asked

Viewed 2,022 times

6

I started messing with Google Chart today, and I can make the chart by putting the values in hand outside the requisicao ajax.

Only that my application needs this data coming from a database and I’m not sure how to pass them correctly to the Google Chart array.

NOTE: I don’t know if within the ajax code would work this Function drawChart...

Follow my code with the attempt to pass parameters:

$(document).on("change", "#cbExercicio", function () {
    var caminho = "/EBITDA/AjaxObterEBITDA";

    if ($(this).val() != 0) {
        var num_exercicio = $(this).val();
        $.ajax({
            type: "POST",
            url: caminho,
            data: "{ 'num_exercicio': '" + num_exercicio + "'}",
            dataType: 'json',
            contentType: "application/json; charset=utf-8",
            success: function (resp) {
                if (resp.Num_Periodos == 6) {
                    google.load("visualization", "1", { packages: ["corechart"] });

                    google.setOnLoadCallback(drawChart(resp));

                    function drawChart(resp) {
                        var data = google.visualization.arrayToDataTable([
                          ['Year', 'Sales', 'Expenses'],
                          ['1º Bimestre', resp.Meta1, resp.Real1],
                          ['2º Bimestre', resp.Meta2, resp.Real2],
                          ['3º Bimestre', resp.Meta3, resp.Real3],
                          ['4º Bimestre', resp.Meta4, resp.Real4],
                          ['5º Bimestre', resp.Meta5, resp.Real5],
                          ['6º Bimestre', resp.Meta6, resp.Real6]
                        ]);

                        var options = {
                            title: 'Company Performance',
                            hAxis: { title: 'Year', titleTextStyle: { color: 'red' } }
                        };

                        var chart = new google.visualization.ColumnChart(document.getElementById('grafico4'));
                        chart.draw(data, options);
                    }

                }
          }
     });
   }
});

The screen is all blank when I try to do so. Can not debug because it is inside the ajax.

The original example of the graph is this:

    <html>
      <head>
        <script type="text/javascript" src="https://www.google.com/jsapi"></script>
        <script type="text/javascript">
          google.load("visualization", "1", {packages:["corechart"]});
          google.setOnLoadCallback(drawChart);
          function drawChart() {
            var data = google.visualization.arrayToDataTable([
              ['Year', 'Sales', 'Expenses'],
              ['2004',  1000,      400],
              ['2005',  1170,      460],
              ['2006',  660,       1120],
              ['2007',  1030,      540]
            ]);

            var options = {
              title: 'Company Performance',
              hAxis: {title: 'Year', titleTextStyle: {color: 'red'}}
            };

            var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
            chart.draw(data, options);
          }
        </script>
      </head>
      <body>
        <div id="chart_div" style="width: 900px; height: 500px;"></div>
      </body>
    </html>

I think the error is in one of those passages: 

google.load("visualization", "1", { packages: ["corechart"] });
google.setOnLoadCallback(drawChart(resp));    
function drawChart(resp) {

When I comment on the part of google Charts happens everything normal. But when the html page discovers no source code and the whole page appears blank

javascript jquery ajax google-charts

  • Joao, I deleted my answer and added your comment here in the question. I think the problem may be the syntax of the google Chart API. I don’t think the problem is the code being inside the ajax function. One thing that occurs to me is whether the first field of the data array can be text ('1º Bimestre') and not number, ie 2003, 2004 as in the example...

  • All right, thank you so much for trying to help @Sergio

1 answer

3


I was able to find the problem and solve the same.

Follows correct code:

Prior to the request ajax initialize the object json and call the load google:

var resp: [];
google.load("visualization", "1", { packages: ["corechart"] });

After requisition ajax only calling the function with the json as a parameter:

$(document).on("change", "#cbExercicio", function () {
  var caminho = "/EBITDA/AjaxObterEBITDA";

  if ($(this).val() != 0) {
    var num_exercicio = $(this).val();

    $.ajax({
      type: "POST",
      url: caminho,
      data: "{ 'num_exercicio': '" + num_exercicio + "'}",
      dataType: 'json',
      contentType: "application/json; charset=utf-8",
      success: function (resp) {
        if (resp.Num_Periodos == 6) {
          drawChart(resp);
        }
      }
    });
  }
});

That part of the code was left out and last:

function drawChart(resp) {
  var data = google.visualization.arrayToDataTable([
    ['Year', 'Sales', 'Expenses'],
    ['1º Bimestre', resp.Meta1, resp.Real1],
    ['2º Bimestre', resp.Meta2, resp.Real2],
    ['3º Bimestre', resp.Meta3, resp.Real3],
    ['4º Bimestre', resp.Meta4, resp.Real4],
    ['5º Bimestre', resp.Meta5, resp.Real5],
    ['6º Bimestre', resp.Meta6, resp.Real6]
  ]);

  var options = {
    title: 'Company Performance',
    hAxis: { title: 'Year', titleTextStyle: { color: 'red' } }
  };

  var chart = new google.visualization.ColumnChart(document.getElementById('grafico4'));
  chart.draw(data, options);
}

Browser other questions tagged javascript jquery ajax google-charts

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