Plotting Google Charts on mongodb data using Node,js

2,223 views

Skip to first unread message

vijay garg

unread,

Apr 10, 2015, 5:57:33 AM4/10/15

to google-visua...@googlegroups.com

Hii

I had fetched data from mongodb using Node.js.And I want to plot google chart on it.How can I create the datatable of that data.I am using Web storm IDE for developing Node.js application.This is my node.js code and it stored the mongodb collection in 'docs' variable.

var express = require('express');
var router = express.Router();
/* GET users listing. */
router.get('/', function(req, res, next) {
  var findDocuments = function(db, callback) {
    // Get the documents collection
    var collection = db.collection('Pages');
    // Find some documents
    collection.find({}).toArray(function(err, docs) {
      assert.equal(err, null);
      //assert.equal(6, docs.length);
               //res.render('users', { title: docs ,name:'vijay'});
      console.log("Found the following records");
               
            rres.render('index', { data: docs });
               callback();
    });

  };

  var MongoClient = require('mongodb').MongoClient
      , assert = require('assert');
    
  var url = 'mongodb://localhost:27017/test';
  MongoClient.connect(url, function(err, db) {
    assert.equal(null, err);
    console.log("Connected correctly to server");

    findDocuments(db, function() {
      db.close();
    });

  });
});

module.exports = router;

Now,Node.js uses the .ejs file for front end and there i want to plot the google graph.The data variable in <%= %> tag contains my data .How can i create the data Table for this data.My ejs file is:

<html>
<head>
    <!--Load the AJAX API-->
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">

        // Load the Visualization API and the piechart package.
        google.load('visualization', '1.0', {'packages':['corechart']});

        // Set a callback to run when the Google Visualization API is loaded.
        google.setOnLoadCallback(drawChart);

        // Callback that creates and populates a data table,
        // instantiates the pie chart, passes in the data and
        // draws it.

        document.write("<p>WELCOME</p>");
<%= data%>
        function drawChart() {

            // Create the data table.
            var data = new google.visualization.DataTable();

            data.addColumn('string', 'Topping');
            data.addColumn('number', 'Slices');
           
            // Set chart options
            var options = {'title':'How Much Pizza I Ate Last Night',
                'width':400,
                'height':300};

            // Instantiate and draw our chart, passing in some options.
            var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
            chart.draw(data, options);
        }
    </script>
</head>

<body>
<!--Div that will hold the pie chart-->
<div id="chart_div"></div>
</body>
</html>

Reply all

Reply to author

Forward

0 new messages