Example: objects/prototypes in JavaScript

Graph.js

/*
    JavaScript Stream data client and graph renderer
*/
jQuery(document).ready(function() {
    function Graph(type) {
        /*
            Graph class
            Override properties to modify graph appearance before invoking the render() method
        */
        this.category = type;
        this.limit = 0;
        this.order = 'desc';
    }

    Graph.prototype.render = function(element, labels) {
        /*
            Graph render method
        */
        var type = this.category;
        var limit = this.limit;
        var order = this.order;

        jQuery.ajax({
            type: 'GET',
            url: 'query/',
            data: ({
                type: type,
                limit: limit,
                order: order
            }),
            dataType: 'json',
            success: function(resource) {
                //Pre-format data array
                jQuery('#loader').fadeOut('fast');
                var data = [];
                if (type === 'connections') {
                    for (var i = 0; i < resource.length; i++) {
                        data.push([new Date(resource[i][0] * 1000), resource[i][1], resource[i][2]]);
                    }
                } else {
                    for (var i = 0; i < resource.length; i++) {
                        data.push([new Date(resource[i][0]), resource[i][1]]);
                    }
                }
                var graph = new Dygraph(
                document.getElementById(element),
                //Containing div
                data,
                {
                    labels: labels,
                    showRoller: true
                });
                jQuery('input#start-date, input#end-date').change(function() {
                    var start_date = Date.parse(jQuery('input#start-date').val());
                    var end_date = Date.parse(jQuery('input#end-date').val());
                    if (!isNaN(start_date) && !isNaN(end_date)) {
                        graph.updateOptions({
                            dateWindow: [start_date, end_date]
                        });
                    } else {
                        graph.updateOptions({
                            dateWindow: null,
                            valueRange: null
                        });
                    }
                });
                window.onresize = function() {
                    graph.resize();
                };
            },
            complete: function(xhr, statusText) {
                var response = jQuery.parseJSON(xhr.responseText);
                if (xhr.status !== 200) {
                    alert(response.error);
                }
            }
        });
    };
});