Подготовка данных в Google Bar Chart - группа по столбцу

Question

Я пытаюсь создать диаграмму Google из приведенных ниже данных.

 Year  Product Value 
     2015   A  10 
     2015   B  20 
     2016   C  30 
     2016   D  40 

Это правильные данные для моей диаграммы google, используя функцию arrayToDataTable, но не получая желаемого результата. Я хочу Продукт как легенды, Год как значение xAxis и значение должны определять бары. Благодаря

Answer 1

каждый тип диаграммы имеет определенный data format вы можете проверить

обычно, для большинства типов диаграмм, все столбцы после первого должно быть числом

, если вы не используете аннотации, всплывающие подсказки, или некоторые другие роли

как таковые, данные должны были бы выглядеть так ...

 ['Year', 'A', 'B', 'C', 'D'], 
     ['2015', 10, 20, null, null], 
     ['2016', null, null, 30, 40], 

см следующий рабочий фрагмент кода ...

google.charts.load('current', { 
 
    callback: function() { 
 
    var data = google.visualization.arrayToDataTable([ 
 
     ['Year', 'A', 'B', 'C', 'D'], 
 
     ['2015', 10, 20, null, null], 
 
     ['2016', null, null, 30, 40], 
 
    ]); 
 

 
    var chart = new google.visualization.BarChart(document.getElementById('chart_div')); 
 
    chart.draw(data); 
 
    }, 
 
    packages: ['corechart'] 
 
});

<script src="https://www.gstatic.com/charts/loader.js"></script> 
 
<div id="chart_div"></div>

EDIT

перенести данные с сервера SQL в формат предпочитаемой диаграммы,
первым создать представление данных , с расчетными столбцами для каждого уникального продукта

затем агрегировать представление, группируя год, используя метод group()

использовать сводную таблицу данных, чтобы нарисовать диаграмму

см следующий рабочий фрагмент кода ...

google.charts.load('current', { 
 
    callback: function() { 
 
    // raw table data 
 
    var data = google.visualization.arrayToDataTable([ 
 
     ['Year', 'Product', 'Value'], 
 
     [2015, 'A', 10], 
 
     [2015, 'B', 20], 
 
     [2016, 'C', 30], 
 
     [2016, 'D', 40] 
 
    ]); 
 

 
    // format year as string 
 
    var formatYear = new google.visualization.NumberFormat({ 
 
     pattern: '0000' 
 
    }); 
 
    formatYear.format(data, 0); 
 

 
    // create data view 
 
    var view = new google.visualization.DataView(data); 
 

 
    // init column arrays 
 
    var aggColumns = []; 
 

 
    // use formatted year as first column 
 
    var viewColumns = [{ 
 
     calc: function (dt, row) { 
 
     return dt.getFormattedValue(row, 0); 
 
     }, 
 
     label: data.getColumnLabel(0), 
 
     type: 'string' 
 
    }]; 
 

 
    // build view & agg column for each product 
 
    data.getDistinctValues(1).forEach(function (product, index) { 
 
     // add view column 
 
     viewColumns.push({ 
 
     calc: function (dt, row) { 
 
      if (dt.getValue(row, 1) === product) { 
 
      return dt.getValue(row, 2); 
 
      } 
 
      return null; 
 
     }, 
 
     label: product, 
 
     type: 'number' 
 
     }); 
 

 
     // add agg column 
 
     aggColumns.push({ 
 
     aggregation: google.visualization.data.sum, 
 
     column: index + 1, 
 
     label: product, 
 
     type: 'number' 
 
     }); 
 
    }); 
 

 
    // set view columns 
 
    view.setColumns(viewColumns); 
 

 
    // agg view by year 
 
    var group = google.visualization.data.group(
 
     view, 
 
     [0], 
 
     aggColumns 
 
    ); 
 

 
    // draw chart 
 
    var chart = new google.visualization.BarChart(document.getElementById('chart_div')); 
 
    chart.draw(group); 
 
    }, 
 
    packages: ['corechart'] 
 
});

<script src="https://www.gstatic.com/charts/loader.js"></script> 
 
<div id="chart_div"></div>