search

c3js / c3

:bar_chart: A D3-based reusable chart library
http://c3js.org
MIT License
9.34k stars 1.39k forks source link

RequireJS anc C3 #83

Closed ghost closed 10 years ago

ghost commented 10 years ago

Has anyone tried to use C3 with the requirejs module loader ?

main.js

require([
    "d3.v3.min.js",
    "c3.min.js"
], function(d3) {
    console.log(d3, c3);

    var chart = c3.generate({
        data: {
            x: 'x',
            columns: [
                ['x', '2013-01-01', '2013-01-02', '2013-01-03', '2013-01-04', '2013-01-05', '2013-01-06'],
                ['data1', 30, 200, 100, 400, 150, 250],
                ['data2', 130, 340, 200, 500, 250, 350]
            ]
        },
        axis : {
            x : {
                type : 'timeseries'
            }
        }
    });
});

index.html

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link rel="stylesheet" href="c3.css"/>
    <script data-main="main" src="require.js"></script>
</head>
<body>
    <div id="chart"></div>
</body>
</html>

The console log display both c3 and d3 object, but then I'm getting a Uncaught TypeError: Cannot read property 'time' of undefined c3.min.js:2error.

Any idea how to make it work ?

itay commented 10 years ago

@doobinay since c3/d3 are not quite AMD-aware, you need to either load them in the correct order, or define a shim for them.

Specifically: you can either do something like this:

require(['d3.v3.min'], function() {
  require(['c3.min'], function() { ... });
});

which will express the dependency order, or you can configure a shim for them:

require.config({
  shim: {
    'd3.v3.min': { exports: 'd3' },
    'c3.min': { deps: ['d3.v3.min'], exports: 'c3' }
  }
});

and then you can load them as you did originally.

masayuki0812 commented 10 years ago

@itay Thank you for the answer. @doobinay Could you try this solution? I think it will work.

ghost commented 10 years ago

I tried both and couldn't make it work. The same error happens. 

require([
    "d3.v3.min"
], function(d3) {

    require([
        "c3.min"
    ], function(){

        console.log(d3, c3);

        var chart = c3.generate({
....

d3 and c3 are object. I'll continue to investigate this

ghost commented 10 years ago

Found the solution.

c3 is trying to access window.d3 which is not set since it's loaded via requirejs.

require([
    "d3.v3.min"
], function(d3) {
    window.d3 = d3;

    require([
        "c3"
    ], function(){
...
masayuki0812 commented 10 years ago

@doobinay Hi, I think this issue has been fixed by the commit above. I'd be happy if you would try this when you have some time. Thank you.

lolomedia commented 9 years ago

Hello, I'm having the same issue and tried both suggestions.

here is my main.js

require.config({
    paths: {
        'jquery': 'vendor/jquery/dist/jquery',
        'topojson': 'vendor/topojson/topojson',
        'd3': 'vendor/d3/d3',
        'datamaps' : 'vendor/datamaps/dist/datamaps.usa.min',
        'c3': 'vendor/c3/c3',
        'domReady': 'vendor/domReady/domReady'

    },
    shim: {
        'jquery': {
            exports: '$'
        },
        'd3': {
            exports: 'd3'
        },
        'topojson': {
            deps:['d3'],
            exports: 'topojson'
        },
        'datamaps': {
            deps: ['d3', 'topojson']
        },
        'c3': {
            deps: ['d3'],
            exports: 'c3'
        }
    }
});

require([
    'app'
]);

and here is my app.js

define([
    'jquery',
    'd3',
    'c3',
    'topojson',
    'datamaps',
    'ets/controllers/map',
    'ets/controllers/chart',
    'domReady'
],function($, D3, C3, TopoJson, DataMaps, Map, Chart, domReady){
    console.log(Chart);
});

Here is my modular where I want to load my chart.js

define([
    'd3'
], function(d3){
    window.d3 = d3;
    require([
        'c3'
    ], function(c3) {
        var chart = c3.generate({
            bindto: '#chart',
            data: {
                columns: [
                    ['sample', 30, 200, 100,400,150,250]
                ]
            }
        })
    })
});

I get this error: Uncaught TypeError: undefined is not a function on line c3.js:99

Please advice on how to get this to work.

thank you

masayuki0812 commented 9 years ago

@lolomedia Can you ask in Google Group https://groups.google.com/forum/#!forum/c3js ? I believe they can notice more than here.

rainboweast commented 8 years ago

i meet this issue to, solved by

shim: { 'd3': {exports: 'd3'}, 'c3': {deps: ['d3'], exports: 'c3'} } require(['c3'], function (c3) { window.c3 = c3; });

lose c3,so we just need to set c3.