Full JavaScript for API example

api-chart-view.js

({
    plugins: ['Chart'],
    className: 'api-chart-view',
    chartDataArr: [],
    total: 0,
    initialize: function (options) {
        this._super('initialize', [options]);
        this.chart = nv.models.lineChart()
            .x(function (d) {
                return d.x;
            })
            .y(function (d) {
                return d.y;
            })
            .showTitle(true)
            .tooltips(false);
    },
    loadData: function() {
        var self = this;
        var url = app.api.buildURL('Accounts/get_line_chart_data');
        app.api.call('read', url, null, {
            success: function (response) {
                _.each(response, function (data, key) {
                    self.chartDataArr.push(data);
                });
                if (self.chartDataArr.length > 0) {
                    self.total = 1;
                } else {
                    self.errorMsg = "There is no chart information available";
                }

                self.render();
            },
            error: _.bind(function () {
                this.errorMsg = "Error encountered retrieving chart information";
            }, this)
        });
    },
    renderChart: function () {
        if (!this.isChartReady()) {
            return;
        }

        var self = this;
        var id_val = "";
        var selector_str = "";
        _.each(this.chartDataArr, function (data, key) {
            id_val = 'example_chart' + key;
            selector_str = '#' + id_val + ' svg';
            $("#chart-section").append('<div id="' + id_val + '"><svg></svg></div>');
            d3.select(self.el).select(selector_str)
                .datum(data)
                .transition().duration(500)
                .call(self.chart);
        });
        
        this.chart_loaded = _.isFunction(this.chart.update);
    }
})