i working on jquery mobile application , trying implement google charts. cannot chart display current approach. loads fine if place code in head, when transfer main.js file, not show up.
basic html page using:
<!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 calling api send me info project database, , information create chart. however, using example google's api documentation right place holder make sure understand it. how trying 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 current project... populate_project_view(); }); function populate_project_view() { //if there project if (project_id != 'null') { //construct 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 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 main screen $.mobile.changepage('#main-page', 'slide', true, true); } else { //populate #main-project-page dom project object var project = json.project; //populate project's name var name = document.createtextnode(project.name); $('#project-name').append(name); // set callback run when google visualization api loaded. google.setonloadcallback(drawchart); // callback creates , populates data table, // instantiates pie chart, passes in data , // draws it. function drawchart() { // create 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 pizza ate last night', 'width':400, 'height':300}; // instantiate , draw our chart, passing in 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 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 experienced javascript's ajax operations , it's overall activity in browser yet, still trying better grasp on of that. in advance problem!
nathan
i figured out. instead of setting callback fire once api has loaded, because way using it, should loaded time trying use chart, fire off drawchart() function when needed.
changed
// set callback run when google visualization api loaded. google.setonloadcallback(drawchart); function drawchart() { //code here... } to
*main function* { drawchart(); } function drawchart() { //code here... } 
Comments
Post a Comment