How to popular line chart of google charts with JSON

Question

How to popular line chart of google charts with JSON

Navigation

#1 by (1 votes)
#2 by (0 votes)
#3 by (0 votes)

0

I'm trying to pop up a graph of google-line charts, it will be quite simple just the client name on the x-axis and the amount of open calls on the y-axis, I'm returning the following JSON array

[{"Name": "Test Client", "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 it returns me saying that it has no column = /, I'm using google charts for the first time, I'm noob :(.

Can anyone give me a light? Thank you in advance.

javascript json google-charts

asked by anonymous 29.07.2016 / 14:54

3 answers

1

Take a look at this example I took straight from the line chart page. Ideally you should work with an array to post the pro chart columns. It gets easier and you get lots of 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><divid="chart_div"></div>

29.07.2016 / 15:26

0

Something like this:

<html>
  <head>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script><scripttype="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: link

29.07.2016 / 15:29

NavBar effect similar to Twitter Difference between two arrays with TypeScript or ES6

score 0 · Accepted Answer

I made the following people

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);
        }
    });
}