emdagon/meteor-c3js

C3js Charts for Meteor

meteor-c3js's Issues

d3 is not defined

Trying a very basic c3 example:

Template.MyPage.rendered = function () {
  var chart = c3.generate({
    bindto: this.find('#myGraph'),
    data: {
      columns: [
        ['data1', 30, 200, 100, 400, 150, 250],
        ['data2', 50, 20, 10, 40, 15, 25]
      ]
    }
  });
};

Alas, I am getting an exception like:

Exception from Tracker afterFlush function: Cannot read property 'scale' of undefined
TypeError: Cannot read property 'scale' of undefined
    at ChartInternal.c3_chart_internal_fn.generateColor (http://localhost:3000/packages/emdagon_c3js.js?94cafaaee63d158139e3382ec66301b206705d92:5477:101)
    at ChartInternal.c3_chart_internal_fn.initParams (http://localhost:3000/packages/emdagon_c3js.js?94cafaaee63d158139e3382ec66301b206705d92:125:23)
    at ChartInternal.c3_chart_internal_fn.init (http://localhost:3000/packages/emdagon_c3js.js?94cafaaee63d158139e3382ec66301b206705d92:84:12)
    at new Chart (http://localhost:3000/packages/emdagon_c3js.js?94cafaaee63d158139e3382ec66301b206705d92:44:12)
    at Object.c3.generate (http://localhost:3000/packages/emdagon_c3js.js?94cafaaee63d158139e3382ec66301b206705d92:68:16)

I trapped the issue in the debugger and I can see that d3 is undefined, so the following code is running into issues:

    c3_chart_internal_fn.generateColor = function () {                                                                 // 5443
        var $$ = this, config = $$.config, d3 = $$.d3,                                                                 // 5444
            colors = config.data_colors,                                                                               // 5445
            pattern = notEmpty(config.color_pattern) ? config.color_pattern : d3.scale.category10().range(),           // 5446
            callback = config.data_color,                                                                              // 5447
            ids = [];                                                                                                  // 5448

Note that c3 is defined:

Object {version: "0.4.9", generate: function, chart: Object}

I also confirmed that d3js is included before c3:

  <script type="text/javascript" src="/packages/d3js_d3.js?143669b7a95b3f649beda008ede04424ece7be4e"></script>
  <script type="text/javascript" src="/packages/emdagon_c3js.js?94cafaaee63d158139e3382ec66301b206705d92"></script>

So, why is d3 not defined?