Upon further investigation, the viable solution I found it to be to get that json object to 'look' like the data format provided in the stacked grouped chart example. This might not be the ideal way to get there, but it should get the job done.

What I did was to use a bunch of for .. in loops to build that object like in the initial example:

...cut-out version bellow...

itemLookup= data[0],
years = d3.keys(itemLookup.year),
items = d3.keys(itemLookup.year[years[0]]),
columnHeaders = [],
innerColumns = (function(){
  var result = {};
  for(var i = 0, ii = years.length; i<ii; i++){
    var holder = [];
    for(var j = 0, jj = items.length; j<jj; j++){
      result[years[i]] = holder;
  return result;

From here I was able to get to the initial example start point, where a object and an array as passed in as hard-coded, and used as a comparison guide that builds up the data; somewhere down the line in a foreach loop:

data.forEach(function(d, i){
  var tempData = {},
  tempData.monthName = d.month;

  //functionality to be implemented
  if(d.month === stripedPattern.monthName){
  for(var key in d.year){
    if(curYear != key){
      curYear = key;
      tempData['totalValue-'+curYear] = 0;
    var holder = d.year[key];
    for(var item in holder){
      tempData[item+'-'+key] = holder[item];
      tempData['totalValue-'+curYear] += parseInt(holder[item]);

  //this obj holds the correct data, similar to what the example provided
  dataRebuild.splice(i, 0, tempData);

And from here on, the idea stays the same as in the original example, as I got my data format to look like that data from the example, and be able to implement it.

Again if there are(most likely there are) some other more elegant solutions to reach to that endpoint, please share them around here.

Check out the 'working' demo here (work in progress)

Related Query

More Query from same tag