AnsweredAssumed Answered

I have a problem trying to paint a bar chart, it shows the error Uncaught TypeError: Can not read property 'dispatch' there are some examples using nvd3 nv.model.multibarchart ()

Question asked by Javier Solar on Sep 15, 2017

I have a problem trying to paint a bar chart, it shows the error Uncaught TypeError: Can not read property 'dispatch' there are some examples using nvd3 nv.model.multibarchart ()

 

({
    events:
        {
            'change #select_periodo': 'getTransacciones',
        },

    plugins: ['Dashlet', 'Chart'],
    className: 'transactions_cstm',
    chartData: {},
    array_grafica: [],
    chart: null,

    initialize: function (options) {
        this._super('initialize', [options]);
        var self = this;
    },
    renderChart: function () {


    },

    loadData: function (options) {
        nv.addGraph(function () {
            var opts = {
                    "dom": "chart11e5f5881e575",
                    "width": 800,
                    "height": 400,
                    "x": "Hair",
                    "y": "Freq",
                    "group": "Eye",
                    "type": "multiBarChart",
                    "id": "chart1"
                },
                data = [{"Hair": "Black", "Eye": "Brown", "Sex": "Male", "Freq": 32}, {
                    "Hair": "Brown",
                    "Eye": "Brown",
                    "Sex": "Male",
                    "Freq": 53
                }, {"Hair": "Red", "Eye": "Brown", "Sex": "Male", "Freq": 10}, {
                    "Hair": "Blond",
                    "Eye": "Brown",
                    "Sex": "Male",
                    "Freq": 3
                }, {"Hair": "Black", "Eye": "Blue", "Sex": "Male", "Freq": 11}, {
                    "Hair": "Brown",
                    "Eye": "Blue",
                    "Sex": "Male",
                    "Freq": 50
                }, {"Hair": "Red", "Eye": "Blue", "Sex": "Male", "Freq": 10}, {
                    "Hair": "Blond",
                    "Eye": "Blue",
                    "Sex": "Male",
                    "Freq": 30
                }, {"Hair": "Black", "Eye": "Hazel", "Sex": "Male", "Freq": 10}, {
                    "Hair": "Brown",
                    "Eye": "Hazel",
                    "Sex": "Male",
                    "Freq": 25
                }, {"Hair": "Red", "Eye": "Hazel", "Sex": "Male", "Freq": 7}, {
                    "Hair": "Blond",
                    "Eye": "Hazel",
                    "Sex": "Male",
                    "Freq": 5
                }, {"Hair": "Black", "Eye": "Green", "Sex": "Male", "Freq": 3}, {
                    "Hair": "Brown",
                    "Eye": "Green",
                    "Sex": "Male",
                    "Freq": 15
                }, {"Hair": "Red", "Eye": "Green", "Sex": "Male", "Freq": 7}, {
                    "Hair": "Blond",
                    "Eye": "Green",
                    "Sex": "Male",
                    "Freq": 8
                }]

            var chart = nv.models[opts.type]()
                .x(function(d) { return d[opts.x] })
                .y(function(d) { return d[opts.y] })
                .width(opts.width)
                .height(opts.height)

            d3.select("#" + opts.id)
                .append('svg')
                .datum(data)
                .transition().duration(500)
                .call(chart);

            nv.utils.windowResize(chart.update);
            return chart;
                this.render();
        }
        );


    },


    _dispose: function () {
        this._super('_dispose');
        console.log('4');
    }


})

Outcomes