JSON data structure for D3jS report and D3jS code - json

Question

I am trying to achieve the below report from JSON data
var data = [{"MonthYearShortName":"2014-09-13T00:00:00","Product":"Deposits","Actual":330393232.5,"Forecast":495589848.75,"Target":495589848.75},{"MonthYearShortName":"2014-09-13T00:00:00","Product":"Fee Based","Actual":111868709.42,"Forecast":167803064.13,"Target":167803064.13},{"MonthYearShortName":"2014-09-13T00:00:00","Product":"Lending","Actual":18146873.33,"Forecast":27220309.995,"Target":27220309.995}]
I am not sure if this is the right data structure. If I am picking the wrong structure to create the report, some help would be great.
I am using the below code for generating the report.
<div id="ReportContent" runat="server" style="border: 1px solid #58595d; border: 1px solid rgba(88, 89, 93, .3);"><svg></svg></div>
function ChartCreate() {
var color = d3.scale.linear()
.domain([0, d3.max(data, function (d) { return d.Target; })]) //change
.range(["#f3c40e", "#7d6507"]);
var width = 420,
margin = 100, //add
barHeight = 20;
var x = d3.scale.linear()
.domain([0, d3.max(data, function(d) { return d.Actual; })]) //change
.range([0, width]);
var chart = d3.select('#ReportContent_ReportContent svg')
.attr("width", width + margin)
.attr("height", barHeight * data.length);
var bar = chart.selectAll("g")
.data(data, function(d) { return d.Actual; })
.enter().append("g")
.attr("transform", function(d, i) { return "translate(0," + i * barHeight + ")"; });
bar.append("rect")
.attr("width", function(d) { return x(d.Actual); }) //change
.attr("height", barHeight) //change
.attr("fill", function(d) { return color(d.Actual); }); //change
bar.append("text")
.attr("text-anchor", "start") //add
.attr("x", function(d) { return x(d.Actual); }) //change
.attr("y", barHeight / 2)
.attr("dy", ".35em")
.text(function(d) { return d.Product; });
}