title: JSON data structure for D3jS report and D3jS code
body: <p>I am trying to achieve the below report from JSON data</p>
  
  <p><img src="https://i.stack.imgur.com/fNErR.png" alt="enter image description here"></p>
  
  <pre><code>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}]
  </code></pre>
  
  <p>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.</p>
  
  <p>I am using the below code for generating the report. </p>
  
  <pre><code>&lt;div id="ReportContent" runat="server" style="border: 1px solid #58595d; border: 1px solid rgba(88, 89, 93, .3);"&gt;&lt;svg&gt;&lt;/svg&gt;&lt;/div&gt;    
  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; });
              }
  </code></pre>