d3.js - JSON data structure for D3jS report and D3jS code -

i trying achieve below report 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 not sure if right data structure. if picking wrong structure create report, great.

i using below code generating 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," + * 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; });             }