title: show dynamic histogram using d3.js, node.js, postgresql
body: <p>I fetch the data from postgresql database using node.js and I showed this data in array form in my browser perfectly. I also showed static histogram (made in d3.js code) using node.js. The histogram also uses static array values. Both database values and a static histogram is showed separately on my browser page. Now what I want to do is to make this histogram dynamic so that the histogram uses the database values. I don't have idea how to assign database values to histogram?</p>
  
  <p>I try it with simple node.js but not works.</p>
  
  <pre><code>/**
   * Created by Raees Afridi on 8/17/2015.*/
  
  var http = require('http');
  var fs = require('fs');
  var pg = require('pg');
  var conString = "pg://postgres:raees@localhost:5432/tweetdb";
  
  function onRequest(req, res) {
  
      if(req.method == 'GET' &amp;&amp; req.url == '/') {
  
          res.writeHead(200, {"Context-Type": "text/html"});
          var client = new pg.Client(conString);
          client.connect();
          var query = client.query("SELECT t_follower, t_text FROM columbia ORDER BY t_follower desc limit 4");
          query.on("row", function (row, result) {
              result.addRow(row);
          });
          query.on("end", function (result) {
              var mydata = res.end(JSON.stringify(result.rows, null, "    "));
              console.log(mydata);
              client.end();
          });
  
          fs.createReadStream("./index.html").pipe(res);
  
      }
  
  
  
  
  
  }
  
  http.createServer(onRequest).listen(3000);
  console.log("Server is running...")
  </code></pre>
  
  <p>Than I try it with express framework with the following code:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;&lt;%= title %&gt;&lt;/title&gt;
      &lt;link rel='stylesheet' href='/stylesheets/style.css' /&gt;
      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"&gt;&lt;/script&gt;
      &lt;style&gt;
          .pumpkin {
              fill: yellow;
              stroke: orange;
              stroke-width: 5;
          }
      &lt;/style&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
  &lt;% include templates/header.ejs%&gt;
  &lt;h3&gt;&lt;%= title %&gt; Page&lt;/h3&gt;
  &lt;% root = JSON.parse( tweetdata ); %&gt;
  &lt;ul&gt;
      &lt;% root.forEach(function(item) { %&gt;
      &lt;li&gt;&lt;%= item.t_friends %&gt;&lt;/li&gt;
      &lt;% })%&gt;
  &lt;/ul&gt;
  
  
  
      &lt;% var dataset = Array(); var i=0; %&gt;
      &lt;% root.forEach(function(item) { %&gt;
      &lt;% dataset[i] = parseInt(item.t_friends); %&gt;
      &lt;% i+=1; }); %&gt;
  &lt;% var dataset = dataset %&gt;
  &lt;script type="text/javascript"&gt;
  
     // var dataset = [ 5, 10, 13, 19, 21, 25, 22, 18, 15, 13,
   //11, 12, 15, 20, 18, 17, 16, 18, 23, 25 ];
  &lt;/script&gt;
  
  
  &lt;script type="text/javascript"&gt;
  
      //Width and height
      var w = 500;
      var h = 100;
      var barPadding = 1;
     // var dataset = [ 5, 10, 13, 19, 21, 25, 22, 18, 15, 13,
         // 11, 12, 15, 20, 18, 17, 16, 18, 23, 25 ];
  
      //var dataset = tweetdata;
  
      //Create SVG element
      var svg = d3.select("body")
              .append("svg")
              .attr("width", w)
              .attr("height", h);
  
      svg.selectAll("rect")
              .data(dataset)
              .enter()
              .append("rect")
              .attr("x", function(d, i) {
                  //return i * 21;    //Bar width of 20 is already defined and plus 1 for padding
                  return i * (w / dataset.length);
              })
              .attr("y", function(d) {
                  return h - (d * 4);
              })
              .attr("width", w / dataset.length - barPadding)
          //.attr("height", 100);
              .attr("height", function(d) {
                  return d * 4;
              })
              .attr("fill", function(d) {
                  return "rgb(0, 0, " + (d * 10) + ")";
              });
  
      svg.selectAll("text")
              .data(dataset)
              .enter()
              .append("text")
              .text(function(d) {
                  return d;
              })
              .attr("text-anchor", "middle")
              .attr("x", function(d, i) {
                  return i * (w / dataset.length) + (w / dataset.length - barPadding) / 2;
              })
              .attr("y", function(d) {
                  return h - (d * 4) + 14;
              })
              .attr("font-family", "sans-serif")
              .attr("font-size", "11px")
              .attr("fill", "white");
  
  &lt;/script&gt;
  
  
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Any Idea?</p>