define([
    'base/tool'
], function(Tool) {

    var barChart = Tool.extend({

        /**
         * Initialized the tool
         * @param config tool configurations, such as placeholder div
         * @param options tool options, such as state, data, etc
         */
        init: function(config, options) {

            this.name = 'bar-chart';
            this.template = "tools/_examples/bar-chart/bar-chart";

            //instantiating components
            this.components = [{
                component: '_gapminder/header',
                placeholder: '.vzb-tool-title'
            }, {
                component: '_examples/bar-chart',
                placeholder: '.vzb-tool-viz', //div to render
                model: ["state.show", "data", "state.time"]
            }, {
                component: '_gapminder/timeslider',
                placeholder: '.vzb-tool-timeslider', //div to render
                model: ["state.time"]
            }, {
                component: '_gapminder/buttonlist',
                placeholder: '.vzb-tool-buttonlist'
            }];

            this._super(config, options);
        },

        /**
         * Validating the tool model
         * @param model the current tool model to be validated
         */
        toolModelValidation: function(model) {

            var state = model.state,
                data = model.data;

            //don't validate anything if data hasn't been loaded
            if(!data.getItems() || data.getItems().length < 1) {
                return;
            }
            if (state.time.start < data.getLimits('time').min) {
                state.time.start = data.getLimits('time').min;
            }
            if (state.time.end > data.getLimits('time').max) {
                state.time.end = data.getLimits('time').max;
            }
        },

        /**
         * Returns the query (or queries) to be performed by this tool
         * @param model the tool model will be received
         */
        getQuery: function(model) {
            var state = model.state;
            return [{
                "from": "data",
                "select": ["geo", "geo.name", "time", "geo.region", "geo.category", state.show.indicator],
                "where": {
                    "geo": state.show.geo,
                    "geo.category": state.show.geo_category,
                    "time": [state.time.start + "-" + state.time.end]
                }
            }];
        }
    });


    return barChart;
});

@@ -949,34 +949,46 @@
 %22%5D%0A            %7D
+%0A            
 ,
- 
 %7B%0A              
@@ -1076,16 +1076,172 @@
 tonlist'
+,%0A                buttons: %5B'full-screen', 'add', 'colors', 'find', 'play'%5D,%0A                //buttons: %5B'add'%5D,%0A                model: %5B'data', 'language'%5D
 %0A       
@@ -1246,16 +1246,29 @@
        %7D
+%0A            
 %5D;%0A%0A    
@@ -2642,16 +2642,103 @@
     %7D%5D;%0A
+        %7D,%0A%0A        postRender: function() %7B%0A            console.log(this.components);%0A
         

Add button list to bar chart