CODEWITHSUNDEEP
javascriptmeteorgoogle-visualizationhoisting
dojox
dojox

Reputation: 41

Why is a Google Gauge Chart working in Chrome but not in Firefox?

I have a Google Gauge chart in my meteor app.

It works fine in chrome, but not in Firefox. However, the bar chart is working on both the browsers.

I am getting the following error message:

Exception from Tracker afterFlush function:meteor....db5f41c (line 888)
ReferenceError: drawChart is not defined

guageChart@http://localhost:3000/app/client/templates/Dashbaord/DashboardBudgetGuageChart.js?d50528e5cd924eb71fef044b93dde03e3531923b:54:4
@http://localhost:3000/app/client/templates/Dashbaord/DashboardBudgetGuageChart.js?d50528e5cd924eb71fef044b93dde03e3531923b:44:3
fireCallbacks/

Code is here: Iam calling this guageChart function in OnRendered template event.

function guageChart() {
  var currentuserid = Meteor.userId();
  if (currentuserid) {
    google.load('visualization', '1.1', {
      'packages': ["gauge"],
      callback: drawChart
    });

    function drawChart() {
      Tracker.autorun(function () {
        var dataarray = getbudExpenseData()
        var myDiv = document.getElementById('BudgetGuageChart')
        var varselectedAccount = Session.get("SelCurrentAccount")
        if (varselectedAccount && dataarray && myDiv) {
          var budExpenseSum = dataarray[0];
          var redfrom = dataarray[1];
          var redto = dataarray[2];
          var yellowfrom = dataarray[3];
          var yellowto = dataarray[4];
          var data = google.visualization.arrayToDataTable([
            ['Label', 'Value'],
            ['Budget', budExpenseSum]
          ]);
          var options = {
            width: 600, height: 250,
            max: redto, min: 0,
            redFrom: redfrom, redTo: redto,
            yellowFrom: yellowfrom, yellowTo: yellowto,
            minorTicks: 5,
          };
          var chart = new google.visualization.Gauge(document.getElementById('BudgetGuageChart'));
          chart.draw(data, options);
        }
      })
    }
  }
}

What am I doing wrong?

Upvotes: 0

Views: 362

Answers (1)

MasterAM
MasterAM

Reputation: 16488

Function declarations within blocks aren't hoisted by Firefox (and, as far as I can tell, according to the standards as well.

Chrome treats them as statements and hoists them, although they are supposed to be block-scoped (in ES2015) or expressions that are not hoisted (in ES5).

For example, in Firefox:

function bar() {
    if (true) {
        foo();
        function foo() { //declared within a block
            console.log('foo');
        }
    }
}

bar(); // fails - ReferenceError: foo is not defined

function bar() {
    if (true) {
        foo()
    }
    function foo() { // declared in function body
        console.log('foo');
    }
}

bar(); // logs "foo"

Therefore, the short answer is: avoid declaring functions within blocks, unless you really intend to do just that.

It seems that that particular function can be declared outside of guageChart() altogether.

Upvotes: 0

Related Questions