调用JSON服务的google图表工具的示例代码

有人能给我发送正确的代码，通过调用JSON API URL来创建交互式图表吗

示例：基于url中JSON API的图表

在谷歌网站上有一个例子

但是下面什么也没有显示（我用我的URL替换了原来的JSON PHP文件位置）

//加载可视化API和piechart包。
load（'visualization'，'1'，{'packages'：['corechart']}）；
//将回调设置为在加载Google Visualization API时运行。
setOnLoadCallback（drawChart）；
函数绘图图（）{
var jsonData=$.ajax({
url:“http://api.geonames.org/citiesJSON?north=44.1&south=-9.9&east=-22.4&west=55.2&lang=de&username=demo“，
数据类型：“json”，
异步：false
}).responseText；
//使用从服务器加载的JSON数据创建我们的数据表。
var data=新的google.visualization.DataTable（jsonData）；
//实例化并绘制图表，传入一些选项。
var chart=new google.visualization.PieChart（document.getElementById（'chart_div'）；
绘制图表（数据，{宽度：400，高度：240}）；
}
查看从您提供的URL返回的JSON(http://api.geonames.org/citiesJSON?north=44.1&south=-9.9&east=-22.4&west=55.2&lang=de&username=demo），看起来它不符合标准

发件人：

所有图表都需要数据。谷歌图表工具图表要求数据
包装在名为google.visualization.DataTable的JavaScript类中。
该类在您创建的Google可视化库中定义
以前加载过。DataTable是具有行的二维表
和列，其中每列都有一个数据类型、一个可选ID和一个
可选标签

如果查看它们提供的示例JSON数据，您将看到它符合DataTable格式：

{
  "cols": [
        {"id":"","label":"Topping","pattern":"","type":"string"},
        {"id":"","label":"Slices","pattern":"","type":"number"}
      ],
  "rows": [
        {"c":[{"v":"Mushrooms","f":null},{"v":3,"f":null}]},
        {"c":[{"v":"Onions","f":null},{"v":1,"f":null}]},
        {"c":[{"v":"Olives","f":null},{"v":1,"f":null}]},
        {"c":[{"v":"Zucchini","f":null},{"v":1,"f":null}]},
        {"c":[{"v":"Pepperoni","f":null},{"v":2,"f":null}]}
      ]
}

谢谢，我如何转换它？是否有任何其他BI、BAM或图表工具允许我通过从JSON web服务获取数据而无需编码即可显示仪表板？
{
  "cols": [
        {"id":"","label":"Topping","pattern":"","type":"string"},
        {"id":"","label":"Slices","pattern":"","type":"number"}
      ],
  "rows": [
        {"c":[{"v":"Mushrooms","f":null},{"v":3,"f":null}]},
        {"c":[{"v":"Onions","f":null},{"v":1,"f":null}]},
        {"c":[{"v":"Olives","f":null},{"v":1,"f":null}]},
        {"c":[{"v":"Zucchini","f":null},{"v":1,"f":null}]},
        {"c":[{"v":"Pepperoni","f":null},{"v":2,"f":null}]}
      ]
}