How popular google line chart Charts with JSON

Asked

Viewed 4,250 times

1

I am trying to popular a line google-Harts chart, it will be quite simple just the client name on the x axis and the amount of open calls on the y axis, I am returning the following JSON array

[{"Name":"Customer Test","Tickets":6}]

to populate it I’m using the following: 

google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
    var jsonData = $.ajax({
        url: "/client/ajax",
        dataType: "json",
        async: false
    }).responseText;

    var data = new google.visualization.DataTable(jsonData);
    var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
    chart.draw(data, {width: 400, height: 240});
}

But he returns telling me that there is no column =/, I’m using google Harts for the first time, I’m Noob :(.

Can someone give me a light? Thanks in advance.

javascript json google-charts

3 answers

1

Take a look at this example that I took right from the line Chart. Ideally, you could work with an array to post columns to Chart. It’s easier and you get many examples.

google.charts.load('current', {packages: ['corechart', 'line']});
google.charts.setOnLoadCallback(drawBackgroundColor);

function drawBackgroundColor() {
      var data = new google.visualization.DataTable();
      data.addColumn('string', 'X');
      data.addColumn('number', 'Dogs');

      data.addRows([
        ["a", 0],   ["b", 10],  ["c", 23],
      ]);

      var options = {
        hAxis: {
          title: 'Time'
        },
        vAxis: {
          title: 'Popularity'
        },
        backgroundColor: '#f1f8e9'
      };

      var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
      chart.draw(data, options);
    }
  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  <div id="chart_div"></div>

0

Something like that:

<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() {
      //montando o array com os dados
        var data = google.visualization.arrayToDataTable([
          ['Nome', 'Tickets'],
          ['Jose',  1000],
          ['Pedro',  1170],
          ['Joao',  660],
          ['Alberto',  1030]
        ]);
        //opções para o gráfico linhas
        var options1 = {
          title: 'Tickets x Tecnico',
          hAxis: {title: 'Tecnico',  titleTextStyle: {color: 'red'}}//legenda na horizontal
        };
        //instanciando e desenhando o gráfico linhas
        var linhas = new google.visualization.LineChart(document.getElementById('linhas'));
        linhas.draw(data, options1);

      }
    </script>
  </head>
  <body>    
    <div id="linhas" style="width: 900px; height: 500px;"></div>
  </body>
</html>

Source: http://www.devmedia.com.br/introducao-a-google-chart-tools/26453

0


I did it this way guys

google.charts.load('current', {packages: ['corechart']});
google.charts.setOnLoadCallback(drawChartTicketsByClient);

function drawChartTicketsByClient() {
    $.ajax({
        url: "/client/ajax",
        dataType: "JSON",
        success: function (jsonData) {
            var dataArray = [
                ['Name', 'Tickets'],
            ];

            for (var i = 0; i < jsonData.length; i++) {
                var row = [jsonData[i].Name, jsonData[i].Tickets];
                dataArray.push(row);
            }
            var options = {
                title: 'Tickets por cliente',
                curveType: 'function',
                series: {0: {"color": '#57c8f2'}}
            };

            var data = google.visualization.arrayToDataTable(dataArray);

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

Browser other questions tagged javascript json google-charts

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