php - How do I re-render a chart in d3.js using an on click event (dashboard building)? -

i’m developing interactive school report card local nonprofit using bootstrap, php, mysql , d3.js.

i have no problem getting d3 charts render (example) once user has selected school (3 separate bar charts render onscreen when user submits school selection form). executing queries, encoding them json in php/mysql, using php include function (on 3 separate occasions) reference 3 separate javascript files contain d3 code renders charts. reference data d3 pulling in populate graphs nested inside of php tags inside each of these javascript files. again, no issues here, charts render they’re supposed , good.

the issue i’d users able able change options on 1 of charts , have chart re-render new data when button in form clicked.

one of charts rendered of 4th grade math test score data state standardized test selected school. there other test subjects (english, science , social studies) within 4th grade i’d users able view; additionally, same 4 subjects tested in grades 3 , grades 5 – 8. these options other tests , subjects appear in 2 select boxes appear in form located in div appears above test score graph’s div.

i use ajax on change event handlers (raw javascript) trigger mysql query selected options (subject , grade level; school pulled hidden form element contains school id selected school) every time user’s subject/grade level selection changes. json last query written value of element appears in same form subject/grade level select boxes. php/html form (i'm using 1 on change handler in code below):

echo "<form name='testselect' method=get>"; echo "<table>     <tbody>         <tr>             <td>";                 echo "<select name='testtype' id='ttype' onchange='javascript:ajaxfunction();'>";                        $dboxquery1 = "select distinct subject leapfile2012 site_code='$_post[school]' order subject;";                 $resultdbq1 = mysql_query($dboxquery1,$con) or die("sql error 1: " . mysql_error());                     while($dbqr1 = mysql_fetch_array($resultdbq1))                     {                            echo '<option value="'. $dbqr1['subject'] . '">' . $testtype[$dbqr1['subject']] . '</option>';                     }                 echo "</select>";             echo "</td>             <td>";         echo "<select name='testsub' id='tsub'>";             echo "<option value='ela' selected='selected'>english</option>";         echo "</select>";             echo "</td>";             echo "<td>" . "<input type='hidden' name='hidden' id='hidename' value='" . $_post['school'] . "'></input></td>";             echo" <td>";                 echo '<input type="button" id="data-submit" value="get" onclick="javascript:doofus();"></input>';             echo "</td>                    <td>                      <input type='hidden' name='hidden2' id='hidename2' value=''></input>                    </td>                                         </tr>     </tbody> </table>";               echo '</form>'; 

an on click event (user clicks ‘get’ in subject/grade level form) triggers d3 code supposed repopulate graph test data newly selected grade , subject. json new/updated graph pulled value of second hidden element. breaks down, error running following javascript/d3:

function doofus() {     var birdmanbirdman = document.getelementbyid('hidename2').value;     var whutitdo = birdmanbirdman.length;     var quote_be_gone = birdmanbirdman.substring(0,whutitdo);     //var i_hope_this_works = new array(quote_be_gone);     //alert(i_hope_this_works);     //alert(typeof(i_hope_this_works));     //alert(typeof(birdmanbirdman));  var margin = {top: 35, right: 105, bottom: 30, left: 40},     width = 370 - margin.left - margin.right,     height = 289 - margin.top - margin.bottom;      var data = new array(quote_be_gone);  //var dontwant = ["site_name","site_code","subject","testsub"];  var formataspercentage = d3.format(".1%");  var x = d3.scale.ordinal()     .rangeroundbands([0, width], .1);  var y = d3.scale.linear()     .rangeround([height, 0]);  var color = d3.scale.ordinal()     .range(["#3366cc", "#dc3912", "#ff9900", "#109618", "#990099"]);  var xaxis = d3.svg.axis()     .scale(x)     .orient("bottom")     .ticksize(1);  var yaxis = d3.svg.axis()     .scale(y)     .orient("left")     .tickformat(d3.format(".0%"))     .ticksize(1);  var svg = d3.select("#area3").append("svg")     .attr("width", width + margin.left + margin.right)     .attr("height", height + margin.top + margin.bottom)   .append("g")     .attr("transform", "translate(" + margin.left + "," + margin.top + ")");   color.domain(d3.keys(data[0]).filter(function(key)     { return key !== "year"; }));    data.foreach(function(d) {     var y0 = 0;     d.ages = color.domain().map(function(name) { return {name: name, y0: y0, y1: y0 += +d[name]}; });     d.total = d.ages[d.ages.length - 1].y1;   });     x.domain(data.map(function(d) { return d.year; }));   y.domain([0, d3.max(data, function(d) { return d.total; })]);    svg.append("g")       .attr("class", "x axis")       .attr("transform", "translate(0," + height + ")")       .call(xaxis);    svg.append("g")       .attr("class", "y axis")       .call(yaxis)     .append("text")       .attr("transform", "rotate(-90)")       .attr("y", 6)       .attr("dy", ".71em")       .attr("font-size", "1.0em")       .style("text-anchor", "end")       /*.text("population")*/;    var state = svg.selectall(".state")       .data(data)     .enter().append("g")       .attr("class", "g")       .attr("transform", function(d) { return "translate(" + x(d.year) + ",0)"; });    state.selectall("rect")       .data(function(d) { return d.ages; })     .enter().append("rect")       .attr("width", x.rangeband())       .attr("y", function(d) { return y(d.y1); })       .attr("stroke","black")       .attr("stroke-width",0.5)       .attr("height", function(d) { return y(d.y0) - y(d.y1); })       .style("fill", function(d) { return color(d.name); });    state.selectall("text.one")       .data(function(d) { return d.ages; })     .enter().append("text")       .attr("x", function(d,i) { return x.rangeband()/2;})       .attr("y", function(d) { /*if ((y(d.y0) - y(d.y1))>=0.05) */ return y(d.y1) + (y(d.y0) - y(d.y1))/2 + 6; })       .text(function (d) { if ((y(d.y0) - y(d.y1))>=0.05) return formataspercentage(d.y1 - d.y0);})       .attr("fill", "white")       .attr("font-family", "sans-serif")       .attr("font-weight", "normal")       .attr("text-anchor", "middle")       .attr("font-size", "0.9em");        var legend = svg.selectall(".legend")       .data(color.domain().slice().reverse())     .enter().append("g")       .attr("class", "legend")       .attr("transform", function(d, i) { return "translate(0," + * 20 + ")"; });    legend.append("rect")       .attr("x", width + 6)       .attr("width", 12)       .attr("height", 12)       .attr("stroke","black")       .attr("stroke-width", 0.5)       .style("fill", color);    legend.append("text")       .attr("x", width + 100)       .attr("y", 5)       .attr("dy", ".35em")       .style("text-anchor", "end")       .style("font-size", "9px")       .text(function(d) { return d; });    svg.append("text")     .attr("x", (width / 2))                  .attr("y", 0 - (margin.top / 2))     .attr("text-anchor", "middle")       .style("font-size", "11px")      .style("font-weight", "normal")       /*.text(gtitle)*/;  } 

when inspect in chrome, “uncaught typeerror: cannot read property 'length' of undefined” around piece of code.

  data.foreach(function(d) {     var y0 = 0;     d.ages = color.domain().map(function(name) { return {name: name, y0: y0, y1: y0 += +d[name]}; });     d.total = d.ages[d.ages.length - 1].y1;   }); 

in debugging process, i’m able alert out json that’s supposed populate graph. i’m able strip off opening , closing quotes using native javascript functions (the native data type string), verify new data indeed object. d3 code in on click script doesn't seem recognizing new data/object i'm attempting pass in.

i’m not sure @ point. haven’t been able find parallel example online.

any offer appreciated. forgive wordiness, wanted make sure understood issue in detail. if elementary error, please go easy on me. started using javascript in march, php in april, , d3 6 weeks ago.