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

Time:01-21

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>

CodePudding user response:

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);
}
  •  Tags:  
  • Related