How to Create Dojo Widget using C3

Question

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 ?

Answer 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.

Answer 2

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.