D3条形图故障排除

Question

I have a database with 5 columns, ID, customerName, dateYear, dateMonth, and dateDay. The date columns are added into the database when the user sends the form. So for example if a user sent the form today the 3 columns would have 2016, June, and 7. I want to make a D3 bar chart that can pull this information and display how many forms were sent each month/year. I have a list of checkboxes in HTML for the admin to select one or more months, and a year.

        <input type="submit" name="monthlyReport" value="Generate a Monthly Report for:" />
        <br>
        <input type="checkbox" value="January" name="monthList[]"/>January
        <br>
        <input type="checkbox" value="February" name="monthList[]"/>February

etc...

<select name="selyear1">
    <option value="2016">2016</option>
    <option value="2017">2017</option>
    <option value="2018">2018</option>
    <option value="2019">2019</option>
    <option value="2020">2020</option>
</select>

Here is my PHP code that takes the user input and turns it into a query:

$monthList = array("January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December");
$yearList = array("2016", "2017", "2018", "2019", "2020");

$monthlyReport = isset($_POST["monthlyReport"]) ? $_POST["monthlyReport"] : "";
$monthList = array();
$monthList = isset($_POST["monthList"]) ? $_POST["monthList"] : "";
$selectedYear = isset($_POST["selyear1"]) ? $_POST["selyear1"] : "";
if(isset($monthlyReport) && !empty($monthList) && in_array($selectedYear, $yearList)) {
    foreach ($monthList as $month){ 
        if (in_array($month, $monthList)) {

            $stmt = $conn->prepare("SELECT dateYear, dateMonth FROM just_ink WHERE dateMonth = :month AND dateYear= :year");
            $stmt->execute(array(":month" => $month, ":year"=> $selectedYear));
            $result[] = $stmt->fetchAll(PDO::FETCH_ASSOC);

        }
    }
}
var_dump($result);

$result will dump this:

array(2) { [0]=> array(1) { [0]=> array(2) { ["dateYear"]=> string(4) "2016" ["dateMonth"]=> string(7) "January" } } [1]=> array(2) { [0]=> array(2) { ["dateYear"]=> string(4) "2016" ["dateMonth"]=> string(4) "June" } [1]=> array(2) { ["dateYear"]=> string(4) "2016" ["dateMonth"]=> string(4) "June" } } }

So how exactly do I turn this result into the D3 bar chart? I've look at the d3Noob tips and tricks but this is a more advanced case I believe. Thanks ahead of time for the responses!

Answer 1

If I understand correctly you create an array with the desired values.

$array = array( array("2016", "January"),
                array("2016", "February"),
                array("2016", "February"),
                array("2016", "February"),
                array("2016", "March"),
                array("2016", "March"),
                array("2016", "June"),
                array("2016", "June")
              );

echo json_encode($array);
//[["2016","January"],["2016","February"],["2016","February"],["2016","February"],["2016","March"],["2016","March"],["2016","June"],["2016","June"]]

I would expose an endpoint which would return this json and then use it within my script, so you may be able to make an async call and don't stop the rendering of your page in order to fetch/wait for data.

If we use the json returned by the previous snippet we can call d3.json and modify the data in order to create a bar chart.

d3.json("data.json", function(error, data) {
  var nested_data = d3.nest()
    .key(function(d) {
      return d[1];
    })
    .rollup(function(leaves) {
      return leaves.length;
    })
    .entries(data);
    console.log(nested_data);
    //Object {key: "January", values: 1}
    //Object {key: "February", values: 3}
    //Object {key: "March", values: 2}
    //Object {key: "June", values: 2}


  x.domain(nested_data.map(function(d) { // Set x domain by keys (Month Name)
    return d.key;
  }));
  y.domain([0, d3.max(nested_data, function(d) { // Set y domain by finding max value (Month count)
    return d.values;
  })]);

  svg.append("g") // Append x-axis
    .attr("class", "x axis")
    .attr("transform", "translate(0," + height + ")")
    .call(xAxis);

  svg.append("g") // Append y-axis
    .attr("class", "y axis")
    .call(yAxis)
    .append("text")
    .attr("transform", "rotate(-90)")
    .attr("y", 6)
    .attr("dy", ".71em")
    .style("text-anchor", "end")
    .text("Frequency");

  svg.selectAll(".bar") // Join our data
    .data(nested_data) 
    .enter() // For each value do the following
    .append("rect") 
    .attr("class", "bar")
    .attr("x", function(d) {
      return x(d.key);
    })
    .attr("width", x.rangeBand())
    .attr("y", function(d) {
      return y(d.values);
    })
    .attr("height", function(d) {
      return height - y(d.values);
    });
}

You can find a working plnkr with the code here: http://plnkr.co/edit/Jin12g7dVdCq2eu46FnX?p=preview