[英]Loading Google Charts with jQuery Mobile
I am working on a jQuery Mobile application and trying to implement Google Charts. 我正在开发jQuery Mobile应用程序,并尝试实现Google Charts。 I cannot get the chart to display with my current approach.
我无法使用当前方法显示图表。 It loads fine if I place all the code in the head, but when I transfer it to my main.js file, it does not show up.
如果将所有代码放在头部,它会很好地加载,但是当我将其传输到main.js文件时,它不会显示。
Basic HTML Page I am using: 我正在使用的基本HTML页面:
<!DOCTYPE html>
<html>
<head>
<title>Manufacturing Dashboard</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="./css/grey-orange.min.css" />
<link rel="stylesheet" href="./css/jquery.mobile.custom.structure.min" />
<link rel="stylesheet" href="./fonts/font-awesome/css/font-awesome.min.css"/>
<script type="text/javascript" src="./js/jquery.min.js"></script>
<script type="text/javascript" src="./js/jquery.mobile.custom.min.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["piechart", "corechart", "geomap"]});
</script>
</head>
<body>
<div data-role="page" data-theme="a" id="main-project-page">
<div data-role="panel" class="project-menu" data-position="left" data-theme="c">
</div><!-- /panel -->
<div data-role="header" data-position="fixed">
</div><!-- /header -->
<div data-role="content">
<h3 id="project-name"></h3>
<div id="project-overall-chart"></div>
</div><!-- /content -->
<div data-role="footer" data-position="fixed">
</div><!-- /footer -->
</div><!-- /page -->
<script src="./js/main.js"></script>
</body>
</html>
I am calling an API to send me some info about the project from a database, and with that information I create my chart. 我正在调用一个API,以便从数据库向我发送有关该项目的一些信息,并使用这些信息创建图表。 However, I am just using the example from Google's API Documentation right now as a place holder to make sure I understand it.
但是,我现在只是使用Google API文档中的示例作为占位符,以确保我理解它。 This is how I am trying to call it...
这就是我试图称呼它的方式...
//Global thingz
var request;
var project_id = "null";
var equipment_id = "null";
//Main Project Page
$(document).on("pageinit", "#main-project-page", function() {
//Menu Panel slide effect
$('.menu-button').click(function(event) {
$('.project-menu').panel("open");
});
//Populate project page with current project...
populate_project_view();
});
function populate_project_view()
{
//If there is a project to get
if (project_id != 'null')
{
//Construct the JSON
var json = new Object();
var info = new Object();
json.type = "info";
info.type = "project";
info.id = project_id;
json.info = info;
json = JSON.stringify(json);
//Make-a the request-a
request = getHTTPObject();
request.onreadystatechange = function () {
//If request object received response
if (request.readyState == 4)
{
var json = JSON.parse(request.responseText);
if (json.error == true)
{
alert('Error: ' + json.msg);
//Revert back to main screen
$.mobile.changePage('#main-page', 'slide', true, true);
}
else
{
//Populate the #main-project-page DOM with project object
var project = json.project;
//Populate Project's name
var name = document.createTextNode(project.name);
$('#project-name').append(name);
// 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.
function drawChart() {
// Create the data table.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Topping');
data.addColumn('number', 'Slices');
data.addRows([
['Mushrooms', 3],
['Onions', 1],
['Olives', 1],
['Zucchini', 1],
['Pepperoni', 2]
]);
// 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('project-overall-chart'));
chart.draw(data, options);
}
}
}
}
request.open("GET", "./php/api.php?package=" + json + '&qs=' + new Date().getTime(), true);
request.send(null);
}
}
/*
Support functions
*/
//Returns an HTTPObject
function getHTTPObject()
{
var xhr = false;
if (window.XMLHttpRequest)
{
xhr = new XMLHttpRequest();
}
else if (window.ActiveXObject)
{
try
{
xhr = new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e)
{
try
{
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e)
{
xhr = false;
}
}
}
return xhr;
}
I'm not very experienced with JavaScript's AJAX operations and it's overall activity in the browser yet, still trying to get a better grasp on all of that. 我对JavaScript的AJAX操作还没有很丰富的经验,并且它在浏览器中的总体活动还很丰富,但仍然试图更好地掌握所有这些知识。 Thanks in advance for any help with this problem!
预先感谢您对这个问题的任何帮助!
Nathan 弥敦道
I figured it out. 我想到了。 Instead of setting a callback to fire once the API has loaded, because the way I am using it, it should always be loaded by the time I am trying to use a chart, I just fire off the
drawChart()
function when needed. 不用设置一旦API加载就触发回调,因为我使用它的方式,应该总是在尝试使用图表时就加载它,而是在需要
drawChart()
函数。
Changed 变
// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawChart);
function drawChart() {
//Code here...
}
To 至
*Main Function* {
drawChart();
}
function drawChart() {
//Code here...
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.