title: Receive data from mysql in node.js to draw graph
body: <p>I'm learning node.js and i want to write a program that draws a graph of data fetched from mysql database. I am doing the back end processing in the server.js file and showing results in index.html. Since i'm new to node.js and web programming. I don't know how to get data as a javascript object and draw it's graph.</p>
  
  <p>Question:
  I want to know how would i send the data fetched into the javascript object to the graph drawing code.</p>
  
  <p>Here is my server.js :</p>
  
  <pre><code>var mysql = require('mysql');
  var express = require('express');
  var app =express();
  var country = [], population = [], gdp = [];
  var jsonArray;
  
  var connection = mysql.createConnection({
    host: 'localhost',
    user: 'root',
    password: '12345',
    database: 'rohan'
  });
  var queryString = 'SELECT * FROM Country';
  
  // Fetching data from database
  app.get('/', function(req, res) {
    connection.query(queryString, function(err, rows, fields) {
      if(err) throw err;
      formatData(rows);
      res.send(jsonArray);
      console.log(jsonArray);
    });
  });
  
  function formatData(dataArray) {
    for(var i = 0; i &lt; dataArray.length; i++) {
      country[i] = dataArray[i].name;
      population[i] = dataArray[i].population;
      gdp[i] = dataArray[i].GDP;
    }
    jsonArray = [country, population, gdp];
    console.log("in FormatData()...\n");
    console.log(jsonArray);
  }
  
  app.listen(3000, function() {
    console.log("Server listening on port 3000");
  });
  </code></pre>
  
  <p>and this is my index.html:</p>
  
  <pre><code>&lt;html&gt;
    &lt;head&gt;
      &lt;title&gt;Chart-mysql demo&lt;/title&gt;
      &lt;script&gt;
        // code to draw graph
        $("#clients").bind('ajax:success', function(result) {
          console.log("In index.html" +  result);
          alert(result);
          var barData = {
            label:result.country,
            datasets: [
              {
                label: '2010 Customers #',
                fillColor: '#382765',
                populationData:result.population
              }
            ]
          };
         var context = document.getElementById('clients').getContext('2d');
         var clientsChart = new Chart(context).Bar(barData);
  
        });
      &lt;/script&gt;
    &lt;/head&gt;
  
    &lt;body&gt;
      &lt;h1&gt;Country Demographics&lt;/h1&gt;
      &lt;script src="Chart.js"&gt;&lt;/script&gt;
      &lt;script src="app.js"&gt;&lt;/script&gt;
      &lt;canvas id="clients" width=500 height=400&gt;&lt;/canvas&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>