Javascript：在提交时创建Google图表

Question

I am using parse and Google charts with Javascript in order to graph some data. 我正在使用带有Javascript的解析和Google图表来绘制一些数据。 What I want is for the user to select some options from a dropdown field, which then create the charts based on their selection. 我想要的是用户从一个下拉字段中选择一些选项，然后根据他们的选择创建图表。 However, the chart does not appear at all upon pressing submit. 但是，按提交后，该图表根本不会出现。 Note that I am using angularJS to show/hide the potential for the chart upon login. 请注意，我在登录时使用angularJS来显示/隐藏图表的潜力。 However, the chart is created outside of the AngularJS portion. 但是，该图表是在AngularJS部分之外创建的。

Relevant HTML: 相关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>

Relevant Javascript: 相关的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

Try removing this line 尝试删除此行

google.setOnLoadCallback(drawChart);

That line is asking drawChart to be called once Google charts is ready. 该行要求在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