Javascript：在提交時創建Google圖表

Question

我正在使用帶有Javascript的解析和Google圖表來繪制一些數據。 我想要的是用戶從一個下拉字段中選擇一些選項，然后根據他們的選擇創建圖表。 但是，按提交后，該圖表根本不會出現。 請注意，我在登錄時使用angularJS來顯示/隱藏圖表的潛力。 但是，該圖表是在AngularJS部分之外創建的。

相關HTML：

 <body ng-app="AuthApp">
  <div ng-hide="currentUser">
    <form>
      <h2>Sign Up or Log In</h2>
      Username: <input type="text" ng-model="user.username" /><br />
      Password: <input type="password" ng-model="user.password" /><br />
      <button ng-click="signUp(user)">Sign up</button>
      <button ng-click="logIn(user)">Log in</button>
    </form>
  </div>

  <div ng-show="currentUser" >
    <h1>Welcome {{currentUser.get('username')}}</h1>
    <h2> Charts </h2>
    <button ng-click="logOut(user)">Log out</button>
    <form id="activity_form">
    <p> Before:
    <select id="a_sel">
        <option value="all">All</option>
        <option value="eating">Eating</option>
        <option value="exercise">Exercise</option>
        <option value="sleep">Sleep</option>
        <option value="low movement">Low Movement</option>
    </select>
    After: 
    <select id="b_sel">
        <option value="all">All</option>
        <option value="eating">Eating</option>
        <option value="exercise">Exercise</option>
        <option value="sleep">Sleep</option>
        <option value="low movement">Low Movement</option>
    </select>
    <button type="submit" onclick="chartData()">Submit</button>
    </p>
    </form>
    <div ng-show="currentUser" id='chart_div' style='width: 700px; height: 240px;'></div>
  </div>
</body>

相關的Javascript：

//Chart the data
function chartData(){
    google.load('visualization', '1', {'packages':['annotatedtimeline']});
}

google.setOnLoadCallback(drawChart);

//Identify user before/after filter selection
function drawChart() {
    //Variables for chart drawing
    var lowerLimit = 70;
    var upperLimit = 100;
    //Global calculation variables
    var totReadings = 0;
    var belowLimit = 0;
    var aboveLimit = 0;

    //Identify the user
    var userString = Parse.User.current().getUsername().toString();

    //Retrieve data from parse
    var Readings = Parse.Object.extend("Readings");
    var query = new Parse.Query(Readings);

    //set constraints on the query.
    query.equalTo('username', userString);

    //Add these depending on user input
    var b = document.getElementById("b_sel");
    var beforeAct = b.options[b.selectedIndex].value;
    var a = document.getElementById("a_sel");
    var afterAct = a.options[a.selectedIndex].value;

    if(beforeAct != "all")
        query.equalTo('before', beforeAct);
    if(afterAct != "all")
        query.equalTo('after', afterAct);
    query.ascending("createdAt");

    //Prepare the data columns
    var data = new google.visualization.DataTable();

    data.addColumn('date', 'Date');
    data.addColumn('number', 'Reading (mg/dl)');
    data.addColumn('number', 'Lower Limit');
    data.addColumn('number', 'Upper Limit');

    //Run the query and graph the data
    query.find({
      //Success callback
      success: function(results) {

        for (var result of results){
            var createdAt = result.createdAt;
            var reading = result.get("reading");

            //Parse the date string that is being returned
            var d = new Date(createdAt.toString());

            //Sum the reading
            totReadings += reading;

            //Note if the reading is beyond a limit
            if (reading > upperLimit)
                aboveLimit++;
            else if (reading < lowerLimit)
                belowLimit++;

            //Add the row
            data.addRow([new Date(d.getFullYear(), (d.getMonth() + 1) ,d.getDate(), d.getHours(), d.getMinutes()), reading, lowerLimit, upperLimit]);
        }

        //Calculate the mean of the readings
        var meanReadings = totReadings/results.length;
        alert("Average Reading: " + meanReadings);
        alert("% Readings above upper limit: " + aboveLimit/results.length*100 + "%");
        alert("% Readings below limit: " + belowLimit/results.length*100 + "%");

        //Create the chart
        var chart = new google.visualization.AnnotatedTimeLine(document.getElementById('chart_div'));

        // Draw the chart
        chart.draw(data, {
                displayAnnotations: true,
                dateFormat: 'HH:mm MMMM dd, yyyy',
                displayExactValues: true
            });
      },
      //Error Callback
      error: function(error) {
        alert("Error: " + Parse.Error);
      }
    });
}

Answer 1

嘗試刪除此行

google.setOnLoadCallback(drawChart);

該行要求在Google圖表准備就緒后調用drawChart。

Javascript：在提交時創建Google圖表

問題描述

1 個解決方案

解決方案1
0 2015-04-18 21:42:47

Javascript：在提交時創建Google圖表

問題描述

1 個解決方案

解決方案1 0 2015-04-18 21:42:47

解決方案1
0 2015-04-18 21:42:47