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