使用AJAX/Jquery使用MongoDB投影填充Google图表

刚刚在网站上完成了MongoDB tutorial for nodejs，并试图构建一个非常简单的测试用例，通过AJAX将查询结果发送到Google图表。使用AJAX/Jquery使用MongoDB投影填充Google图表

这里是我使用以生成该查询的文件的NodeJS：

CODE：

var MongoClient = require('mongodb').MongoClient, 
assert  = require('assert'); 

MongoClient.connect('mongodb://localhost:27017/crunchbase', function(err, db) { 
assert.equal(err, null); 
console.log('The app is now running'); 

var query  = {name: { $regex: /^m/}, founded_year: { $gte: 2009 }}; 
var projection = {name: 1, founded_year: 1, _id: 0}; 
var cursor  = db.collection('companies').find(query); 
cursor.project(projection); 
});

示例我使用光标加载到一个谷歌的图表comes from this page。

下面是我用来生成图表我的示例代码：

CODE：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<!--Load the AJAX API for Google Charts- --> 
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 

<script type="text/javascript"> 
    google.charts.load('current', {'packages':['table']}); 
    google.charts.setOnLoadCallback(drawChart); 
    function drawChart() { 
    var jsonData = $.ajax({ 
     url: "http://localhost:27017/crunchbase", 
     dataType: "jsonp", 
     asynchronous: true 
    }).responseText; 

    var data = new google.visualization.DataTable(jsonData); 
    var chart = new google.visualization.Table(document.getElementById("chartDiv")); 
    chart.draw(data); 

    } 
</script> 
</head> 
<body> 
<h1 style="text-align: center">Companies Starting With "M" Founded After 2009</h1> 
<div id="chartDiv"> 
</div> 
</body> 
</html>

我目前在控制台中此错误消息：

错误的messge ：

Uncaught SyntaxError: Unexpected identifier crunchbase?callback=jQuery1102076…_1481945533315&_=1481945533316:1

另外值得注意的是：我为了得到错误信息走开改变dataType到jsonp和asynchronous到true，但这些违背由谷歌图表例子给出的例子所以这可能是相关的。

我很抱歉如果我的代码有点粗糙，这实际上只是试图将来自MongoDB和Google Charts文档的非常基本的示例结合在一起，并让它们工作。

来源

2016-12-17 Jonathan Bechtel

时asynchronous: true - >需要等待请求完成，
试图用数据/绘制图表

看到.done前 - 尝试下面的代码片段...

google.charts.load('current', {'packages':['table']}); 
google.charts.setOnLoadCallback(drawChart); 
function drawChart() { 
    $.ajax({ 
    url: "http://localhost:27017/crunchbase", 
    dataType: "jsonp", 
    asynchronous: true 
    }).done(function (jsonData) { 
    var data = new google.visualization.DataTable(jsonData); 
    var chart = new google.visualization.Table(document.getElementById("chartDiv")); 
    chart.draw(data); 
    }).fail(function (jqXHR, textStatus, errorMessage) { 
    console.log(errorMessage); 
    }); 
}

来源

2016-12-17 04:34:28 WhiteHat

希望这有助于 - fyi：如果您想直接从json创建Google数据表，则需要匹配[此处的格式]（https://developers.google.com/chart/interactive/docs/reference#dataparam ）... – WhiteHat

使用AJAX/Jquery使用MongoDB投影填充Google图表

回答

相关问题