javascript - GOOGLE CHARTS using implement line charts as dynamic array objects loops

Question

array objects look like this i get data from group by product name date and cost in ruby and store in one varible ...

first array is a name of product and second array data is date and cost. how to combine and show on x as date and y-axis as cost with a product name

how to implement in charts like I have no idea about how to iterate loop in javascript for an array of array data and show in x and y axis using arraydatatable or data table its working fine with highcharts if i pass direct data array my code :

  <script type="text/javascript">
    data2 = [{"name":"productname","data":[["2018-03-01",18.89034482758612],["2018-03-02",18.89268292682916],["2018-03-05",18.89324503311252],["2018-03-07",18.89268292682916],["2018-03-10",18.89377777777766],["2018-03-11",18.893525179856],["2018-03-12",18.89359999999988],["2018-03-13",18.89311475409824],["2018-03-14",18.89311475409824],["2018-03-15",18.89294117647046],["2018-03-16",18.89272727272716],["2018-03-17",18.89387173396662],["2018-03-18",18.89366292134818],["2018-03-19",18.8923456790122]]}] 
          google.charts.load('current', {'packages':['corechart']});
          google.charts.setOnLoadCallback(drawChart);

          function drawChart() {
            var data = google.visualization.arrayToDataTable(data2
              );

            var options = {
              title: 'Company Performance',
              curveType: 'function',
              legend: { position: 'bottom' }
            };

            var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));

            chart.draw(data, options);
          }
        </script>

Answer 1

you'll want to add a data table column for each product,
then add a data table row for each array in product data

may look something like this...

$.each(jsonData, function(productIndex, product) {
  // add product column
  var colIndex = dataTable.addColumn('number', product.name);

  // add product data
  $.each(product.data, function(dataIndex, data) {
    var rowIndex = dataTable.addRow();
    dataTable.setValue(rowIndex, 0, new Date(data[0]));
    dataTable.setValue(rowIndex, colIndex, data[1]);
  });
});

see following working snippet...

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  // create chart
  var container = $('#chart_div').get(0);
  var chart = new google.visualization.LineChart(container);
  var options = {
    chartArea: {
      height: '100%',
      width: '100%',
      top: 64,
      left: 64,
      right: 32,
      bottom: 48
    },
    height: '100%',
    legend: {
      position: 'top'
    },
    pointSize: 4,
    width: '100%'
  };

  // create data table
  var dataTable = new google.visualization.DataTable();
  dataTable.addColumn('date', 'Date');

  // get data
  $.ajax({
    url: 'path to data',
    dataType: 'json'
  }).done(function (jsonData) {
    loadData(jsonData);
  }).fail(function (jqXHR, textStatus, errorThrown) {
    var jsonData = [{"name":"product a","data":[["2018-03-01",18.89034482758612],["2018-03-02",18.89268292682916],["2018-03-05",18.89324503311252],["2018-03-07",18.89268292682916],["2018-03-10",18.89377777777766],["2018-03-11",18.893525179856],["2018-03-12",18.89359999999988],["2018-03-13",18.89311475409824],["2018-03-14",18.89311475409824],["2018-03-15",18.89294117647046],["2018-03-16",18.89272727272716],["2018-03-17",18.89387173396662],["2018-03-18",18.89366292134818],["2018-03-19",18.8923456790122]]},{"name":"product b","data":[["2018-03-01",18.99034482758612],["2018-03-02",18.99268292682916],["2018-03-05",18.99324503311252],["2018-03-07",18.99268292682916],["2018-03-10",18.99377777777766],["2018-03-11",18.993525179856],["2018-03-12",18.99359999999988],["2018-03-13",18.99311475409824],["2018-03-14",18.99311475409824],["2018-03-15",18.99294117647046],["2018-03-16",18.99272727272716],["2018-03-17",18.99387173396662],["2018-03-18",18.99366292134818],["2018-03-19",18.9923456790122]]}];
    loadData(jsonData);
  });

  // load json data
  function loadData(jsonData) {
    $.each(jsonData, function(productIndex, product) {
      // add product column
      var colIndex = dataTable.addColumn('number', product.name);

      // add product data
      $.each(product.data, function(dataIndex, data) {
        var rowIndex = dataTable.addRow();
        dataTable.setValue(rowIndex, 0, new Date(data[0]));
        dataTable.setValue(rowIndex, colIndex, data[1]);
      });
    });
    drawChart();
  }

  // draw chart
  $(window).resize(drawChart);
  function drawChart() {
    chart.draw(dataTable, options);
  }
});

html, body {
  height: 100%;
  margin: 0px 0px 0px 0px;
  overflow: hidden;
  padding: 0px 0px 0px 0px;
}

.chart {
  height: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div class="chart" id="chart_div"></div>