Javascript code to split JSON data into two datapoints array to bind with stackedbar chart canvasjs?

Question

I have variable data having json data as below:

[
    {
        "BillingMonth":"11",
        "BillingYear":"2016",
        "Volume":"72",
        "BillingMonthName":"November",
        "BillingProduct":"Product1"
    },
    {
        "BillingMonth":"11",
        "BillingYear":"2016",
        "Volume":"617",
        "BillingMonthName":"November",
        "BillingProduct":"Product2"
    },
    {
        "BillingMonth":"12",
        "BillingYear":"2016",
        "Volume":"72",
        "BillingMonthName":"December",
        "BillingProduct":"Product1"
    },
    {
        "BillingMonth":"12",
        "BillingYear":"2016",
        "Volume":"72",
        "BillingMonthName":"December",
        "BillingProduct":"Product2"
    }
]

What I want to split above json data using javascript/jquery and get them stored in two variables data1, data2 having json data as below as result:

 {
    type: "stackedBar",
    legendText: "Product1",
    showInLegend: "true",
    data1: [
        { x: November, y: 72 },
        { x: December, y: 72 },
    ]
  }

and

   {
        type: "stackedBar",
        legendText: "Product2",
        showInLegend: "true",
        data2: [
            { x: November, y: 617 },
            { x: December, y: 72 },
        ]
   }

The above will bind in canvas js stackedbar chart.

Thanks!

Jonathan Portorreal · Answer 1 · 2017-03-03T07:16:38.537

Hey here's a solution I had a lot of fun working on I hope it works well for you. I wasn't sure if you would always have 2 products product1, product2 so I went with a more general approach for n amount of products. The result is in an array format, but you can use es6 destructuring to get the two variables data1 and data2 like I did below:

/*
 * helper function to restructure json in the desired format
 */
function format(obj) {
  var formatted = {
    "type": "stackedBar",
    "legendText": obj.BillingProduct,
    "showInLegend": "true",
    "data": [{
      "x": obj.BillingMonthName,
      "y": obj.Volume
    }]
  }
  return formatted;
}

/*
 *  returns an array of unique products with corresponding BillingMonth/Volume data
 */
function getStackedBarData(data) {
  // transform each obj in orignal array to desired structure
  var formattedData = data.map(format);

  // remove duplicate products and aggregate the data fields
  var stackedBarData =
    formattedData.reduce(function(acc, val){

      var getProduct = acc.filter(function(item){
        return item.legendText == val.legendText
      });

      if (getProduct.length != 0) {
        getProduct[0].data.push(val.data[0]);
        return acc;
      }

      acc.push(val);
      return acc;
    }, []);

  return stackedBarData;

}

var data = [{
  "BillingMonth": "11",
  "BillingYear": "2016",
  "Volume": "72",
  "BillingMonthName": "November",
  "BillingProduct": "Product1"
}, {
  "BillingMonth": "11",
  "BillingYear": "2016",
  "Volume": "617",
  "BillingMonthName": "November",
  "BillingProduct": "Product2"
}, {
  "BillingMonth": "12",
  "BillingYear": "2016",
  "Volume": "72",
  "BillingMonthName": "December",
  "BillingProduct": "Product1"
}, {
  "BillingMonth": "12",
  "BillingYear": "2016",
  "Volume": "72",
  "BillingMonthName": "December",
  "BillingProduct": "Product2"
}]

var dataVars = getStackedBarData(data);

var data1 = dataVars[0];
var data2 = dataVars[1];

console.log(data1);
console.log(data2);

Hope this helps you!

I need the above not in ES6 but in javascript because of syntax issues. — niten146, Mar 03 '17 at 07:12
@niten146 I removed the ES6 and left it as vanilla js, does this fix the syntax issues? — Jonathan Portorreal, Mar 03 '17 at 07:17
How to call the above vanilla js on ajax success?? It seems the synatax error is gone now!!! — niten146, Mar 03 '17 at 07:46
@niten146 ajax has a `success` field you can call the function with the result of the [response](http://stackoverflow.com/questions/3302702/jquery-return-value-using-ajax-result-on-success) — Jonathan Portorreal, Mar 03 '17 at 07:55
can you help me binding the above result in canvas js stackedbar chart for month of november and december?? — niten146, Mar 03 '17 at 09:43

Javascript code to split JSON data into two datapoints array to bind with stackedbar chart canvasjs?

1 Answers1