1

I want to create a stacked column chart with a JSON data source and use an item in my JSON data to group by as a field. I haven't found any resources on how to do this, and I have no JS experience.

I know how to join multiple data sources if you know the fields you'll be grouping by. But in this case the Client fields are dynamic.

This stack question is similar to what I want to accomplish: JSON format for Google chart stacked column

My data comes in like the following:

[["2017/06/25", "Some Client A", 805.0], ["2017/07/02", "Some Client B", 955.0], ["2017/07/09", "Some Client C", 805.0]]

So far I have the below. Which obviously doesn't work: 

function drawStacked() {
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Week');
  data.addColumn('string', 'client');
  data.addColumn('number', 'Hours');
  data.addRows( {{ sbl1|safe }} );
Matt
  • 33
  • 2
  • 7
  • see the __EDIT__ in [this answer](https://stackoverflow.com/a/40367600/5090771)... – WhiteHat Jun 21 '17 at 14:48
  • @WhiteHat Thanks for the response. Now I need to to figure out how to serialize my data into that format. – Matt Jun 22 '17 at 12:51

1 Answers1

0

the data shown in the post should work fine with the code from the other answer,
see following working snippet... 

google.charts.load('current', {
  callback: function () {
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Week');
    data.addColumn('string', 'client');
    data.addColumn('number', 'Hours');
    data.addRows([["2017/07/09", "Some Client A", 805.0], ["2017/07/09", "Some Client B", 955.0], ["2017/07/09", "Some Client C", 805.0]]);
  
    // create data view
    var view = new google.visualization.DataView(data);

    // init column arrays
    var aggColumns = [];
    var viewColumns = [{
      calc: function (dt, row) {
        return dt.getFormattedValue(row, 0);
      },
      label: data.getColumnLabel(0),
      type: 'string'
    }];

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

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

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

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

    // draw chart
    var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
    chart.draw(group, {
      isStacked: true
    });
  },
  packages: ['corechart']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
WhiteHat
  • 59,912
  • 7
  • 51
  • 133