GOOGLE CHARTS using implement line charts as dynam

问题:

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>

<script type="text/javascript">
      google.charts.load('current', {'packages':['corechart']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {
        var data = google.visualization.arrayToDataTable(data2);
    // how to iterate loop for get all data from one varible  
        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>

回答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>

---

EDIT

for simple array data, it's easier, as for a pie chart...

    // create data table
    var dataTable = new google.visualization.DataTable();
    dataTable.addColumn('string', 'Product');
    dataTable.addColumn('number', 'Value');

    $.each(jsonData, function(productIndex, product) {
      // add product data
      dataTable.addRow([
        product[0],
        product[1],
      ]);
    });

---

see following working snippet...

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  // get column 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, 'Column');
  });

  // get pie data
  $.ajax({
    url: 'path to data',
    dataType: 'json'
  }).done(function (jsonData) {
    loadData(jsonData);
  }).fail(function (jqXHR, textStatus, errorThrown) {
    var jsonData = [["product1",3.6126719999999977],["product2",6.827597999999999],["product2",1008.0]];
    loadData(jsonData, 'Pie');
  });

  // load json data
  function loadData(jsonData, chartType) {
    // create data table
    var dataTable = new google.visualization.DataTable();

    switch (chartType) {
      case 'Column':
        // add date column
        dataTable.addColumn('date', 'Date');

        $.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]);
          });
        });
        break;

      case 'Pie':
        // add product columns
        dataTable.addColumn('string', 'Product');
        dataTable.addColumn('number', 'Value');

        $.each(jsonData, function(productIndex, product) {
          // add product data
          dataTable.addRow([
            product[0],
            product[1],
          ]);
        });
        break;
    }

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

  // save charts for redraw
  var charts = {};
  var options = {
    Column: {
      chartArea: {
        height: '100%',
        width: '100%',
        top: 64,
        left: 64,
        right: 32,
        bottom: 48
      },
      height: '100%',
      legend: {
        position: 'top'
      },
      pointSize: 4,
      width: '100%'
    },
    Pie: {
      height: '100%',
      width: '100%'
    }
  };

  // draw chart
  function drawChart(chartType, dataTable) {
    if (!charts.hasOwnProperty(chartType)) {
      charts[chartType] = new google.visualization.ChartWrapper({
        chartType: chartType + 'Chart',
        containerId: 'chart-' + chartType.toLowerCase(),
        options: options[chartType]
      });
    }
    charts[chartType].setDataTable(dataTable);
    charts[chartType].draw();
  }
});

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

.chart {
  display: inline-block;
  height: 100%;
  width: 49%;
}

<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-column"></div>
<div class="chart" id="chart-pie"></div>

---

EDIT 2

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  // get data 0
  $.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, '0', 'Column');
  });

  // get data 1
  $.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, '1', 'Column');
  });

  // get data 2
  $.ajax({
    url: 'path to data',
    dataType: 'json'
  }).done(function (jsonData) {
    loadData(jsonData);
  }).fail(function (jqXHR, textStatus, errorThrown) {
    var jsonData = [["product1",3.6126719999999977],["product2",6.827597999999999],["product2",1008.0]];
    loadData(jsonData, '2', 'Pie');
  });

  // load json data
  function loadData(jsonData, id, chartType) {
    // create data table
    var dataTable = new google.visualization.DataTable();

    switch (chartType) {
      case 'Column':
        // add date column
        dataTable.addColumn('date', 'Date');

        $.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]);
          });
        });
        break;

      case 'Pie':
        // add product columns
        dataTable.addColumn('string', 'Product');
        dataTable.addColumn('number', 'Value');

        $.each(jsonData, function(productIndex, product) {
          // add product data
          dataTable.addRow([
            product[0],
            product[1],
          ]);
        });
        break;
    }

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

  // save charts for redraw
  var charts = {};
  var options = {
    Column: {
      chartArea: {
        height: '100%',
        width: '100%',
        top: 64,
        left: 64,
        right: 32,
        bottom: 48
      },
      height: '100%',
      legend: {
        position: 'top'
      },
      pointSize: 4,
      width: '100%'
    },
    Pie: {
      height: '100%',
      width: '100%'
    }
  };

  // draw chart
  function drawChart(id, chartType, dataTable) {
    if (!charts.hasOwnProperty(id)) {
      charts[id] = new google.visualization.ChartWrapper({
        chartType: chartType + 'Chart',
        containerId: 'chart-' + id,
        options: options[chartType]
      });
    }
    charts[id].setDataTable(dataTable);
    charts[id].draw();
  }
});

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

.chart {
  display: inline-block;
  height: 100%;
  width: 32%;
}

<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-0"></div>
<div class="chart" id="chart-1"></div>
<div class="chart" id="chart-2"></div>

---

EDIT 3

the date issue mentioned in the comment has to do with the way javascript parses dates from strings,
see this answer --> Why does Date.parse give incorrect results?

depending on the format used, it may be parsed to local time or UTC

run the following snippet, notice how the results are different for each date printed in the console...

console.log('2018-03-01 = ', new Date('2018-03-01'));
console.log('03/01/2018 = ', new Date('03/01/2018'));

to correct this issue, use this format --> 03/01/2018

see following working snippet...

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  // save charts for redraw
  var charts = {};
  var options = {
    Column: {
      chartArea: {
        height: '100%',
        width: '100%',
        top: 64,
        left: 64,
        right: 32,
        bottom: 48
      },
      height: '100%',
      legend: {
        position: 'top'
      },
      pointSize: 4,
      width: '100%'
    },
    Pie: {
      height: '100%',
      width: '100%'
    }
  };

  // get data
  var jsonData = [{"name":"product a","data":[["03/01/2018",18.89034482758612],["03/02/2018",18.89268292682916],["03/05/2018",18.89324503311252],["03/07/2018",18.89268292682916],["03/10/2018",18.89377777777766],["03/11/2018",18.893525179856],["03/12/2018",18.89359999999988],["03/13/2018",18.89311475409824],["03/14/2018",18.89311475409824],["03/15/2018",18.89294117647046],["03/16/2018",18.89272727272716],["03/17/2018",18.89387173396662],["03/18/2018",18.89366292134818],["03/19/2018",18.8923456790122]]},{"name":"product b","data":[["03/01/2018",18.89034482758612],["03/02/2018",18.89268292682916],["03/05/2018",18.89324503311252],["03/07/2018",18.89268292682916],["03/10/2018",18.89377777777766],["03/11/2018",18.893525179856],["03/12/2018",18.89359999999988],["03/13/2018",18.89311475409824],["03/14/2018",18.89311475409824],["03/15/2018",18.89294117647046],["03/16/2018",18.89272727272716],["03/17/2018",18.89387173396662],["03/18/2018",18.89366292134818],["03/19/2018",18.8923456790122]]}];
  loadData(jsonData, '0', 'Column');

  // load json data
  function loadData(jsonData, id, chartType) {
    // create data table
    var dataTable = new google.visualization.DataTable();

    switch (chartType) {
      case 'Column':
        // add date column
        dataTable.addColumn('date', 'Date');

        $.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]);
          });
        });
        break;

      case 'Pie':
        // add product columns
        dataTable.addColumn('string', 'Product');
        dataTable.addColumn('number', 'Value');

        $.each(jsonData, function(productIndex, product) {
          // add product data
          dataTable.addRow([
            product[0],
            product[1],
          ]);
        });
        break;
    }

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

  // draw chart
  function drawChart(id, chartType, dataTable) {
    if (!charts.hasOwnProperty(id)) {
      charts[id] = new google.visualization.ChartWrapper({
        chartType: chartType + 'Chart',
        containerId: 'chart-' + id,
        options: options[chartType]
      });
    }
    charts[id].setDataTable(dataTable);
    charts[id].draw();
  }
});

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-0"></div>