title: How to redraw my d3.js chart with data from html form?
body: <p>I have written small web page that creates a graph with alarms distribution over 24 hour period, with alarm count being a variable that drives how many alarms will be send in this period.</p>
  
  <p>After that I have written a small form that will have the alarm count variable in a input field </p>
  
  <p><code>&lt;input id="alarm_count_input" type="number"/&gt;</code></p>
  
  <p>Now I would like to be able to redraw the <code>d3.js</code> graph without page reload, taking alarm count that user submits with the form / input field.</p>
  
  <p>JsFiddle : <a href="http://jsfiddle.net/L42LU/" rel="nofollow">http://jsfiddle.net/L42LU/</a></p>
  
  <p>Code : </p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  $(function(){
  
  ........
  
  function createDataForD3( alarm_cnt, array) {
      var data = [];
      for(var i = 0, n=array.length; i&lt; n; i++)
      {
          data.push({ "hour": i, 
                      "alarms": getRatioForHour(i, array) * alarm_cnt
                      });
      }
      return data;
  }
  
  var schedule = [1, 1, 1, 1, 4, 1, 1, 3, 2, 3, 4, 1, 1, 1, 1, 1, 6, 1, 1, 1, 1, 1, 1, 1];
  var alarm_count = 1000;
  
  var margin = {top: 20, right: 20, bottom: 30, left: 50},
      width = 0.85 * document.width - margin.left - margin.right,
      height = 0.9 * document.height - margin.top - margin.bottom;
  
  var x_extent = [-0.5, 23.5];
  var y_extent = [0, Math.round(
                      getMaxAlarmCountForHourInArray(alarm_count, schedule)[1] * 1.2 ) ];
  
  var x_scale = d3.scale.linear()
      .range([0, width])
      .domain(x_extent);
  
  var y_scale = d3.scale.linear()
      .range([ height, 0])
      .domain(y_extent);
  
  
  var data = createDataForD3( alarm_count , schedule);
  
  var xAxis = d3.svg.axis()
      .scale(x_scale)
      .orient("bottom")
      .ticks(24);
  
  var yAxis = d3.svg.axis()
      .scale(y_scale)
      .orient("left");
  
  var line = d3.svg.line()
      .x(function(d) { return x_scale(d.hour) ; })
      .y(function(d) { return y_scale( Math.round( d.alarms)) ; });
  
  var svg = d3.select("body")
      .append("svg")
          .attr("class", "chart")
          .attr("width", width + margin.left + margin.right)
          .attr("height", height + margin.top + margin.bottom)
      .append("g")
          .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
  
  
      svg.append("g")
          .attr("class", "x axis")
          .attr("transform", "translate(0," + height + ")")
          .call(xAxis)
      .append("text")
          .attr("y", margin.bottom)
          .attr("x", (width) / 2)
          .text("Hour");
  
      svg.append("g")
          .classed("x grid ", true)
          .attr("transform", "translate(0,"+height+")")
          .call(xAxis
            .tickSize(-height,0,0)
            .tickFormat("")
      );
  
    svg.append("g")
        .attr("class", "y axis")
        .call(yAxis)
      .append("text")
        .attr("transform", "rotate(-90)")
        .attr("y", 8)
        .attr("x", -20)
        .attr("dy", ".71em")
        .style("text-anchor", "end")
        .text("Alarms per hour");
  
      svg.append("g")
          .classed("y grid", true)
          .call(yAxis
              .tickSize(-width,0,0)
              .tickFormat("")
      )
  
      svg.append("path")
        .datum(data)
        .attr("class", "line")
        .attr("d", line);
  
      svg.append("g")
        .selectAll("circle")
          .data(data)
        .enter()
        .append("circle");
  
      d3.selectAll("circle")
          .attr("cx", function(d){ return x_scale(d.hour); })
          .attr("cy", function(d){ return y_scale(d.alarms); })
          .attr("r", 6);
  
      $("#alarm_count_input").val(alarm_count);
  });
  &lt;/script&gt;
  &lt;form id="form1" role="form" onSubmit="return false;"&gt;
      &lt;div class=form-group"&gt;
          &lt;label for="alarm_count_input" &gt;Alarm count&lt;/label&gt;&lt;br&gt;
          &lt;input id="alarm_count_input" class="form-control" type="number" placeholder="Alarm count" min="0" max="999999" step="1" /&gt;
      &lt;/div&gt;
  &lt;/form&gt;
  &lt;/body&gt;
  </code></pre>