JS Class for working with google charts

charts.js

var Chart = function(){
    var self = this;
    self.setData = function(data){
        self.data = google.visualization.arrayToDataTable(data);
    };
    self.bar = function(){
        self.activeChart = new google.visualization.BarChart(self.el);
        self.activeChart.draw(self.data, self.options);
    };
    self.column = function(){
        self.activeChart = new google.visualization.ColumnChart(self.el);
        self.activeChart.draw(self.data, self.options);
    };
    self.table = function(){
        self.activeChart = new google.visualization.Table(self.el);
        self.activeChart.draw(self.data, {showRowNumber: true});
    };
    self.toggleLogScale = function(){
        var axis = self.style.match('bar') ? "hAxis" : 'vAxis';
        self.options[axis].logScale = !self.options[axis].logScale;
        self.printChart();
        return self.options[axis];
    };
    self.draw = function(opt){
        opt = opt||{};
        //short hand for complete chart methods in order.
        // 'draw' is the relevant draw method for the chart you need
        if('root' in opt){
            self.root = opt.root;
            self.populate();
        } else if(self.data) {
            $(document).trigger('data-populated');
        }

        $(self).on('data-populated', function(){
            if('el' in opt){
                self.el = opt.el;//Set target element
            }
            if('data' in opt){
                self.setData(opt.data);//set data
            }
            if('options' in opt){
                self.options = opt.options;// set options
            }
            if('style' in opt){
                self.style = opt.style;
            }
            self.printChart();
        });
    };
    self.populate = function(url){
        self.root = url||self.root;
        $.ajax({
        url:self.root,
        success: function(data){
            self.setData(JSON.parse(data));
            $(self).trigger('data-populated',self);
            },
        error: function(){
            alert("Error Loading Data for Chart");
        }
        });
    };
    self.printChart = function(){
        if(typeof self[self.style] == 'function'){
            self[self.style]();//draw selected chart
            $(document).trigger("chartPrinted", self);
        } else {
            alert("No Chart Style Selected");
        }
    };
};

//Local Coupler

//catch chart printing
$(document).on('chartPrinted',function(e, chart){
    // console.log(['chart printed',chart]);
});
//Page load, render 
$(document).on('page:change page:load ready',function(e){
    
});

//On Page Script
/*
<script type="text/javascript">
var charts = {};//global storage for charts
charts.init = function(){
    console.log("chart");
    google.load("visualization", "1", {//load google stuff
        packages: ["corechart",'table']
    });
    google.setOnLoadCallback(googleChartLoaded);

    
    
};

var bar_chart_options = {
            animation:{
                duration: 1000,
                easing: 'out',
            },
            // title: 'Anchor Text Comparison',
            hAxis:{
                logScale: true
            },
            vAxis: {
                // title: 'Domain',
                logScale: true,
                titleTextStyle: {
                    color: 'red'
                }
            },
            colors:['#3083bd','#1969A2','#168ADB','#0A4874']
        };


    $('a.switchScale').on('click',function(e){
        e.preventDefault();
        charts.bar.toggleLogScale();
        $(this).htmlToggle("Actual Scale","Logarithmic Scale");
    });


function googleChartLoaded(){
        $(document).trigger('googleChartLoaded');
    };
    $(document).on("googleChartLoaded", function(e){
    
    charts = $.extend(charts,{
        bar:new Chart(),
        table:new Chart()
    });

    charts.bar.draw({
        root: "/anchor_text_comparison_data",
        el: document.getElementById('chart_div'),
        // data: chart_data,
        options: bar_chart_options,
        style: "column"
    });

    charts.table.draw({
        root: "/anchor_text_comparison_data",
        el: document.getElementById('table_div'),
        // data: chart_data,
        options: $.extend(bar_chart_options, {allowHtml: true,showRowNumber:true}),
        style: "table"
    });
    })

charts.init();



</script>
*/