Complete single chart JavaScript file

single-chart-view.js

({
    plugins: ['Chart'],
    className: 'single-chart-view',
    chartData: {},
    total: 0,
    initialize: function (options) {
        this._super('initialize', [options]);
        this.chart = nv.models.lineChart()
            .x(function (d) {
                return d.widget_points;
            })
            .y(function (d) {
                return d.num_widgets;
            })
            .showTitle(true)
            .tooltips(false);
    },
    loadData: function() {
        this.chartData = {
                data: [
                    {
                        key: "Blue Stuff",
                        values: [
                            {
                                widget_points: 1, num_widgets: 10
                            },
                            {
                                widget_points: 2, num_widgets: 9
                            },
                            {
                                widget_points: 3, num_widgets: 8
                            },
                            {
                                widget_points: 4, num_widgets: 7
                            },
                            {
                                widget_points: 5, num_widgets: 6
                            },
                        ],
                        color: "#0000ff"
                    },
                    {
                        key: "Red Stuff",
                        values: [
                            {
                                widget_points: 1, num_widgets: 1
                            },
                            {
                                widget_points: 2, num_widgets: 2
                            },
                            {
                                widget_points: 3, num_widgets: 3
                            },
                            {
                                widget_points: 4, num_widgets: 4
                            },
                            {
                                widget_points: 5, num_widgets: 5
                            },
                        ],
                        color: "#ff0000"
                    },
                ],
                properties: {
                    title: 'Example Chart Data'
                }
            };

        this.total = 1;
    },
    renderChart: function () {
        if (!this.isChartReady()) {
            return;
        }

        d3.select(this.el).select('#chart-section svg')
            .datum(this.chartData)
            .transition().duration(500)
            .call(this.chart);
        
        this.chart_loaded = _.isFunction(this.chart.update);
    }
})