Search code examples
jquerychartsgoogle-visualization

How can I use a Array to make a scatter chart from google?


I have some problems with creating a chart because of the "type" of the array, for example in var data = ... in the examples they use [12, 30], [14, 98] but I wanted to use a array defined like I have in the code for these values and I dont know how I can to that.

$(document).ready(function() {
  console.log("ready!");

  ko.applyBindings(new vm());

  var k = 0;
  var Arraydata1 = [];
  var Arraydata2 = [];

  console.log(indice)
  $.ajax({
    url: 'http://192.168.160.58/Formula1/api/Statistics/Driver?id=' + indice,
    contentType: "application/json",
    dataType: 'json',
    success: function(data) {
      for (k = 0; k < data.Career.length; k++) {

        Arraydata1.push(data.Career[k].Year);
        Arraydata2.push(data.Career[k].Position);

      }
      drawChart(Arraydata1, Arraydata2)
    },
  });

});

function drawChart(Arraydata1, Arraydata2) {
  var data = google.visualization.arrayToDataTable([
    ['Price', 'Size'],
    // dont know what to put here
  ]);
  // Set Options
  var options = {
    title: 'House Prices vs. Size',
    hAxis: {
      title: 'Square Meters'
    },
    vAxis: {
      title: 'Price in Millions'
    },
    legend: 'none'
  };
  // Draw
  var chart = new google.visualization.ScatterChart(document.getElementById('myChart'));
  chart.draw(data, options);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>


Solution

  • combine the row values from Career into a single array -- Arraydata

    Arraydata.push([data.Career[k].Year, data.Career[k].Position]);
    

    pass that array to draw chart

    drawChart(Arraydata);
    

    then create the data table with the necessary column headings,
    and use the addRows method.

    // create data table
    var data = new google.visualization.DataTable();
    data.addColumn('number', 'Price');
    data.addColumn('number', 'Size');
    data.addRows(Arraydata);
    

    see following snippet...

    $(document).ready(function() {
      console.log("ready!");
    
      ko.applyBindings(new vm());
    
      var k = 0;
      var Arraydata = [];
    
      console.log(indice)
      $.ajax({
        url: 'http://192.168.160.58/Formula1/api/Statistics/Driver?id=' + indice,
        contentType: "application/json",
        dataType: 'json',
        success: function(data) {
          for (k = 0; k < data.Career.length; k++) {
    
            Arraydata.push([data.Career[k].Year, data.Career[k].Position]);
    
          }
          drawChart(Arraydata);
        },
      });
    
    });
    
    function drawChart(Arraydata) {
      // create data table
      var data = new google.visualization.DataTable();
      data.addColumn('number', 'Price');
      data.addColumn('number', 'Size');
      data.addRows(Arraydata);
    
      // Set Options
      var options = {
        title: 'House Prices vs. Size',
        hAxis: {
          title: 'Square Meters'
        },
        vAxis: {
          title: 'Price in Millions'
        },
        legend: 'none'
      };
      // Draw
      var chart = new google.visualization.ScatterChart(document.getElementById('myChart'));
      chart.draw(data, options);
    }