0

I couldn't find any example describing the creation of Dojo Widget using C3 library.

Before trying to create a widget, I tried to create a module, and it worked.

I am new with Dojo ... so here is what I tried to create a Widget with c3 : 

require([
        "dojo/_base/declare", "dojo/parser", "dojo/dom-construct", "dojo/ready", "dojo/_base/window",
        "dijit/_WidgetBase", "d3/d3", "c3/c3"
    ],function(declare, parser, domConstruct, ready, win, _WidgetBase, d3, c3){

        declare("LineChart", [_WidgetBase], {

            _options: {
                bindTo : '#kpi1_chart',
                data : {
                    columns : [
                        ['data', 23, 50, 22, 41, 10]
                    ]
                },
                zoom :{
                    enabled : true
                }
            },

            _chart: undefined,

            constructor: function(params, srcNodeRef){
                if(params.hasOwnProperty('id'))
                    this._options.bindTo = "#"+params.id;
                else
                    console.log("widget LineChart : id couldn't be found");

            },
            buildRendering: function(){
                this._chart = c3.generate(this._options);
            }
        });

        ready(function(){
            parser.parse();
        });
});

And here is how I initialize the widget in HTML 

<div id="kpi1_chart" data-dojo-type="LineChart"></div>

When I start the page the div tag is just empty, I don't get any errors, could you help ?

Deenadhayalan Manoharan
  • 5,436
  • 14
  • 30
  • 50
Souf
  • 325
  • 1
  • 5
  • 16
  • I think you need to call `this.inherited(arguments);` at the start of the constructor function. Also have you defined d3 and c3 packages correctly in the dojoConfig. – frank Jun 05 '15 at 14:03
  • I added the `this.inherited(arguments);` at the beginning of the constructor function, and for _dojoConfig_, I think it is well set, because I can use _c3_ as a dojo module. I did a little experiment by wrapping the previous module in an object (using _declare_, without inheriting from _WidgetBase_) and it didn't work ... Maybe _c3_ doesn't like when it is wrapped with _declare_ ? – Souf Jun 05 '15 at 14:35

2 Answers2

1

I got the declare part working.

The problem is that internally c3.js uses just "d3" and "c3" as module names so the dojo parser will look for 'main.js' file in the paths if the module names does not precede with "d3/d3".

so in order to use standalone module names you need to configure your packages in the dojoConfig variable as follows. 

packages:[
        {
            name: "d3",
            location: '//cdnjs.cloudflare.com/ajax/libs/d3/3.4.6',
            main:"d3"
        },
        {
            name: "c3",
            location: '//cdnjs.cloudflare.com/ajax/libs/c3/0.4.10',
            main:"c3"

        }

The trick over here is specifying the main attribute. When you specify the main attribute the dojo loader will look for d3.js instead of main.js when only "d3" is specified in the module name.

I could get it working with declare and the c3.generate() was being called, but was unable to get any charts. I think i am missing some css files. I do not know much about c3.js.

Here is the link to the document at to how the dojo loader works.

Hope you can take it further from here.

frank
  • 3,180
  • 3
  • 16
  • 18
  • Actually I use exactly the same thing in my dojoConfig package and my require is working too ... the problem is c3.js can't perform any action, it's like the widget is not even there. I posted an [issue](https://github.com/masayuki0812/c3/issues/1197) on github, if I get an answer I will post it – Souf Jun 05 '15 at 15:14
1

I will answer my question :

In order to be able to show C3 charts in a dojo Widget, you have to generate charts in the startup() function.

If you try to generate chart C3 in another function that come before startup() in the widget life cycle like postCreate() for example, you cannot bind c3 to a DOM element (of the same widget) because this element doesn't exist yet.

Souf
  • 325
  • 1
  • 5
  • 16