D3 Bar Chart Устранение неполадок

Question

У меня есть база данных с 5 столбцами, ID, customerName, dateYear, dateMonth и dateDay. Столбцы даты добавляются в базу данных, когда пользователь отправляет форму. Так, например, если пользователь отправил форму сегодня, у 3 столбцов будет 2016, июнь и 7. Я хочу сделать диаграмму D3, которая может вытащить эту информацию и отобразить, сколько форм было отправлено каждый месяц/год. У меня есть список флажков в HTML для администратора, чтобы выбрать один или несколько месяцев и год.

 <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 

и т.д ...

<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> 

Вот мой PHP код, который принимает пользовательский ввод и превращает его в запросе:

$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); 

$ Результат будет дамп это:

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" } } } 

Итак, как именно я поворачиваю этот результат в гистограмму D3? Я смотрю на советы и трюки d3Noob, но это более сложный случай, который я считаю. Спасибо заранее за ответы!

Answer 1

Если я правильно понял, вы создаете массив с требуемыми значениями.

$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"]] 

Я разоблачит конечную точку, которая будет возвращать этот json, а затем использовать его в моем сценарии, так что вы можете быть в состоянии сделать вызов асинхронной и не остановить рендеринг вашей страницы для того, чтобы принести/ждать данных.

Если мы используем json, возвращенный предыдущим фрагментом, мы можем позвонить d3.json и изменить данные, чтобы создать гистограмму.

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); 
    }); 
} 

Вы можете найти рабочую plnkr с кодом здесь: http://plnkr.co/edit/Jin12g7dVdCq2eu46FnX?p=preview