first commit

assets/global/js/demo_pages/charts/dimple/area/area_horizontal.js

@@ -0,0 +1,141 @@
+/* ------------------------------------------------------------------------------
+ *
+ *  # Dimple.js - horizontal area
+ *
+ *  Demo of area chart. Data stored in .tsv file format
+ *
+ * ---------------------------------------------------------------------------- */
+
+
+// Setup module
+// ------------------------------
+
+var DimpleAreaHorizontal = function() {
+
+
+    //
+    // Setup module components
+    //
+
+    // Chart
+    var _areaHorizontal = function() {
+        if (typeof dimple == 'undefined') {
+            console.warn('Warning - dimple.min.js is not loaded.');
+            return;
+        }
+
+        // Main variables
+        var element = document.getElementById('dimple-area-horizontal');
+
+
+        // Initialize chart only if element exsists in the DOM
+        if(element) {
+
+            // Construct chart
+            var svg = dimple.newSvg(element, "100%", 500);
+
+
+            // Chart setup
+            // ------------------------------
+
+            d3.tsv("../../../../global_assets/demo_data/dimple/demo_data.tsv", function (data) {
+
+                // Filter data
+                data = dimple.filterData(data, "Owner", ["Aperture", "Black Mesa"])
+
+
+                // Create chart
+                // ------------------------------
+
+                // Define chart
+                var myChart = new dimple.chart(svg, data);
+
+                // Set bounds
+                myChart.setBounds(0, 0, "100%", "100%");
+
+                // Set margins
+                myChart.setMargins(55, 10, 10, 50);
+
+
+                // Create axes
+                // ------------------------------
+
+                // Horizontal
+                var x = myChart.addCategoryAxis("x", "Month");
+                    x.addOrderRule("Date");
+
+                // Vertical
+                var y = myChart.addMeasureAxis("y", "Unit Sales");
+
+
+                // Construct layout
+                // ------------------------------
+
+                // Add area
+                var s = myChart
+                    .addSeries(null, dimple.plot.area)
+                    .interpolation = "basis";
+
+
+                // Add styles
+                // ------------------------------
+
+                // Font size
+                x.fontSize = "12";
+                y.fontSize = "12";
+
+                // Font family
+                x.fontFamily = "Roboto";
+                y.fontFamily = "Roboto";
+
+
+                //
+                // Draw chart
+                //
+
+                // Draw
+                myChart.draw();
+
+                // Remove axis titles
+                x.titleShape.remove();
+
+
+                // Resize chart
+                // ------------------------------
+
+                // Add a method to draw the chart on resize of the window
+                $(window).on('resize', resize);
+                $('.sidebar-control').on('click', resize);
+
+                // Resize function
+                function resize() {
+
+                    // Redraw chart
+                    myChart.draw(0, true);
+
+                    // Remove axis titles
+                    x.titleShape.remove();
+                }
+            });
+        }
+    };
+
+
+    //
+    // Return objects assigned to module
+    //
+
+    return {
+        init: function() {
+            _areaHorizontal();
+        }
+    }
+}();
+
+
+// Initialize module
+// ------------------------------
+
+document.addEventListener('DOMContentLoaded', function() {
+    DimpleAreaHorizontal.init();
+});

assets/global/js/demo_pages/charts/dimple/area/area_horizontal_grouped.js

@@ -0,0 +1,141 @@
+/* ------------------------------------------------------------------------------
+ *
+ *  # Dimple.js - horizontal grouped area
+ *
+ *  Demo of grouped area chart. Data stored in .tsv file format
+ *
+ * ---------------------------------------------------------------------------- */
+
+
+// Setup module
+// ------------------------------
+
+var DimpleAreaHorizontalGrouped = function() {
+
+
+    //
+    // Setup module components
+    //
+
+    // Chart
+    var _areaHorizontalGrouped = function() {
+        if (typeof dimple == 'undefined') {
+            console.warn('Warning - dimple.min.js is not loaded.');
+            return;
+        }
+
+        // Main variables
+        var element = document.getElementById('dimple-area-horizontal-grouped');
+
+
+        // Initialize chart only if element exsists in the DOM
+        if(element) {
+
+            // Construct chart
+            var svg = dimple.newSvg(element, "100%", 500);
+
+
+            // Chart setup
+            // ------------------------------
+
+            d3.tsv("../../../../global_assets/demo_data/dimple/demo_data.tsv", function (data) {
+
+                // Filter data
+                data = dimple.filterData(data, "Owner", ["Aperture", "Black Mesa"])
+
+
+                // Create chart
+                // ------------------------------
+
+                // Define chart
+                var myChart = new dimple.chart(svg, data);
+
+                // Set bounds
+                myChart.setBounds(0, 0, "100%", "100%");
+
+                // Set margins
+                myChart.setMargins(55, 10, 10, 45);
+
+
+                // Create axes
+                // ------------------------------
+
+                // Horizontal
+                var x = myChart.addCategoryAxis("x", ["Owner", "Month"]);
+                    x.addGroupOrderRule("Date");
+
+                // Vertical
+                var y = myChart.addMeasureAxis("y", "Unit Sales");
+
+
+                // Construct layout
+                // ------------------------------
+
+                // Add area
+                var s = myChart
+                    .addSeries("Owner", dimple.plot.area)
+                    .interpolation = "basis";
+
+                // Line weight
+                s.lineWeight = 1;
+
+                // Area spacing
+                s.barGap = 0.05;
+
+
+                // Add styles
+                // ------------------------------
+
+                // Font size
+                x.fontSize = "12";
+                y.fontSize = "12";
+
+                // Font family
+                x.fontFamily = "Roboto";
+                y.fontFamily = "Roboto";
+
+
+                //
+                // Draw chart
+                //
+
+                // Draw
+                myChart.draw();
+
+
+                // Resize chart
+                // ------------------------------
+
+                // Add a method to draw the chart on resize of the window
+                $(window).on('resize', resize);
+                $('.sidebar-control').on('click', resize);
+
+                // Resize function
+                function resize() {
+
+                    // Redraw chart
+                    myChart.draw(0, true);
+                }
+            });
+        }
+    };
+
+
+    //
+    // Return objects assigned to module
+    //
+
+    return {
+        init: function() {
+            _areaHorizontalGrouped();
+        }
+    }
+}();
+
+
+// Initialize module
+// ------------------------------
+
+document.addEventListener('DOMContentLoaded', function() {
+    DimpleAreaHorizontalGrouped.init();
+});

assets/global/js/demo_pages/charts/dimple/area/area_horizontal_stacked.js

@@ -0,0 +1,157 @@
+/* ------------------------------------------------------------------------------
+ *
+ *  # Dimple.js - horizontal stacked area
+ *
+ *  Demo of stacked area chart. Data stored in .tsv file format
+ *
+ * ---------------------------------------------------------------------------- */
+
+
+// Setup module
+// ------------------------------
+
+var DimpleAreaHorizontalStacked = function() {
+
+
+    //
+    // Setup module components
+    //
+
+    // Chart
+    var _areaHorizontalStacked = function() {
+        if (typeof dimple == 'undefined') {
+            console.warn('Warning - dimple.min.js is not loaded.');
+            return;
+        }
+
+        // Main variables
+        var element = document.getElementById('dimple-area-horizontal-stacked');
+
+
+        // Initialize chart only if element exsists in the DOM
+        if(element) {
+
+            // Construct chart
+            var svg = dimple.newSvg(element, "100%", 500);
+
+
+            // Chart setup
+            // ------------------------------
+
+            d3.tsv("../../../../global_assets/demo_data/dimple/demo_data.tsv", function (data) {
+
+                // Filter data
+                data = dimple.filterData(data, "Owner", ["Aperture", "Black Mesa"])
+
+
+                // Create chart
+                // ------------------------------
+
+                // Define chart
+                var myChart = new dimple.chart(svg, data);
+
+                // Set bounds
+                myChart.setBounds(0, 0, "100%", "100%");
+
+                // Set margins
+                myChart.setMargins(55, 25, 10, 50);
+
+
+                // Create axes
+                // ------------------------------
+
+                // Horizontal
+                var x = myChart.addCategoryAxis("x", "Month");
+                    x.addOrderRule("Date");
+
+                // Vertical
+                var y = myChart.addMeasureAxis("y", "Unit Sales");
+
+
+                // Construct layout
+                // ------------------------------
+
+                // Add area
+                var s = myChart
+                    .addSeries("Channel", dimple.plot.area)
+                    .interpolation = "basis";
+
+
+                // Add legend
+                // ------------------------------
+
+                var myLegend = myChart.addLegend(0, 5, "100%", 0, "right");
+
+
+                // Add styles
+                // ------------------------------
+
+                // Font size
+                x.fontSize = "12";
+                y.fontSize = "12";
+
+                // Font family
+                x.fontFamily = "Roboto";
+                y.fontFamily = "Roboto";
+
+                // Legend font style
+                myLegend.fontSize = "12";
+                myLegend.fontFamily = "Roboto";
+
+
+                //
+                // Draw chart
+                //
+
+                // Draw
+                myChart.draw();
+
+                // Position legend text
+                myLegend.shapes.selectAll("text").attr("dy", "1");
+
+                // Remove axis titles
+                x.titleShape.remove();
+
+
+                // Resize chart
+                // ------------------------------
+
+                // Add a method to draw the chart on resize of the window
+                $(window).on('resize', resize);
+                $('.sidebar-control').on('click', resize);
+
+                // Resize function
+                function resize() {
+
+                    // Redraw chart
+                    myChart.draw(0, true);
+
+                    // Position legend text
+                    myLegend.shapes.selectAll("text").attr("dy", "1");
+
+                    // Remove axis titles
+                    x.titleShape.remove();
+                }
+            });
+        }
+    };
+
+
+    //
+    // Return objects assigned to module
+    //
+
+    return {
+        init: function() {
+            _areaHorizontalStacked();
+        }
+    }
+}();
+
+
+// Initialize module
+// ------------------------------
+
+document.addEventListener('DOMContentLoaded', function() {
+    DimpleAreaHorizontalStacked.init();
+});

assets/global/js/demo_pages/charts/dimple/area/area_horizontal_stacked_grouped.js

@@ -0,0 +1,157 @@
+/* ------------------------------------------------------------------------------
+ *
+ *  # Dimple.js - horizontal grouped stacked area
+ *
+ *  Demo of grouped stacked area chart. Data stored in .tsv file format
+ *
+ * ---------------------------------------------------------------------------- */
+
+
+// Setup module
+// ------------------------------
+
+var DimpleAreaHorizontalStackedGrouped = function() {
+
+
+    //
+    // Setup module components
+    //
+
+    // Chart
+    var _areaHorizontalStackedGrouped = function() {
+        if (typeof dimple == 'undefined') {
+            console.warn('Warning - dimple.min.js is not loaded.');
+            return;
+        }
+
+        // Main variables
+        var element = document.getElementById('dimple-area-horizontal-stacked-grouped');
+
+
+        // Initialize chart only if element exsists in the DOM
+        if(element) {
+
+            // Construct chart
+            var svg = dimple.newSvg(element, "100%", 500);
+
+
+            // Chart setup
+            // ------------------------------
+
+            d3.tsv("../../../../global_assets/demo_data/dimple/demo_data.tsv", function (data) {
+
+                // Filter data
+                data = dimple.filterData(data, "Owner", ["Aperture", "Black Mesa"])
+
+
+                // Create chart
+                // ------------------------------
+
+                // Define chart
+                var myChart = new dimple.chart(svg, data);
+
+                // Set bounds
+                myChart.setBounds(0, 0, "100%", "100%");
+
+                // Set margins
+                myChart.setMargins(55, 10, 180, 45);
+
+
+                // Create axes
+                // ------------------------------
+
+                // Horizontal
+                var x = myChart.addCategoryAxis("x", ["Owner", "Month"]);
+                    x.addGroupOrderRule("Date");
+
+                // Vertical
+                var y = myChart.addMeasureAxis("y", "Unit Sales");
+
+
+                // Construct layout
+                // ------------------------------
+
+                // Add area
+                var s = myChart
+                    .addSeries("SKU", dimple.plot.area)
+                    .interpolation = "basis";
+
+                // Line weight
+                s.lineWeight = 1;
+
+                // Area spacing
+                s.barGap = 0.05;
+
+
+                // Add legend
+                // ------------------------------
+
+                var myLegend = myChart.addLegend("100%", 0, 0, "100%", "right");
+
+
+                // Add styles
+                // ------------------------------
+
+                // Font size
+                x.fontSize = "12";
+                y.fontSize = "12";
+
+                // Font family
+                x.fontFamily = "Roboto";
+                y.fontFamily = "Roboto";
+
+                // Legend font style
+                myLegend.fontSize = "12";
+                myLegend.fontFamily = "Roboto";
+
+
+                //
+                // Draw chart
+                //
+
+                // Draw
+                myChart.draw();
+
+                // Position legend text
+                myLegend.shapes.selectAll("text").attr("dy", "1");
+
+
+                // Resize chart
+                // ------------------------------
+
+                // Add a method to draw the chart on resize of the window
+                $(window).on('resize', resize);
+                $('.sidebar-control').on('click', resize);
+
+                // Resize function
+                function resize() {
+
+                    // Redraw chart
+                    myChart.draw(0, true);
+
+                    // Position legend text
+                    myLegend.shapes.selectAll("text").attr("dy", "1");
+                }
+            });
+        }
+    };
+
+
+    //
+    // Return objects assigned to module
+    //
+
+    return {
+        init: function() {
+            _areaHorizontalStackedGrouped();
+        }
+    }
+}();
+
+
+// Initialize module
+// ------------------------------
+
+document.addEventListener('DOMContentLoaded', function() {
+    DimpleAreaHorizontalStackedGrouped.init();
+});

assets/global/js/demo_pages/charts/dimple/area/area_horizontal_stacked_normalized.js

@@ -0,0 +1,157 @@
+/* ------------------------------------------------------------------------------
+ *
+ *  # Dimple.js - horizontal normalized stacked area
+ *
+ *  Demo of normalized stacked area chart. Data stored in .tsv file format
+ *
+ * ---------------------------------------------------------------------------- */
+
+
+// Setup module
+// ------------------------------
+
+var DimpleAreaHorizontalStackedNormalized = function() {
+
+
+    //
+    // Setup module components
+    //
+
+    // Chart
+    var _areaHorizontalStackedNormalized = function() {
+        if (typeof dimple == 'undefined') {
+            console.warn('Warning - dimple.min.js is not loaded.');
+            return;
+        }
+
+        // Main variables
+        var element = document.getElementById('dimple-area-horizontal-stacked-normalized');
+
+
+        // Initialize chart only if element exsists in the DOM
+        if(element) {
+
+            // Construct chart
+            var svg = dimple.newSvg(element, "100%", 500);
+
+
+            // Chart setup
+            // ------------------------------
+
+            d3.tsv("../../../../global_assets/demo_data/dimple/demo_data.tsv", function (data) {
+
+                // Filter data
+                data = dimple.filterData(data, "Owner", ["Aperture", "Black Mesa"])
+
+
+                // Create chart
+                // ------------------------------
+
+                // Define chart
+                var myChart = new dimple.chart(svg, data);
+
+                // Set bounds
+                myChart.setBounds(0, 0, "100%", "100%");
+
+                // Set margins
+                myChart.setMargins(55, 25, 10, 50);
+
+
+                // Create axes
+                // ------------------------------
+
+                // Horizontal
+                var x = myChart.addCategoryAxis("x", "Month");
+                    x.addOrderRule("Date");
+
+                // Vertical
+                var y = myChart.addPctAxis("y", "Unit Sales");
+
+
+                // Construct layout
+                // ------------------------------
+
+                // Add area
+                myChart
+                    .addSeries("Channel", dimple.plot.area)
+                    .interpolation = "basis";
+
+
+                // Add legend
+                // ------------------------------
+
+                var myLegend = myChart.addLegend(0, 5, "100%", 0, "right");
+
+
+                // Add styles
+                // ------------------------------
+
+                // Font size
+                x.fontSize = "12";
+                y.fontSize = "12";
+
+                // Font family
+                x.fontFamily = "Roboto";
+                y.fontFamily = "Roboto";
+
+                // Legend font style
+                myLegend.fontSize = "12";
+                myLegend.fontFamily = "Roboto";
+
+
+                //
+                // Draw chart
+                //
+
+                // Draw
+                myChart.draw();
+
+                // Position legend text
+                myLegend.shapes.selectAll("text").attr("dy", "1");
+
+                // Remove axis titles
+                x.titleShape.remove();
+
+
+                // Resize chart
+                // ------------------------------
+
+                // Add a method to draw the chart on resize of the window
+                $(window).on('resize', resize);
+                $('.sidebar-control').on('click', resize);
+
+                // Resize function
+                function resize() {
+
+                    // Redraw chart
+                    myChart.draw(0, true);
+
+                    // Position legend text
+                    myLegend.shapes.selectAll("text").attr("dy", "1");
+
+                    // Remove axis titles
+                    x.titleShape.remove();
+                }
+            })
+        }
+    };
+
+
+    //
+    // Return objects assigned to module
+    //
+
+    return {
+        init: function() {
+            _areaHorizontalStackedNormalized();
+        }
+    }
+}();
+
+
+// Initialize module
+// ------------------------------
+
+document.addEventListener('DOMContentLoaded', function() {
+    DimpleAreaHorizontalStackedNormalized.init();
+});

assets/global/js/demo_pages/charts/dimple/area/area_vertical.js

@@ -0,0 +1,132 @@
+/* ------------------------------------------------------------------------------
+ *
+ *  # Dimple.js - vertical area
+ *
+ *  Demo of area chart. Data stored in .tsv file format
+ *
+ * ---------------------------------------------------------------------------- */
+
+
+// Setup module
+// ------------------------------
+
+var DimpleAreaVertical = function() {
+
+
+    //
+    // Setup module components
+    //
+
+    // Chart
+    var _areaVertical = function() {
+        if (typeof dimple == 'undefined') {
+            console.warn('Warning - dimple.min.js is not loaded.');
+            return;
+        }
+
+        // Main variables
+        var element = document.getElementById('dimple-area-vertical');
+
+
+        // Initialize chart only if element exsists in the DOM
+        if(element) {
+
+            // Construct chart
+            var svg = dimple.newSvg(element, "100%", 500);
+
+
+            d3.tsv("../../../../global_assets/demo_data/dimple/demo_data.tsv", function (data) {
+
+                // Filter data
+                data = dimple.filterData(data, "Owner", ["Aperture", "Black Mesa"])
+
+
+                // Create chart
+                // ------------------------------
+
+                // Define chart
+                var myChart = new dimple.chart(svg, data);
+
+                // Set bounds
+                myChart.setBounds(0, 0, "100%", "100%");
+
+                // Set margins
+                myChart.setMargins(55, 5, 20, 40);
+
+
+                // Create axes
+                // ------------------------------
+
+                // Horizontal
+                var x = myChart.addMeasureAxis("x", "Unit Sales");
+
+                // Vertical
+                var y = myChart.addCategoryAxis("y", "Month");
+                    y.addOrderRule("Date");
+
+
+                // Construct layout
+                // ------------------------------
+
+                // Add area
+                var s = myChart
+                    .addSeries(null, dimple.plot.area)
+                    .interpolation = "basis";
+
+
+                // Add styles
+                // ------------------------------
+
+                // Font size
+                x.fontSize = "12";
+                y.fontSize = "12";
+
+                // Font family
+                x.fontFamily = "Roboto";
+                y.fontFamily = "Roboto";
+
+
+                //
+                // Draw chart
+                //
+
+                // Draw
+                myChart.draw();
+
+
+                // Resize chart
+                // ------------------------------
+
+                // Add a method to draw the chart on resize of the window
+                $(window).on('resize', resize);
+                $('.sidebar-control').on('click', resize);
+
+                // Resize function
+                function resize() {
+
+                    // Redraw chart
+                    myChart.draw(0, true);
+                }
+            });
+        }
+    };
+
+
+    //
+    // Return objects assigned to module
+    //
+
+    return {
+        init: function() {
+            _areaVertical();
+        }
+    }
+}();
+
+
+// Initialize module
+// ------------------------------
+
+document.addEventListener('DOMContentLoaded', function() {
+    DimpleAreaVertical.init();
+});

assets/global/js/demo_pages/charts/dimple/area/area_vertical_grouped.js

@@ -0,0 +1,141 @@
+/* ------------------------------------------------------------------------------
+ *
+ *  # Dimple.js - vertical grouped area
+ *
+ *  Demo of grouped area chart. Data stored in .tsv file format
+ *
+ * ---------------------------------------------------------------------------- */
+
+
+// Setup module
+// ------------------------------
+
+var DimpleAreaVerticalGrouped = function() {
+
+
+    //
+    // Setup module components
+    //
+
+    // Chart
+    var _areaVerticalGrouped = function() {
+        if (typeof dimple == 'undefined') {
+            console.warn('Warning - dimple.min.js is not loaded.');
+            return;
+        }
+
+        // Main variables
+        var element = document.getElementById('dimple-area-vertical-grouped');
+
+
+        // Initialize chart only if element exsists in the DOM
+        if(element) {
+
+            // Construct chart
+            var svg = dimple.newSvg(element, "100%", 500);
+
+
+            // Chart setup
+            // ------------------------------
+
+            d3.tsv("../../../../global_assets/demo_data/dimple/demo_data.tsv", function (data) {
+
+                // Filter data
+                data = dimple.filterData(data, "Owner", ["Aperture", "Black Mesa"])
+
+
+                // Create chart
+                // ------------------------------
+
+                // Define chart
+                var myChart = new dimple.chart(svg, data);
+
+                // Set bounds
+                myChart.setBounds(0, 0, "100%", "100%");
+
+                // Set margins
+                myChart.setMargins(70, 5, 20, 45);
+
+
+                // Create axes
+                // ------------------------------
+
+                // Horizontal
+                var x = myChart.addMeasureAxis("x", "Unit Sales");
+
+                // Vertical
+                var y = myChart.addCategoryAxis("y", ["Owner", "Month"]);
+                    y.addGroupOrderRule("Date");
+
+
+                // Construct layout
+                // ------------------------------
+
+                // Add area
+                var s = myChart
+                    .addSeries("Owner", dimple.plot.area)
+                    .interpolation = "basis";
+
+                // Line weight
+                s.lineWeight = 1;
+
+                // Area spacing
+                s.barGap = 0.05;
+
+
+                // Add styles
+                // ------------------------------
+
+                // Font size
+                x.fontSize = "12";
+                y.fontSize = "12";
+
+                // Font family
+                x.fontFamily = "Roboto";
+                y.fontFamily = "Roboto";
+
+
+                //
+                // Draw chart
+                //
+
+                // Draw
+                myChart.draw();
+
+
+                // Resize chart
+                // ------------------------------
+
+                // Add a method to draw the chart on resize of the window
+                $(window).on('resize', resize);
+                $('.sidebar-control').on('click', resize);
+
+                // Resize function
+                function resize() {
+
+                    // Redraw chart
+                    myChart.draw(0, true);
+                }
+            });
+        }
+    };
+
+
+    //
+    // Return objects assigned to module
+    //
+
+    return {
+        init: function() {
+            _areaVerticalGrouped();
+        }
+    }
+}();
+
+
+// Initialize module
+// ------------------------------
+
+document.addEventListener('DOMContentLoaded', function() {
+    DimpleAreaVerticalGrouped.init();
+});

assets/global/js/demo_pages/charts/dimple/area/area_vertical_stacked.js

@@ -0,0 +1,151 @@
+/* ------------------------------------------------------------------------------
+ *
+ *  # Dimple.js - vertical stacked area
+ *
+ *  Demo of stacked area chart. Data stored in .tsv file format
+ *
+ * ---------------------------------------------------------------------------- */
+
+
+// Setup module
+// ------------------------------
+
+var DimpleAreaVerticalStacked = function() {
+
+
+    //
+    // Setup module components
+    //
+
+    // Chart
+    var _areaVerticalStacked = function() {
+        if (typeof dimple == 'undefined') {
+            console.warn('Warning - dimple.min.js is not loaded.');
+            return;
+        }
+
+        // Main variables
+        var element = document.getElementById('dimple-area-vertical-stacked');
+
+
+        // Initialize chart only if element exsists in the DOM
+        if(element) {
+
+            // Construct chart
+            var svg = dimple.newSvg(element, "100%", 500);
+
+
+            // Chart setup
+            // ------------------------------
+
+            d3.tsv("../../../../global_assets/demo_data/dimple/demo_data.tsv", function (data) {
+
+                // Filter data
+                data = dimple.filterData(data, "Owner", ["Aperture", "Black Mesa"])
+
+
+                // Create chart
+                // ------------------------------
+
+                // Define chart
+                var myChart = new dimple.chart(svg, data);
+
+                // Set bounds
+                myChart.setBounds(0, 0, "100%", "100%");
+
+                // Set margins
+                myChart.setMargins(55, 25, 20, 40);
+
+
+                // Create axes
+                // ------------------------------
+
+                // Horizontal
+                var x = myChart.addMeasureAxis("x", "Unit Sales");
+
+                // Vertical
+                var y = myChart.addCategoryAxis("y", "Month");
+                    y.addOrderRule("Date");
+
+
+                // Construct layout
+                // ------------------------------
+
+                // Add area
+                myChart
+                    .addSeries("Channel", dimple.plot.area)
+                    .interpolation = "basis";
+
+
+                // Add legend
+                // ------------------------------
+
+                var myLegend = myChart.addLegend(0, 5, "100%", 0, "left");
+
+
+                // Add styles
+                // ------------------------------
+
+                // Font size
+                x.fontSize = "12";
+                y.fontSize = "12";
+
+                // Font family
+                x.fontFamily = "Roboto";
+                y.fontFamily = "Roboto";
+
+                // Legend font style
+                myLegend.fontSize = "12";
+                myLegend.fontFamily = "Roboto";
+
+
+                //
+                // Draw chart
+                //
+
+                // Draw
+                myChart.draw();
+
+                // Position legend text
+                myLegend.shapes.selectAll("text").attr("dy", "1");
+
+
+                // Resize chart
+                // ------------------------------
+
+                // Add a method to draw the chart on resize of the window
+                $(window).on('resize', resize);
+                $('.sidebar-control').on('click', resize);
+
+                // Resize function
+                function resize() {
+
+                    // Redraw chart
+                    myChart.draw(0, true);
+
+                    // Position legend text
+                    myLegend.shapes.selectAll("text").attr("dy", "1");
+                }
+            });
+        }
+    };
+
+
+    //
+    // Return objects assigned to module
+    //
+
+    return {
+        init: function() {
+            _areaVerticalStacked();
+        }
+    }
+}();
+
+
+// Initialize module
+// ------------------------------
+
+document.addEventListener('DOMContentLoaded', function() {
+    DimpleAreaVerticalStacked.init();
+});

assets/global/js/demo_pages/charts/dimple/area/area_vertical_stacked_grouped.js

@@ -0,0 +1,155 @@
+/* ------------------------------------------------------------------------------
+ *
+ *  # Dimple.js - vertical grouped stacked area
+ *
+ *  Demo of grouped stacked area chart. Data stored in .tsv file format
+ *
+ * ---------------------------------------------------------------------------- */
+
+
+// Setup module
+// ------------------------------
+
+var DimpleAreaVerticalStackedGrouped = function() {
+
+
+    //
+    // Setup module components
+    //
+
+    // Chart
+    var _areaVerticalStackedGrouped = function() {
+        if (typeof dimple == 'undefined') {
+            console.warn('Warning - dimple.min.js is not loaded.');
+            return;
+        }
+
+        // Main variables
+        var element = document.getElementById('dimple-area-vertical-stacked-grouped');
+
+
+        // Initialize chart only if element exsists in the DOM
+        if(element) {
+
+            // Construct chart
+            var svg = dimple.newSvg(element, "100%", 500);
+
+
+            // Chart setup
+            // ------------------------------
+
+            d3.tsv("../../../../global_assets/demo_data/dimple/demo_data.tsv", function (data) {
+
+                // Filter data
+                data = dimple.filterData(data, "Owner", ["Aperture", "Black Mesa"])
+
+
+                // Create chart
+                // ------------------------------
+
+                // Define chart
+                var myChart = new dimple.chart(svg, data);
+
+                // Set bounds
+                myChart.setBounds(0, 0, "100%", "100%");
+
+                // Set margins
+                myChart.setMargins(70, 5, 180, 45);
+
+
+                // Create axes
+                // ------------------------------
+
+                // Horizontal
+                var x = myChart.addMeasureAxis("x", "Unit Sales");
+
+                // Vertical
+                var y = myChart.addCategoryAxis("y", ["Owner", "Month"]);
+                    y.addGroupOrderRule("Date");
+
+
+                // Construct layout
+                // ------------------------------
+
+                // Add area
+                var s = myChart.addSeries("SKU", dimple.plot.area);
+
+                // Line weight
+                s.lineWeight = 1;
+
+                // Area spacing
+                s.barGap = 0.05;
+
+
+                // Add legend
+                // ------------------------------
+
+                var myLegend = myChart.addLegend("100%", 0, 0, "100%", "right");
+
+
+                // Add styles
+                // ------------------------------
+
+                // Font size
+                x.fontSize = "12";
+                y.fontSize = "12";
+
+                // Font family
+                x.fontFamily = "Roboto";
+                y.fontFamily = "Roboto";
+
+                // Legend font style
+                myLegend.fontSize = "12";
+                myLegend.fontFamily = "Roboto";
+
+
+                //
+                // Draw chart
+                //
+
+                // Draw
+                myChart.draw();
+
+                // Position legend text
+                myLegend.shapes.selectAll("text").attr("dy", "1");
+
+
+                // Resize chart
+                // ------------------------------
+
+                // Add a method to draw the chart on resize of the window
+                $(window).on('resize', resize);
+                $('.sidebar-control').on('click', resize);
+
+                // Resize function
+                function resize() {
+
+                    // Redraw chart
+                    myChart.draw(0, true);
+
+                    // Position legend text
+                    myLegend.shapes.selectAll("text").attr("dy", "1");
+                }
+            });
+        }
+    };
+
+
+    //
+    // Return objects assigned to module
+    //
+
+    return {
+        init: function() {
+            _areaVerticalStackedGrouped();
+        }
+    }
+}();
+
+
+// Initialize module
+// ------------------------------
+
+document.addEventListener('DOMContentLoaded', function() {
+    DimpleAreaVerticalStackedGrouped.init();
+});

assets/global/js/demo_pages/charts/dimple/area/area_vertical_stacked_normalized.js

@@ -0,0 +1,151 @@
+/* ------------------------------------------------------------------------------
+ *
+ *  # Dimple.js - vertical normalized stacked area
+ *
+ *  Demo of normalized stacked area chart. Data stored in .tsv file format
+ *
+ * ---------------------------------------------------------------------------- */
+
+
+// Setup module
+// ------------------------------
+
+var DimpleAreaVerticalStackedNormalized = function() {
+
+
+    //
+    // Setup module components
+    //
+
+    // Chart
+    var _areaVerticalStackedNormalized = function() {
+        if (typeof dimple == 'undefined') {
+            console.warn('Warning - dimple.min.js is not loaded.');
+            return;
+        }
+
+        // Main variables
+        var element = document.getElementById('dimple-area-vertical-stacked-normalized');
+
+
+        // Initialize chart only if element exsists in the DOM
+        if(element) {
+
+            // Construct chart
+            var svg = dimple.newSvg(element, "100%", 500);
+
+
+            // Chart setup
+            // ------------------------------
+
+            d3.tsv("../../../../global_assets/demo_data/dimple/demo_data.tsv", function (data) {
+
+                // Filter data
+                data = dimple.filterData(data, "Owner", ["Aperture", "Black Mesa"])
+
+
+                // Create chart
+                // ------------------------------
+
+                // Define chart
+                var myChart = new dimple.chart(svg, data);
+
+                // Set bounds
+                myChart.setBounds(0, 0, "100%", "100%");
+
+                // Set margins
+                myChart.setMargins(65, 25, 20, 40);
+
+
+                // Create axes
+                // ------------------------------
+
+                // Horizontal
+                var x = myChart.addPctAxis("x", "Unit Sales");
+
+                // Vertical
+                var y = myChart.addCategoryAxis("y", "Month");
+                    y.addOrderRule("Date");
+
+
+                // Construct layout
+                // ------------------------------
+
+                // Add area
+                myChart
+                    .addSeries("Channel", dimple.plot.area)
+                    .interpolation = "basis";
+
+
+                // Add legend
+                // ------------------------------
+
+                var myLegend = myChart.addLegend(0, 5, "100%", 0, "right");
+
+
+                // Add styles
+                // ------------------------------
+
+                // Font size
+                x.fontSize = "12";
+                y.fontSize = "12";
+
+                // Font family
+                x.fontFamily = "Roboto";
+                y.fontFamily = "Roboto";
+
+                // Legend font style
+                myLegend.fontSize = "12";
+                myLegend.fontFamily = "Roboto";
+
+
+                //
+                // Draw chart
+                //
+
+                // Draw
+                myChart.draw();
+
+                // Position legend text
+                myLegend.shapes.selectAll("text").attr("dy", "1");
+
+
+                // Resize chart
+                // ------------------------------
+
+                // Add a method to draw the chart on resize of the window
+                $(window).on('resize', resize);
+                $('.sidebar-control').on('click', resize);
+
+                // Resize function
+                function resize() {
+
+                    // Redraw chart
+                    myChart.draw(0, true);
+
+                    // Position legend text
+                    myLegend.shapes.selectAll("text").attr("dy", "1");
+                }
+            });
+        }
+    };
+
+
+    //
+    // Return objects assigned to module
+    //
+
+    return {
+        init: function() {
+            _areaVerticalStackedNormalized();
+        }
+    }
+}();
+
+
+// Initialize module
+// ------------------------------
+
+document.addEventListener('DOMContentLoaded', function() {
+    DimpleAreaVerticalStackedNormalized.init();
+});

assets/global/js/demo_pages/charts/dimple/bars/bar_horizontal.js

@@ -0,0 +1,136 @@
+/* ------------------------------------------------------------------------------
+ *
+ *  # Dimple.js - horizontal bars
+ *
+ *  Demo of bar chart. Data stored in .tsv file format
+ *
+ * ---------------------------------------------------------------------------- */
+
+
+// Setup module
+// ------------------------------
+
+var DimpleBarHorizontal = function() {
+
+
+    //
+    // Setup module components
+    //
+
+    // Chart
+    var _barHorizontal = function() {
+        if (typeof dimple == 'undefined') {
+            console.warn('Warning - dimple.min.js is not loaded.');
+            return;
+        }
+
+        // Main variables
+        var element = document.getElementById('dimple-bar-horizontal');
+
+
+        // Initialize chart only if element exsists in the DOM
+        if(element) {
+
+            // Construct chart
+            var svg = dimple.newSvg(element, "100%", 500);
+
+
+            // Chart setup
+            // ------------------------------
+
+            d3.tsv("../../../../global_assets/demo_data/dimple/demo_data.tsv", function (data) {
+
+
+                // Create chart
+                // ------------------------------
+
+                // Define chart
+                var myChart = new dimple.chart(svg, data);
+
+                // Set bounds
+                myChart.setBounds(0, 0, "100%", "100%")
+
+                // Set margins
+                myChart.setMargins(55, 5, 0, 50);
+
+
+                // Create axes
+                // ------------------------------
+
+                // Horizontal
+                var x = myChart.addCategoryAxis("x", "Month");
+                    x.addOrderRule("Date");
+
+                // Vertical
+                var y = myChart.addMeasureAxis("y", "Unit Sales");
+
+
+                // Construct layout
+                // ------------------------------
+
+                // Add bars
+                myChart.addSeries(null, dimple.plot.bar);
+
+
+                // Add styles
+                // ------------------------------
+
+                // Font size
+                x.fontSize = "12";
+                y.fontSize = "12";
+
+                // Font family
+                x.fontFamily = "Roboto";
+                y.fontFamily = "Roboto";
+
+
+                //
+                // Draw chart
+                //
+
+                // Draw
+                myChart.draw();
+
+                // Remove axis titles
+                x.titleShape.remove();
+
+
+                // Resize chart
+                // ------------------------------
+
+                // Add a method to draw the chart on resize of the window
+                $(window).on('resize', resize);
+                $('.sidebar-control').on('click', resize);
+
+                // Resize function
+                function resize() {
+
+                    // Redraw chart
+                    myChart.draw(0, true);
+
+                    // Remove axis titles
+                    x.titleShape.remove();
+                }
+            });
+        }
+    };
+
+
+    //
+    // Return objects assigned to module
+    //
+
+    return {
+        init: function() {
+            _barHorizontal();
+        }
+    }
+}();
+
+
+// Initialize module
+// ------------------------------
+
+document.addEventListener('DOMContentLoaded', function() {
+    DimpleBarHorizontal.init();
+});

assets/global/js/demo_pages/charts/dimple/bars/bar_horizontal_grouped.js

@@ -0,0 +1,145 @@
+/* ------------------------------------------------------------------------------
+ *
+ *  # Dimple.js - horizontal grouped bars
+ *
+ *  Demo of grouped bar chart. Data stored in .tsv file format
+ *
+ * ---------------------------------------------------------------------------- */
+
+
+// Setup module
+// ------------------------------
+
+var DimpleBarHorizontalGrouped = function() {
+
+
+    //
+    // Setup module components
+    //
+
+    // Chart
+    var _barHorizontalGrouped = function() {
+        if (typeof dimple == 'undefined') {
+            console.warn('Warning - dimple.min.js is not loaded.');
+            return;
+        }
+
+        // Main variables
+        var element = document.getElementById('dimple-bar-horizontal-grouped');
+
+
+        // Initialize chart only if element exsists in the DOM
+        if(element) {
+
+            // Construct chart
+            var svg = dimple.newSvg(element, "100%", 500);
+
+
+            // Chart setup
+            // ------------------------------
+
+            d3.tsv("../../../../global_assets/demo_data/dimple/demo_data.tsv", function (data) {
+
+
+                // Create chart
+                // ------------------------------
+
+                // Define chart
+                var myChart = new dimple.chart(svg, data);
+
+                // Set bounds
+                myChart.setBounds(0, 0, "100%", "100%");
+
+                // Set margins
+                myChart.setMargins(60, 25, 10, 60);
+
+
+                // Create axes
+                // ------------------------------
+
+                // Horizontal
+                var x = myChart.addCategoryAxis("x", ["Price Tier", "Channel"]);
+
+                // Vertical
+                var y = myChart.addMeasureAxis("y", "Unit Sales");
+
+
+                // Construct layout
+                // ------------------------------
+
+                // Add bars
+                myChart.addSeries("Channel", dimple.plot.bar);
+
+
+                // Add legend
+                // ------------------------------
+
+                var myLegend = myChart.addLegend(0, 5, "100%", 0, "right");
+
+
+                // Add styles
+                // ------------------------------
+
+                // Font size
+                x.fontSize = "12";
+                y.fontSize = "12";
+
+                // Font family
+                x.fontFamily = "Roboto";
+                y.fontFamily = "Roboto";
+
+                // Legend font style
+                myLegend.fontSize = "12";
+                myLegend.fontFamily = "Roboto";
+
+
+                //
+                // Draw chart
+                //
+
+                // Draw
+                myChart.draw();
+
+                // Position legend text
+                myLegend.shapes.selectAll("text").attr("dy", "1");
+
+
+                // Resize chart
+                // ------------------------------
+
+                // Add a method to draw the chart on resize of the window
+                $(window).on('resize', resize);
+                $('.sidebar-control').on('click', resize);
+
+                // Resize function
+                function resize() {
+
+                    // Redraw chart
+                    myChart.draw(0, true);
+
+                    // Position legend text
+                    myLegend.shapes.selectAll("text").attr("dy", "1");
+                }
+            });
+        }
+    };
+
+
+    //
+    // Return objects assigned to module
+    //
+
+    return {
+        init: function() {
+            _barHorizontalGrouped();
+        }
+    }
+}();
+
+
+// Initialize module
+// ------------------------------
+
+document.addEventListener('DOMContentLoaded', function() {
+    DimpleBarHorizontalGrouped.init();
+});

assets/global/js/demo_pages/charts/dimple/bars/bar_horizontal_stacked.js

@@ -0,0 +1,152 @@
+/* ------------------------------------------------------------------------------
+ *
+ *  # Dimple.js - horizontal stacked bars
+ *
+ *  Demo of stacked bar chart. Data stored in .tsv file format
+ *
+ * ---------------------------------------------------------------------------- */
+
+
+// Setup module
+// ------------------------------
+
+var DimpleBarHorizontalStacked = function() {
+
+
+    //
+    // Setup module components
+    //
+
+    // Chart
+    var _barHorizontalStacked = function() {
+        if (typeof dimple == 'undefined') {
+            console.warn('Warning - dimple.min.js is not loaded.');
+            return;
+        }
+
+        // Main variables
+        var element = document.getElementById('dimple-bar-horizontal-stacked');
+
+
+        // Initialize chart only if element exsists in the DOM
+        if(element) {
+
+            // Construct chart
+            var svg = dimple.newSvg(element, "100%", 500);
+
+
+            // Chart setup
+            // ------------------------------
+
+            d3.tsv("../../../../global_assets/demo_data/dimple/demo_data.tsv", function (data) {
+
+
+                // Create chart
+                // ------------------------------
+
+                // Define chart
+                var myChart = new dimple.chart(svg, data);
+
+                // Set bounds
+                myChart.setBounds(0, 0, "100%", "100%");
+
+                // Set margins
+                myChart.setMargins(60, 25, 0, 50);
+
+
+                // Create axes
+                // ------------------------------
+
+                // Horizontal
+                var x = myChart.addCategoryAxis("x", "Month");
+                    x.addOrderRule("Date");
+
+                // Vertical
+                var y = myChart.addMeasureAxis("y", "Unit Sales");
+
+
+                // Construct layout
+                // ------------------------------
+
+                // Add bars
+                myChart.addSeries("Channel", dimple.plot.bar);
+
+
+                // Add legend
+                // ------------------------------
+
+                var myLegend = myChart.addLegend(0, 5, "100%", 0, "right");
+
+
+                // Add styles
+                // ------------------------------
+
+                // Font size
+                x.fontSize = "12";
+                y.fontSize = "12";
+
+                // Font family
+                x.fontFamily = "Roboto";
+                y.fontFamily = "Roboto";
+
+                // Legend font style
+                myLegend.fontSize = "12";
+                myLegend.fontFamily = "Roboto";
+
+
+                //
+                // Draw chart
+                //
+
+                // Draw
+                myChart.draw();
+
+                // Remove axis titles
+                x.titleShape.remove();
+
+                // Position legend text
+                myLegend.shapes.selectAll("text").attr("dy", "1");
+
+
+                // Resize chart
+                // ------------------------------
+
+                // Add a method to draw the chart on resize of the window
+                $(window).on('resize', resize);
+                $('.sidebar-control').on('click', resize);
+
+                // Resize function
+                function resize() {
+
+                    // Redraw chart
+                    myChart.draw(0, true);
+
+                    // Remove axis titles
+                    x.titleShape.remove();
+
+                    // Position legend text
+                    myLegend.shapes.selectAll("text").attr("dy", "1");
+                }
+            });
+        }
+    };
+
+
+    //
+    // Return objects assigned to module
+    //
+
+    return {
+        init: function() {
+            _barHorizontalStacked();
+        }
+    }
+}();
+
+
+// Initialize module
+// ------------------------------
+
+document.addEventListener('DOMContentLoaded', function() {
+    DimpleBarHorizontalStacked.init();
+});

assets/global/js/demo_pages/charts/dimple/bars/bar_horizontal_stacked_grouped.js

@@ -0,0 +1,145 @@
+/* ------------------------------------------------------------------------------
+ *
+ *  # Dimple.js - horizontal grouped stacked bars
+ *
+ *  Demo of grouped stacked bar chart. Data stored in .tsv file format
+ *
+ * ---------------------------------------------------------------------------- */
+
+
+// Setup module
+// ------------------------------
+
+var DimpleBarHorizontalStackedGrouped = function() {
+
+
+    //
+    // Setup module components
+    //
+
+    // Chart
+    var _barHorizontalStackedGrouped = function() {
+        if (typeof dimple == 'undefined') {
+            console.warn('Warning - dimple.min.js is not loaded.');
+            return;
+        }
+
+        // Main variables
+        var element = document.getElementById('dimple-bar-horizontal-stacked-grouped');
+
+
+        // Initialize chart only if element exsists in the DOM
+        if(element) {
+
+            // Construct chart
+            var svg = dimple.newSvg(element, "100%", 500);
+
+
+            // Chart setup
+            // ------------------------------
+
+            d3.tsv("../../../../global_assets/demo_data/dimple/demo_data.tsv", function (data) {
+
+
+                // Create chart
+                // ------------------------------
+
+                // Define chart
+                var myChart = new dimple.chart(svg, data);
+
+                // Set bounds
+                myChart.setBounds(0, 0, "100%", "100%");
+
+                // Set margins
+                myChart.setMargins(60, 5, 120, 45);
+
+
+                // Create axes
+                // ------------------------------
+
+                // Horizontal
+                var x = myChart.addCategoryAxis("x", ["Price Tier", "Channel"]);
+
+                // Vertical
+                var y = myChart.addMeasureAxis("y", "Unit Sales");
+
+
+                // Construct layout
+                // ------------------------------
+
+                // Add bars
+                myChart.addSeries("Owner", dimple.plot.bar);
+
+
+                // Add legend
+                // ------------------------------
+
+                var myLegend = myChart.addLegend("100%", 0, 0, "100%", "right");
+
+
+                // Add styles
+                // ------------------------------
+
+                // Font size
+                x.fontSize = "12";
+                y.fontSize = "12";
+
+                // Font family
+                x.fontFamily = "Roboto";
+                y.fontFamily = "Roboto";
+
+                // Legend font style
+                myLegend.fontSize = "12";
+                myLegend.fontFamily = "Roboto";
+
+
+                //
+                // Draw chart
+                //
+
+                // Draw
+                myChart.draw();
+
+                // Position legend text
+                myLegend.shapes.selectAll("text").attr("dy", "1");
+
+
+                // Resize chart
+                // ------------------------------
+
+                // Add a method to draw the chart on resize of the window
+                $(window).on('resize', resize);
+                $('.sidebar-control').on('click', resize);
+
+                // Resize function
+                function resize() {
+
+                    // Redraw chart
+                    myChart.draw(0, true);
+
+                    // Position legend text
+                    myLegend.shapes.selectAll("text").attr("dy", "1");
+                }
+            });
+        }
+    };
+
+
+    //
+    // Return objects assigned to module
+    //
+
+    return {
+        init: function() {
+            _barHorizontalStackedGrouped();
+        }
+    }
+}();
+
+
+// Initialize module
+// ------------------------------
+
+document.addEventListener('DOMContentLoaded', function() {
+    DimpleBarHorizontalStackedGrouped.init();
+});

assets/global/js/demo_pages/charts/dimple/bars/bar_horizontal_stacked_normalized.js

@@ -0,0 +1,152 @@
+/* ------------------------------------------------------------------------------
+ *
+ *  # Dimple.js - horizontal normalized stacked bars
+ *
+ *  Demo of normalized stacked bar chart. Data stored in .tsv file format
+ *
+ * ---------------------------------------------------------------------------- */
+
+
+// Setup module
+// ------------------------------
+
+var DimpleBarHorizontalStackedNormalized = function() {
+
+
+    //
+    // Setup module components
+    //
+
+    // Chart
+    var _barHorizontalStackedNormalized = function() {
+        if (typeof dimple == 'undefined') {
+            console.warn('Warning - dimple.min.js is not loaded.');
+            return;
+        }
+
+        // Main variables
+        var element = document.getElementById('dimple-bar-horizontal-stacked-normalized');
+
+
+        // Initialize chart only if element exsists in the DOM
+        if(element) {
+
+            // Construct chart
+            var svg = dimple.newSvg(element, "100%", 500);
+
+
+            // Chart setup
+            // ------------------------------
+
+            d3.tsv("../../../../global_assets/demo_data/dimple/demo_data.tsv", function (data) {
+
+
+                // Create chart
+                // ------------------------------
+
+                // Define chart
+                var myChart = new dimple.chart(svg, data);
+
+                // Set bounds
+                myChart.setBounds(0, 0, "100%", "100%");
+
+                // Set margins
+                myChart.setMargins(60, 25, 0, 50);
+
+
+                // Create axes
+                // ------------------------------
+
+                // Horizontal
+                var x = myChart.addCategoryAxis("x", "Month");
+                    x.addOrderRule("Date");
+
+                // Vertical
+                var y = myChart.addPctAxis("y", "Unit Sales");
+
+
+                // Construct layout
+                // ------------------------------
+
+                // Add bars
+                myChart.addSeries("Channel", dimple.plot.bar);
+
+
+                // Add legend
+                // ------------------------------
+
+                var myLegend = myChart.addLegend(0, 5, "100%", 0, "right");
+
+
+                // Add styles
+                // ------------------------------
+
+                // Font size
+                x.fontSize = "12";
+                y.fontSize = "12";
+
+                // Font family
+                x.fontFamily = "Roboto";
+                y.fontFamily = "Roboto";
+
+                // Legend font style
+                myLegend.fontSize = "12";
+                myLegend.fontFamily = "Roboto";
+
+
+                //
+                // Draw chart
+                //
+
+                // Draw
+                myChart.draw();
+
+                // Remove axis titles
+                x.titleShape.remove();
+
+                // Position legend text
+                myLegend.shapes.selectAll("text").attr("dy", "1");
+
+
+                // Resize chart
+                // ------------------------------
+
+                // Add a method to draw the chart on resize of the window
+                $(window).on('resize', resize);
+                $('.sidebar-control').on('click', resize);
+
+                // Resize function
+                function resize() {
+
+                    // Redraw chart
+                    myChart.draw(0, true);
+
+                    // Remove axis titles
+                    x.titleShape.remove();
+
+                    // Position legend text
+                    myLegend.shapes.selectAll("text").attr("dy", "1");
+                }
+            });
+        }
+    };
+
+
+    //
+    // Return objects assigned to module
+    //
+
+    return {
+        init: function() {
+            _barHorizontalStackedNormalized();
+        }
+    }
+}();
+
+
+// Initialize module
+// ------------------------------
+
+document.addEventListener('DOMContentLoaded', function() {
+    DimpleBarHorizontalStackedNormalized.init();
+});

assets/global/js/demo_pages/charts/dimple/bars/bar_vertical.js

@@ -0,0 +1,136 @@
+/* ------------------------------------------------------------------------------
+ *
+ *  # Dimple.js - vertical bars
+ *
+ *  Demo of bar chart. Data stored in .tsv file format
+ *
+ * ---------------------------------------------------------------------------- */
+
+
+// Setup module
+// ------------------------------
+
+var DimpleBarVertical = function() {
+
+
+    //
+    // Setup module components
+    //
+
+    // Chart
+    var _barVertical = function() {
+        if (typeof dimple == 'undefined') {
+            console.warn('Warning - dimple.min.js is not loaded.');
+            return;
+        }
+
+        // Main variables
+        var element = document.getElementById('dimple-bar-vertical');
+
+
+        // Initialize chart only if element exsists in the DOM
+        if(element) {
+
+            // Construct chart
+            var svg = dimple.newSvg(element, "100%", 500);
+
+
+            // Chart setup
+            // ------------------------------
+
+            d3.tsv("../../../../global_assets/demo_data/dimple/demo_data.tsv", function (data) {
+
+
+                // Create chart
+                // ------------------------------
+
+                // Define chart
+                var myChart = new dimple.chart(svg, data);
+
+                // Set bounds
+                myChart.setBounds(0, 0, "100%", "100%")
+
+                // Set margins
+                myChart.setMargins(70, 5, 20, 30);
+
+
+                // Create axes
+                // ------------------------------
+
+                // Horizontal
+                var x = myChart.addMeasureAxis("x", "Unit Sales");
+
+                // Vertical
+                var y = myChart.addCategoryAxis("y", "Month");
+                    y.addOrderRule("Date");
+
+
+                // Construct layout
+                // ------------------------------
+
+                // Add bars
+                myChart.addSeries(null, dimple.plot.bar);
+
+
+                // Add styles
+                // ------------------------------
+
+                // Font size
+                x.fontSize = "12";
+                y.fontSize = "12";
+
+                // Font family
+                x.fontFamily = "Roboto";
+                y.fontFamily = "Roboto";
+
+
+                //
+                // Draw chart
+                //
+
+                // Draw
+                myChart.draw();
+
+                // Remove axis titles
+                x.titleShape.remove();
+
+
+                // Resize chart
+                // ------------------------------
+
+                // Add a method to draw the chart on resize of the window
+                $(window).on('resize', resize);
+                $('.sidebar-control').on('click', resize);
+
+                // Resize function
+                function resize() {
+
+                    // Redraw chart
+                    myChart.draw(0, true);
+
+                    // Remove axis titles
+                    x.titleShape.remove();
+                }
+            });
+        }
+    };
+
+
+    //
+    // Return objects assigned to module
+    //
+
+    return {
+        init: function() {
+            _barVertical();
+        }
+    }
+}();
+
+
+// Initialize module
+// ------------------------------
+
+document.addEventListener('DOMContentLoaded', function() {
+    DimpleBarVertical.init();
+});

assets/global/js/demo_pages/charts/dimple/bars/bar_vertical_grouped.js

@@ -0,0 +1,145 @@
+/* ------------------------------------------------------------------------------
+ *
+ *  # Dimple.js - vertical grouped bars
+ *
+ *  Demo of grouped bar chart. Data stored in .tsv file format
+ *
+ * ---------------------------------------------------------------------------- */
+
+
+// Setup module
+// ------------------------------
+
+var DimpleBarVerticalGrouped = function() {
+
+
+    //
+    // Setup module components
+    //
+
+    // Chart
+    var _barVerticalGrouped = function() {
+        if (typeof dimple == 'undefined') {
+            console.warn('Warning - dimple.min.js is not loaded.');
+            return;
+        }
+
+        // Main variables
+        var element = document.getElementById('dimple-bar-vertical-grouped');
+
+
+        // Initialize chart only if element exsists in the DOM
+        if(element) {
+
+            // Construct chart
+            var svg = dimple.newSvg(element, "100%", 500);
+
+
+            // Chart setup
+            // ------------------------------
+
+            d3.tsv("../../../../global_assets/demo_data/dimple/demo_data.tsv", function (data) {
+
+
+                // Create chart
+                // ------------------------------
+
+                // Define chart
+                var myChart = new dimple.chart(svg, data);
+
+                // Set bounds
+                myChart.setBounds(0, 0, "100%", "100%");
+
+                // Set margins
+                myChart.setMargins(60, 25, 20, 45);
+
+
+                // Create axes
+                // ------------------------------
+
+                // Horizontal
+                var x = myChart.addMeasureAxis("x", "Unit Sales");
+
+                // Vertical
+                var y = myChart.addCategoryAxis("y", ["Price Tier", "Channel"]);
+
+
+                // Construct layout
+                // ------------------------------
+
+                // Add bars
+                myChart.addSeries("Channel", dimple.plot.bar);
+
+
+                // Add legend
+                // ------------------------------
+
+                var myLegend = myChart.addLegend(0, 5, "100%", 0, "right");
+
+
+                // Add styles
+                // ------------------------------
+
+                // Font size
+                x.fontSize = "12";
+                y.fontSize = "12";
+
+                // Font family
+                x.fontFamily = "Roboto";
+                y.fontFamily = "Roboto";
+
+                // Legend font style
+                myLegend.fontSize = "12";
+                myLegend.fontFamily = "Roboto";
+
+
+                //
+                // Draw chart
+                //
+
+                // Draw
+                myChart.draw();
+
+                // Position legend text
+                myLegend.shapes.selectAll("text").attr("dy", "1");
+
+
+                // Resize chart
+                // ------------------------------
+
+                // Add a method to draw the chart on resize of the window
+                $(window).on('resize', resize);
+                $('.sidebar-control').on('click', resize);
+
+                // Resize function
+                function resize() {
+
+                    // Redraw chart
+                    myChart.draw(0, true);
+
+                    // Position legend text
+                    myLegend.shapes.selectAll("text").attr("dy", "1");
+                }
+            });
+        }
+    };
+
+
+    //
+    // Return objects assigned to module
+    //
+
+    return {
+        init: function() {
+            _barVerticalGrouped();
+        }
+    }
+}();
+
+
+// Initialize module
+// ------------------------------
+
+document.addEventListener('DOMContentLoaded', function() {
+    DimpleBarVerticalGrouped.init();
+});

assets/global/js/demo_pages/charts/dimple/bars/bar_vertical_stacked.js

@@ -0,0 +1,152 @@
+/* ------------------------------------------------------------------------------
+ *
+ *  # Dimple.js - vertical stacked bars
+ *
+ *  Demo of stacked bar chart. Data stored in .tsv file format
+ *
+ * ---------------------------------------------------------------------------- */
+
+
+// Setup module
+// ------------------------------
+
+var DimpleBarVerticalStacked = function() {
+
+
+    //
+    // Setup module components
+    //
+
+    // Chart
+    var _barVerticalStacked = function() {
+        if (typeof dimple == 'undefined') {
+            console.warn('Warning - dimple.min.js is not loaded.');
+            return;
+        }
+
+        // Main variables
+        var element = document.getElementById('dimple-bar-vertical-stacked');
+
+
+        // Initialize chart only if element exsists in the DOM
+        if(element) {
+
+            // Construct chart
+            var svg = dimple.newSvg(element, "100%", 500);
+
+
+            // Chart setup
+            // ------------------------------
+
+            d3.tsv("../../../../global_assets/demo_data/dimple/demo_data.tsv", function (data) {
+
+
+                // Create chart
+                // ------------------------------
+
+                // Define chart
+                var myChart = new dimple.chart(svg, data);
+
+                // Set bounds
+                myChart.setBounds(0, 0, "100%", "100%");
+
+                // Set margins
+                myChart.setMargins(70, 25, 20, 30);
+
+
+                // Create axes
+                // ------------------------------
+
+                // Horizontal
+                var x = myChart.addMeasureAxis("x", "Unit Sales");
+
+                // Vertical
+                var y = myChart.addCategoryAxis("y", "Month");
+                    y.addOrderRule("Date");
+
+
+                // Construct layout
+                // ------------------------------
+
+                // Add bars
+                myChart.addSeries("Channel", dimple.plot.bar);
+
+
+                // Add legend
+                // ------------------------------
+
+                var myLegend = myChart.addLegend(0, 5, "100%", 0, "right");
+
+
+                // Add styles
+                // ------------------------------
+
+                // Font size
+                x.fontSize = "12";
+                y.fontSize = "12";
+
+                // Font family
+                x.fontFamily = "Roboto";
+                y.fontFamily = "Roboto";
+
+                // Legend font style
+                myLegend.fontSize = "12";
+                myLegend.fontFamily = "Roboto";
+
+
+                //
+                // Draw chart
+                //
+
+                // Draw
+                myChart.draw();
+
+                // Remove axis titles
+                x.titleShape.remove();
+
+                // Position legend text
+                myLegend.shapes.selectAll("text").attr("dy", "1");
+
+
+                // Resize chart
+                // ------------------------------
+
+                // Add a method to draw the chart on resize of the window
+                $(window).on('resize', resize);
+                $('.sidebar-control').on('click', resize);
+
+                // Resize function
+                function resize() {
+
+                    // Redraw chart
+                    myChart.draw(0, true);
+
+                    // Remove axis titles
+                    x.titleShape.remove();
+
+                    // Position legend text
+                    myLegend.shapes.selectAll("text").attr("dy", "1");
+                }
+            });
+        }
+    };
+
+
+    //
+    // Return objects assigned to module
+    //
+
+    return {
+        init: function() {
+            _barVerticalStacked();
+        }
+    }
+}();
+
+
+// Initialize module
+// ------------------------------
+
+document.addEventListener('DOMContentLoaded', function() {
+    DimpleBarVerticalStacked.init();
+});

assets/global/js/demo_pages/charts/dimple/bars/bar_vertical_stacked_grouped.js

@@ -0,0 +1,145 @@
+/* ------------------------------------------------------------------------------
+ *
+ *  # Dimple.js - vertical grouped stacked bars
+ *
+ *  Demo of grouped stacked bar chart. Data stored in .tsv file format
+ *
+ * ---------------------------------------------------------------------------- */
+
+
+// Setup module
+// ------------------------------
+
+var DimpleBarVerticalStackedGrouped = function() {
+
+
+    //
+    // Setup module components
+    //
+
+    // Chart
+    var _barVerticalStackedGrouped = function() {
+        if (typeof dimple == 'undefined') {
+            console.warn('Warning - dimple.min.js is not loaded.');
+            return;
+        }
+
+        // Main variables
+        var element = document.getElementById('dimple-bar-vertical-stacked-grouped');
+
+
+        // Initialize chart only if element exsists in the DOM
+        if(element) {
+
+            // Construct chart
+            var svg = dimple.newSvg(element, "100%", 500);
+
+
+            // Chart setup
+            // ------------------------------
+
+            d3.tsv("../../../../global_assets/demo_data/dimple/demo_data.tsv", function (data) {
+
+
+                // Create chart
+                // ------------------------------
+
+                // Define chart
+                var myChart = new dimple.chart(svg, data);
+
+                // Set bounds
+                myChart.setBounds(0, 0, "100%", "100%");
+
+                // Set margins
+                myChart.setMargins(55, 5, 120, 45);
+
+
+                // Create axes
+                // ------------------------------
+
+                // Horizontal
+                var x = myChart.addMeasureAxis("x", "Unit Sales");
+
+                // Vertical
+                var y = myChart.addCategoryAxis("y", ["Price Tier", "Channel"]);
+
+
+                // Construct layout
+                // ------------------------------
+
+                // Add bars
+                myChart.addSeries("Owner", dimple.plot.bar);
+
+
+                // Add legend
+                // ------------------------------
+
+                var myLegend = myChart.addLegend("100%", 0, 0, "100%", "right");
+
+
+                // Add styles
+                // ------------------------------
+
+                // Font size
+                x.fontSize = "12";
+                y.fontSize = "12";
+
+                // Font family
+                x.fontFamily = "Roboto";
+                y.fontFamily = "Roboto";
+
+                // Legend font style
+                myLegend.fontSize = "12";
+                myLegend.fontFamily = "Roboto";
+
+
+                //
+                // Draw chart
+                //
+
+                // Draw
+                myChart.draw();
+
+                // Position legend text
+                myLegend.shapes.selectAll("text").attr("dy", "1");
+
+
+                // Resize chart
+                // ------------------------------
+
+                // Add a method to draw the chart on resize of the window
+                $(window).on('resize', resize);
+                $('.sidebar-control').on('click', resize);
+
+                // Resize function
+                function resize() {
+
+                    // Redraw chart
+                    myChart.draw(0, true);
+
+                    // Position legend text
+                    myLegend.shapes.selectAll("text").attr("dy", "1");
+                }
+            });
+        }
+    };
+
+
+    //
+    // Return objects assigned to module
+    //
+
+    return {
+        init: function() {
+            _barVerticalStackedGrouped();
+        }
+    }
+}();
+
+
+// Initialize module
+// ------------------------------
+
+document.addEventListener('DOMContentLoaded', function() {
+    DimpleBarVerticalStackedGrouped.init();
+});

assets/global/js/demo_pages/charts/dimple/bars/bar_vertical_stacked_normalized.js

@@ -0,0 +1,152 @@
+/* ------------------------------------------------------------------------------
+ *
+ *  # Dimple.js - vertical normalized stacked bars
+ *
+ *  Demo of normalized stacked bar chart. Data stored in .tsv file format
+ *
+ * ---------------------------------------------------------------------------- */
+
+
+// Setup module
+// ------------------------------
+
+var DimpleBarVerticalStackedNormalized = function() {
+
+
+    //
+    // Setup module components
+    //
+
+    // Chart
+    var _barVerticalStackedNormalized = function() {
+        if (typeof dimple == 'undefined') {
+            console.warn('Warning - dimple.min.js is not loaded.');
+            return;
+        }
+
+        // Main variables
+        var element = document.getElementById('dimple-bar-vertical-stacked-normalized');
+
+
+        // Initialize chart only if element exsists in the DOM
+        if(element) {
+
+            // Construct chart
+            var svg = dimple.newSvg(element, "100%", 500);
+
+
+            // Chart setup
+            // ------------------------------
+
+            d3.tsv("../../../../global_assets/demo_data/dimple/demo_data.tsv", function (data) {
+
+
+                // Create chart
+                // ------------------------------
+
+                // Define chart
+                var myChart = new dimple.chart(svg, data);
+
+                // Set bounds
+                myChart.setBounds(0, 0, "100%", "100%");
+
+                // Set margins
+                myChart.setMargins(70, 25, 20, 30);
+
+
+                // Create axes
+                // ------------------------------
+
+                // Horizontal
+                var x = myChart.addPctAxis("x", "Unit Sales");
+
+                // Vertical
+                var y = myChart.addCategoryAxis("y", "Month");
+                    y.addOrderRule("Date");
+
+
+                // Construct layout
+                // ------------------------------
+
+                // Add bars
+                myChart.addSeries("Channel", dimple.plot.bar);
+
+
+                // Add legend
+                // ------------------------------
+
+                var myLegend = myChart.addLegend(0, 5, "100%", 0, "right");
+
+
+                // Add styles
+                // ------------------------------
+
+                // Font size
+                x.fontSize = "12";
+                y.fontSize = "12";
+
+                // Font family
+                x.fontFamily = "Roboto";
+                y.fontFamily = "Roboto";
+
+                // Legend font style
+                myLegend.fontSize = "12";
+                myLegend.fontFamily = "Roboto";
+
+
+                //
+                // Draw chart
+                //
+
+                // Draw
+                myChart.draw();
+
+                // Remove axis titles
+                x.titleShape.remove();
+
+                // Position legend text
+                myLegend.shapes.selectAll("text").attr("dy", "1");
+
+
+                // Resize chart
+                // ------------------------------
+
+                // Add a method to draw the chart on resize of the window
+                $(window).on('resize', resize);
+                $('.sidebar-control').on('click', resize);
+
+                // Resize function
+                function resize() {
+
+                    // Redraw chart
+                    myChart.draw(0, true);
+
+                    // Remove axis titles
+                    x.titleShape.remove();
+
+                    // Position legend text
+                    myLegend.shapes.selectAll("text").attr("dy", "1");
+                }
+            });
+        }
+    };
+
+
+    //
+    // Return objects assigned to module
+    //
+
+    return {
+        init: function() {
+            _barVerticalStackedNormalized();
+        }
+    }
+}();
+
+
+// Initialize module
+// ------------------------------
+
+document.addEventListener('DOMContentLoaded', function() {
+    DimpleBarVerticalStackedNormalized.init();
+});

assets/global/js/demo_pages/charts/dimple/bubble/bubble_basic.js

@@ -0,0 +1,151 @@
+/* ------------------------------------------------------------------------------
+ *
+ *  # Dimple.js - basic bubbles
+ *
+ *  Demo of bubble chart with legend. Data stored in .tsv file format
+ *
+ * ---------------------------------------------------------------------------- */
+
+
+// Setup module
+// ------------------------------
+
+var DimpleBubbleBasic = function() {
+
+
+    //
+    // Setup module components
+    //
+
+    // Chart
+    var _bubbleBasic = function() {
+        if (typeof dimple == 'undefined') {
+            console.warn('Warning - dimple.min.js is not loaded.');
+            return;
+        }
+
+        // Main variables
+        var element = document.getElementById('dimple-bubble-basic');
+
+
+        // Initialize chart only if element exsists in the DOM
+        if(element) {
+
+            // Construct chart
+            var svg = dimple.newSvg(element, "100%", 500);
+
+
+            // Chart setup
+            // ------------------------------
+
+            d3.tsv("../../../../global_assets/demo_data/dimple/demo_data.tsv", function (data) {
+
+                // Filter data
+                data = dimple.filterData(data, "Date", "01/12/2011");
+
+
+                // Create chart
+                // ------------------------------
+
+                // Define chart
+                var myChart = new dimple.chart(svg, data);
+
+                // Set bounds
+                myChart.setBounds(0, 0, "100%", "100%");
+
+                // Set margins
+                myChart.setMargins(50, 25, 15, 45);
+
+
+                // Create axes
+                // ------------------------------
+
+                // Horizontal
+                var x = myChart.addMeasureAxis("x", "Unit Sales Monthly Change");
+
+                // Vertical
+                var y = myChart.addMeasureAxis("y", "Price Monthly Change");
+
+                // Other axes
+                myChart.addMeasureAxis("z", "Operating Profit");
+
+
+                // Construct layout
+                // ------------------------------
+
+                // Add bubbles
+                myChart.addSeries(["SKU", "Channel"], dimple.plot.bubble);
+
+
+                // Add legend
+                // ------------------------------
+
+                var myLegend = myChart.addLegend(0, 5, "100%", 0, "right");
+
+
+                // Add styles
+                // ------------------------------
+
+                // Font size
+                x.fontSize = "12";
+                y.fontSize = "12";
+
+                // Font family
+                x.fontFamily = "Roboto";
+                y.fontFamily = "Roboto";
+
+                // Legend font style
+                myLegend.fontSize = "12";
+                myLegend.fontFamily = "Roboto";
+
+
+                //
+                // Draw chart
+                //
+
+                // Draw
+                myChart.draw();
+
+                // Position legend text
+                myLegend.shapes.selectAll("text").attr("dy", "1");
+
+
+                // Resize chart
+                // ------------------------------
+
+                // Add a method to draw the chart on resize of the window
+                $(window).on('resize', resize);
+                $('.sidebar-control').on('click', resize);
+
+                // Resize function
+                function resize() {
+
+                    // Redraw chart
+                    myChart.draw(0, true);
+
+                    // Position legend text
+                    myLegend.shapes.selectAll("text").attr("dy", "1");
+                }
+            });
+        }
+    };
+
+
+    //
+    // Return objects assigned to module
+    //
+
+    return {
+        init: function() {
+            _bubbleBasic();
+        }
+    }
+}();
+
+
+// Initialize module
+// ------------------------------
+
+document.addEventListener('DOMContentLoaded', function() {
+    DimpleBubbleBasic.init();
+});

assets/global/js/demo_pages/charts/dimple/bubble/bubble_horizontal_lollipop.js

@@ -0,0 +1,160 @@
+/* ------------------------------------------------------------------------------
+ *
+ *  # Dimple.js - horizontal lollipop
+ *
+ *  Demo of horizontal lollipop chart. Data stored in .tsv file format
+ *
+ * ---------------------------------------------------------------------------- */
+
+
+// Setup module
+// ------------------------------
+
+var DimpleBubbleLollipopHorizontal = function() {
+
+
+    //
+    // Setup module components
+    //
+
+    // Chart
+    var _bubbleLollipopHorizontal = function() {
+        if (typeof dimple == 'undefined') {
+            console.warn('Warning - dimple.min.js is not loaded.');
+            return;
+        }
+
+        // Main variables
+        var element = document.getElementById('dimple-bubble-lollipop-horizontal');
+
+
+        // Initialize chart only if element exsists in the DOM
+        if(element) {
+
+            // Construct chart
+            var svg = dimple.newSvg(element, "100%", 500);
+
+
+            // Chart setup
+            // ------------------------------
+
+            d3.tsv("../../../../global_assets/demo_data/dimple/demo_data.tsv", function (data) {
+
+                // Filter data
+                data = dimple.filterData(data, "Date", [
+                    "01/07/2011", "01/08/2011", "01/09/2011",
+                    "01/10/2011", "01/11/2011", "01/12/2011"
+                ]);
+
+
+                // Create chart
+                // ------------------------------
+
+                // Define chart
+                var myChart = new dimple.chart(svg, data);
+
+                // Set bounds
+                myChart.setBounds(0, 0, "100%", "100%");
+
+                // Set margins
+                myChart.setMargins(70, 25, 20, 45);
+
+
+                // Create axes
+                // ------------------------------
+
+                // Horizontal
+                var x = myChart.addMeasureAxis("x", "Unit Sales");
+
+                // Vertical
+                var y = myChart.addCategoryAxis("y", "Month");
+
+                // Order by date
+                y.addOrderRule("Date");
+
+                // Show vertical grid lines
+                y.showGridlines = true;
+
+                // Other axes
+                myChart.addMeasureAxis("z", "Operating Profit");
+
+
+                // Construct layout
+                // ------------------------------
+
+                // Add bubbles
+                myChart.addSeries("Channel", dimple.plot.bubble);
+
+
+                // Add legend
+                // ------------------------------
+
+                var myLegend = myChart.addLegend(0, 5, "100%", 0, "left");
+
+
+                // Add styles
+                // ------------------------------
+
+                // Font size
+                x.fontSize = "12";
+                y.fontSize = "12";
+
+                // Font family
+                x.fontFamily = "Roboto";
+                y.fontFamily = "Roboto";
+
+                // Legend font style
+                myLegend.fontSize = "12";
+                myLegend.fontFamily = "Roboto";
+
+
+                //
+                // Draw chart
+                //
+
+                // Draw
+                myChart.draw();
+
+                // Position legend text
+                myLegend.shapes.selectAll("text").attr("dy", "1");
+
+
+                // Resize chart
+                // ------------------------------
+
+                // Add a method to draw the chart on resize of the window
+                $(window).on('resize', resize);
+                $('.sidebar-control').on('click', resize);
+
+                // Resize function
+                function resize() {
+
+                    // Redraw chart
+                    myChart.draw(0, true);
+
+                    // Position legend text
+                    myLegend.shapes.selectAll("text").attr("dy", "1");
+                }
+            });
+        }
+    };
+
+
+    //
+    // Return objects assigned to module
+    //
+
+    return {
+        init: function() {
+            _bubbleLollipopHorizontal();
+        }
+    }
+}();
+
+
+// Initialize module
+// ------------------------------
+
+document.addEventListener('DOMContentLoaded', function() {
+    DimpleBubbleLollipopHorizontal.init();
+});

assets/global/js/demo_pages/charts/dimple/bubble/bubble_lollipop_grouped.js

@@ -0,0 +1,148 @@
+/* ------------------------------------------------------------------------------
+ *
+ *  # Dimple.js - grouped lollipop
+ *
+ *  Demo of grouped lollipop chart. Data stored in .tsv file format
+ *
+ * ---------------------------------------------------------------------------- */
+
+
+// Setup module
+// ------------------------------
+
+var DimpleBubbleLollipopGrouped = function() {
+
+
+    //
+    // Setup module components
+    //
+
+    // Chart
+    var _bubbleLollipopGrouped = function() {
+        if (typeof dimple == 'undefined') {
+            console.warn('Warning - dimple.min.js is not loaded.');
+            return;
+        }
+
+        // Main variables
+        var element = document.getElementById('dimple-bubble-lollipop-grouped');
+
+
+        // Initialize chart only if element exsists in the DOM
+        if(element) {
+
+            // Construct chart
+            var svg = dimple.newSvg(element, "100%", 500);
+
+
+            // Chart setup
+            // ------------------------------
+
+            d3.tsv("../../../../global_assets/demo_data/dimple/demo_data.tsv", function (data) {
+
+
+                // Create chart
+                // ------------------------------
+
+                // Define chart
+                var myChart = new dimple.chart(svg, data);
+
+                // Set bounds
+                myChart.setBounds(0, 0, "100%", "100%");
+
+                // Set margins
+                myChart.setMargins(55, 38, 10, 45);
+
+
+                // Create axes
+                // ------------------------------
+
+                // Horizontal
+                var x = myChart.addCategoryAxis("x", ["Price Tier", "Channel"]);
+
+                // Vertical
+                var y = myChart.addMeasureAxis("y", "Unit Sales");
+
+                // Other axes
+                myChart.addMeasureAxis("z", "Operating Profit");
+
+
+                // Construct layout
+                // ------------------------------
+
+                // Add bubbles
+                myChart.addSeries("Channel", dimple.plot.bubble);
+
+
+                // Add legend
+                // ------------------------------
+
+                var myLegend = myChart.addLegend(0, 20, "100%", 0, "right");
+
+
+                // Add styles
+                // ------------------------------
+
+                // Font size
+                x.fontSize = "12";
+                y.fontSize = "12";
+
+                // Font family
+                x.fontFamily = "Roboto";
+                y.fontFamily = "Roboto";
+
+                // Legend font style
+                myLegend.fontSize = "12";
+                myLegend.fontFamily = "Roboto";
+
+
+                //
+                // Draw chart
+                //
+
+                // Draw
+                myChart.draw();
+
+                // Position legend text
+                myLegend.shapes.selectAll("text").attr("dy", "1");
+
+
+                // Resize chart
+                // ------------------------------
+
+                // Add a method to draw the chart on resize of the window
+                $(window).on('resize', resize);
+                $('.sidebar-control').on('click', resize);
+
+                // Resize function
+                function resize() {
+
+                    // Redraw chart
+                    myChart.draw(0, true);
+
+                    // Position legend text
+                    myLegend.shapes.selectAll("text").attr("dy", "1");
+                }
+            });
+        }
+    };
+
+
+    //
+    // Return objects assigned to module
+    //
+
+    return {
+        init: function() {
+            _bubbleLollipopGrouped();
+        }
+    }
+}();
+
+
+// Initialize module
+// ------------------------------
+
+document.addEventListener('DOMContentLoaded', function() {
+    DimpleBubbleLollipopGrouped.init();
+});

assets/global/js/demo_pages/charts/dimple/bubble/bubble_matrix.js

@@ -0,0 +1,154 @@
+/* ------------------------------------------------------------------------------
+ *
+ *  # Dimple.js - bubble matrix
+ *
+ *  Demo of bubble matrix. Data stored in .tsv file format
+ *
+ * ---------------------------------------------------------------------------- */
+
+
+// Setup module
+// ------------------------------
+
+var DimpleBubbleMatrix = function() {
+
+
+    //
+    // Setup module components
+    //
+
+    // Chart
+    var _bubbleMatrix = function() {
+        if (typeof dimple == 'undefined') {
+            console.warn('Warning - dimple.min.js is not loaded.');
+            return;
+        }
+
+        // Main variables
+        var element = document.getElementById('dimple-bubble-matrix');
+
+
+        // Initialize chart only if element exsists in the DOM
+        if(element) {
+
+            // Construct chart
+            var svg = dimple.newSvg(element, "100%", 500);
+
+
+            // Chart setup
+            // ------------------------------
+
+            d3.tsv("../../../../global_assets/demo_data/dimple/demo_data.tsv", function (data) {
+
+
+                // Create chart
+                // ------------------------------
+
+                // Define chart
+                var myChart = new dimple.chart(svg, data);
+
+                // Set bounds
+                myChart.setBounds(0, 0, "100%", "100%");
+
+                // Set margins
+                myChart.setMargins(95, 25, 10, 45);
+
+
+                // Create axes
+                // ------------------------------
+
+                // Horizontal
+                var x = myChart.addCategoryAxis("x", ["Channel", "Price Tier"]);
+
+                // Vertical
+                var y = myChart.addCategoryAxis("y", "Owner");
+
+                // Other axes
+                var z = myChart.addMeasureAxis("z", "Distribution");
+
+                // Display grid lines
+                x.showGridlines = true;
+                y.showGridlines = true;
+
+
+                // Construct layout
+                // ------------------------------
+
+                // Add bubbles
+                var s = myChart.addSeries("Price Tier", dimple.plot.bubble);
+                    s.aggregate = dimple.aggregateMethod.max;
+                    z.overrideMax = 200;
+
+
+                // Add legend
+                // ------------------------------
+
+                var myLegend = myChart.addLegend(0, 5, "100%", 0, "right");
+
+
+                // Add styles
+                // ------------------------------
+
+                // Font size
+                x.fontSize = "12";
+                y.fontSize = "12";
+
+                // Font family
+                x.fontFamily = "Roboto";
+                y.fontFamily = "Roboto";
+
+                // Legend font style
+                myLegend.fontSize = "12";
+                myLegend.fontFamily = "Roboto";
+
+
+                //
+                // Draw chart
+                //
+
+                // Draw
+                myChart.draw();
+
+                // Position legend text
+                myLegend.shapes.selectAll("text").attr("dy", "1");
+
+
+                // Resize chart
+                // ------------------------------
+
+                // Add a method to draw the chart on resize of the window
+                $(window).on('resize', resize);
+                $('.sidebar-control').on('click', resize);
+
+                // Resize function
+                function resize() {
+
+                    // Redraw chart
+                    myChart.draw(0, true);
+
+                    // Position legend text
+                    myLegend.shapes.selectAll("text").attr("dy", "1");
+                }
+            });
+        }
+    };
+
+
+    //
+    // Return objects assigned to module
+    //
+
+    return {
+        init: function() {
+            _bubbleMatrix();
+        }
+    }
+}();
+
+
+// Initialize module
+// ------------------------------
+
+document.addEventListener('DOMContentLoaded', function() {
+    DimpleBubbleMatrix.init();
+});

assets/global/js/demo_pages/charts/dimple/bubble/bubble_vertical_lollipop.js

@@ -0,0 +1,155 @@
+/* ------------------------------------------------------------------------------
+ *
+ *  # Dimple.js - vertical lollipop
+ *
+ *  Demo of vertical lollipop chart. Data stored in .tsv file format
+ *
+ * ---------------------------------------------------------------------------- */
+
+
+// Setup module
+// ------------------------------
+
+var DimpleBubbleVerticalLollipop = function() {
+
+
+    //
+    // Setup module components
+    //
+
+    // Chart
+    var _bubbleVerticalLollipop = function() {
+        if (typeof dimple == 'undefined') {
+            console.warn('Warning - dimple.min.js is not loaded.');
+            return;
+        }
+
+        // Main variables
+        var element = document.getElementById('dimple-bubble-lollipop-vertical');
+
+
+        // Initialize chart only if element exsists in the DOM
+        if(element) {
+
+            // Construct chart
+            var svg = dimple.newSvg(element, "100%", 500);
+
+
+            // Chart setup
+            // ------------------------------
+
+            d3.tsv("../../../../global_assets/demo_data/dimple/demo_data.tsv", function (data) {
+
+                // Filter data
+                data = dimple.filterData(data, "Date", [
+                    "01/07/2011", "01/08/2011", "01/09/2011",
+                    "01/10/2011", "01/11/2011", "01/12/2011"
+                ]);
+
+
+                // Create chart
+                // ------------------------------
+
+                // Define chart
+                var myChart = new dimple.chart(svg, data);
+
+                // Set bounds
+                myChart.setBounds(0, 0, "100%", "100%");
+
+                // Set margins
+                myChart.setMargins(55, 35, 10, 45);
+
+
+                // Create axes
+                // ------------------------------
+
+                // Horizontal
+                var x = myChart.addCategoryAxis("x", "Month");
+                    x.addOrderRule("Date");
+
+                // Vertical
+                var y = myChart.addMeasureAxis("y", "Unit Sales");
+
+                // Other axes
+                myChart.addMeasureAxis("z", "Operating Profit");
+
+
+                // Construct layout
+                // ------------------------------
+
+                // Add bubbles
+                myChart.addSeries("Channel", dimple.plot.bubble);
+
+
+                // Add legend
+                // ------------------------------
+
+                var myLegend = myChart.addLegend(0, 5, "100%", 0, "left");
+
+
+                // Add styles
+                // ------------------------------
+
+                // Font size
+                x.fontSize = "12";
+                y.fontSize = "12";
+
+                // Font family
+                x.fontFamily = "Roboto";
+                y.fontFamily = "Roboto";
+
+                // Legend font style
+                myLegend.fontSize = "12";
+                myLegend.fontFamily = "Roboto";
+
+
+                //
+                // Draw chart
+                //
+
+                // Draw
+                myChart.draw();
+
+                // Position legend text
+                myLegend.shapes.selectAll("text").attr("dy", "1");
+
+
+                // Resize chart
+                // ------------------------------
+
+                // Add a method to draw the chart on resize of the window
+                $(window).on('resize', resize);
+                $('.sidebar-control').on('click', resize);
+
+                // Resize function
+                function resize() {
+
+                    // Redraw chart
+                    myChart.draw(0, true);
+
+                    // Position legend text
+                    myLegend.shapes.selectAll("text").attr("dy", "1");
+                }
+            });
+        }
+    };
+
+
+    //
+    // Return objects assigned to module
+    //
+
+    return {
+        init: function() {
+            _bubbleVerticalLollipop();
+        }
+    }
+}();
+
+
+// Initialize module
+// ------------------------------
+
+document.addEventListener('DOMContentLoaded', function() {
+    DimpleBubbleVerticalLollipop.init();
+});

assets/global/js/demo_pages/charts/dimple/lines/line_horizontal_multiple.js

@@ -0,0 +1,162 @@
+/* ------------------------------------------------------------------------------
+ *
+ *  # Dimple.js - multiple horizontal lines
+ *
+ *  Demo of multiple line chart. Data stored in .tsv file format
+ *
+ * ---------------------------------------------------------------------------- */
+
+
+// Setup module
+// ------------------------------
+
+var DimpleLineHorizontalMultiple = function() {
+
+
+    //
+    // Setup module components
+    //
+
+    // Chart
+    var _lineHorizontalMultiple = function() {
+        if (typeof dimple == 'undefined') {
+            console.warn('Warning - dimple.min.js is not loaded.');
+            return;
+        }
+
+        // Main variables
+        var element = document.getElementById('dimple-line-horizontal-multiple');
+
+
+        // Initialize chart only if element exsists in the DOM
+        if(element) {
+
+            // Construct chart
+            var svg = dimple.newSvg(element, "100%", 500);
+
+
+            // Chart setup
+            // ------------------------------
+
+            d3.tsv("../../../../global_assets/demo_data/dimple/demo_data.tsv", function (data) {
+
+                // Filter data
+                data = dimple.filterData(data, "Owner", ["Aperture", "Black Mesa"])
+
+
+                // Create chart
+                // ------------------------------
+
+                // Define chart
+                var myChart = new dimple.chart(svg, data);
+
+                // Set bounds
+                myChart.setBounds(0, 0, "100%", "100%");
+
+                // Set margins
+                myChart.setMargins(40, 25, 0, 50);
+
+
+                // Create axes
+                // ------------------------------
+
+                // Horizontal
+                var x = myChart.addCategoryAxis("x", "Month");
+                    x.addOrderRule("Date");
+
+                // Vertical
+                var y = myChart.addMeasureAxis("y", "Unit Sales");
+
+
+                // Construct layout
+                // ------------------------------
+
+                // Add line
+                myChart
+                    .addSeries("Channel", dimple.plot.line)
+                    .interpolation = "basis";
+
+
+                // Add legend
+                // ------------------------------
+
+                var myLegend = myChart
+                    .addLegend(0, 5, "100%", 0, "right");
+
+
+                // Add styles
+                // ------------------------------
+
+                // Font size
+                x.fontSize = "12";
+                y.fontSize = "12";
+
+                // Font family
+                x.fontFamily = "Roboto";
+                y.fontFamily = "Roboto";
+
+                // Legend font style
+                myLegend.fontSize = "12";
+                myLegend.fontFamily = "Roboto";
+
+
+                //
+                // Draw chart
+                //
+
+                // Draw
+                myChart.draw();
+
+                // Position legend text
+                myLegend.shapes.selectAll("text").attr("dy", "1");
+
+                // Remove axis titles
+                x.titleShape.remove();
+                y.titleShape.remove();
+
+
+                // Resize chart
+                // ------------------------------
+
+                // Add a method to draw the chart on resize of the window
+                $(window).on('resize', resize);
+                $('.sidebar-control').on('click', resize);
+
+                // Resize function
+                function resize() {
+                    setTimeout(function() {
+
+                        // Redraw chart
+                        myChart.draw(0, true);
+
+                        // Position legend text
+                        myLegend.shapes.selectAll("text").attr("dy", "1");
+
+                        // Remove axis titles
+                        x.titleShape.remove();
+                        y.titleShape.remove();
+                    }, 100)
+                }
+            });
+        }
+    };
+
+
+    //
+    // Return objects assigned to module
+    //
+
+    return {
+        init: function() {
+            _lineHorizontalMultiple();
+        }
+    }
+}();
+
+
+// Initialize module
+// ------------------------------
+
+document.addEventListener('DOMContentLoaded', function() {
+    DimpleLineHorizontalMultiple.init();
+});

assets/global/js/demo_pages/charts/dimple/lines/line_horizontal_multiple_grouped.js

@@ -0,0 +1,165 @@
+/* ------------------------------------------------------------------------------
+ *
+ *  # Dimple.js - multiple horizontal lines
+ *
+ *  Demo of grouped multiple line chart. Data stored in .tsv file format
+ *
+ * ---------------------------------------------------------------------------- */
+
+
+// Setup module
+// ------------------------------
+
+var DimpleLineHorizontalMultipleGrouped = function() {
+
+
+    //
+    // Setup module components
+    //
+
+    // Chart
+    var _lineHorizontalMultipleGrouped = function() {
+        if (typeof dimple == 'undefined') {
+            console.warn('Warning - dimple.min.js is not loaded.');
+            return;
+        }
+
+        // Main variables
+        var element = document.getElementById('dimple-line-horizontal-multiple-grouped');
+
+
+        // Initialize chart only if element exsists in the DOM
+        if(element) {
+
+            // Construct chart
+            var svg = dimple.newSvg(element, "100%", 500);
+
+
+            // Chart setup
+            // ------------------------------
+
+            d3.tsv("../../../../global_assets/demo_data/dimple/demo_data.tsv", function (data) {
+
+                // Filter data
+                data = dimple.filterData(data, "Owner", ["Aperture", "Black Mesa"])
+
+
+                // Create chart
+                // ------------------------------
+
+                // Define chart
+                var myChart = new dimple.chart(svg, data);
+
+                // Set bounds
+                myChart.setBounds(0, 0, "100%", "100%");
+
+                // Set margins
+                myChart.setMargins(40, 10, 90, 30);
+
+
+                // Create axes
+                // ------------------------------
+
+                // Horizontal
+                var x = myChart.addCategoryAxis("x", ["Owner", "Month"]);
+                    x.addGroupOrderRule("Date");
+
+                // Vertical
+                var y = myChart.addMeasureAxis("y", "Unit Sales");
+
+
+                // Construct layout
+                // ------------------------------
+
+                // Add line
+                var s = myChart
+                    .addSeries(["Brand"], dimple.plot.line)
+                    .interpolation = "basis";
+
+                // Line space
+                s.barGap = 0.05;
+
+
+                // Add legend
+                // ------------------------------
+
+                var myLegend = myChart
+                    .addLegend("100%", 0, 0, "100%", "right");
+
+
+                // Add styles
+                // ------------------------------
+
+                // Font size
+                x.fontSize = "12";
+                y.fontSize = "12";
+
+                // Font family
+                x.fontFamily = "Roboto";
+                y.fontFamily = "Roboto";
+
+                // Legend font style
+                myLegend.fontSize = "12";
+                myLegend.fontFamily = "Roboto";
+
+
+                //
+                // Draw chart
+                //
+
+                // Draw
+                myChart.draw();
+
+                // Position legend text
+                myLegend.shapes.selectAll("text").attr("dy", "1");
+
+                // Remove axis titles
+                x.titleShape.remove();
+                y.titleShape.remove();
+
+
+                // Resize chart
+                // ------------------------------
+
+                // Add a method to draw the chart on resize of the window
+                $(window).on('resize', resize);
+                $('.sidebar-control').on('click', resize);
+
+                // Resize function
+                function resize() {
+                    setTimeout(function() {
+
+                        // Redraw chart
+                        myChart.draw(0, true);
+
+                        // Position legend text
+                        myLegend.shapes.selectAll("text").attr("dy", "1");
+
+                        // Remove axis titles
+                        x.titleShape.remove();
+                        y.titleShape.remove();
+                    }, 100)
+                }
+            });
+        }
+    };
+
+
+    //
+    // Return objects assigned to module
+    //
+
+    return {
+        init: function() {
+            _lineHorizontalMultipleGrouped();
+        }
+    }
+}();
+
+
+// Initialize module
+// ------------------------------
+
+document.addEventListener('DOMContentLoaded', function() {
+    DimpleLineHorizontalMultipleGrouped.init();
+});

assets/global/js/demo_pages/charts/dimple/lines/line_horizontal_single.js

@@ -0,0 +1,145 @@
+/* ------------------------------------------------------------------------------
+ *
+ *  # Dimple.js - single horizontal line
+ *
+ *  Demo of a single line chart. Data stored in .tsv file format
+ *
+ * ---------------------------------------------------------------------------- */
+
+
+// Setup module
+// ------------------------------
+
+var DimpleLineHorizontalSingle = function() {
+
+
+    //
+    // Setup module components
+    //
+
+    // Chart
+    var _lnieHorizontalSingle = function() {
+        if (typeof dimple == 'undefined') {
+            console.warn('Warning - dimple.min.js is not loaded.');
+            return;
+        }
+
+        // Main variables
+        var element = document.getElementById('dimple-line-horizontal-single');
+
+
+        // Initialize chart only if element exsists in the DOM
+        if(element) {
+
+            // Construct chart
+            var svg = dimple.newSvg(element, "100%", 500);
+
+
+            // Chart setup
+            // ------------------------------
+
+            d3.tsv("../../../../global_assets/demo_data/dimple/demo_data.tsv", function (data) {
+
+                // Filter data
+                data = dimple.filterData(data, "Owner", ["Aperture", "Black Mesa"])
+
+
+                // Create chart
+                // ------------------------------
+
+                // Define chart
+                var myChart = new dimple.chart(svg, data);
+
+                // Set bounds
+                myChart.setBounds(0, 0, "100%", "100%");
+
+                // Set margins
+                myChart.setMargins(40, 10, 0, 50);
+
+
+                // Create axes
+                // ------------------------------
+
+                // Horizontal
+                var x = myChart.addCategoryAxis("x", "Month");
+                    x.addOrderRule("Date");
+
+                // Vertical
+                var y = myChart.addMeasureAxis("y", "Unit Sales");
+
+
+                // Construct layout
+                // ------------------------------
+
+                // Add line
+                var s = myChart
+                    .addSeries(null, dimple.plot.line)
+                    .interpolation = "basis";
+
+
+                // Add styles
+                // ------------------------------
+
+                // Font size
+                x.fontSize = "12";
+                y.fontSize = "12";
+
+                // Font family
+                x.fontFamily = "Roboto";
+                y.fontFamily = "Roboto";
+
+
+                //
+                // Draw chart
+                //
+
+                // Draw
+                myChart.draw();
+
+                // Remove axis titles
+                x.titleShape.remove();
+                y.titleShape.remove();
+
+
+                // Resize chart
+                // ------------------------------
+
+                // Add a method to draw the chart on resize of the window
+                $(window).on('resize', resize);
+                $('.sidebar-control').on('click', resize);
+
+                // Resize function
+                function resize() {
+                    setTimeout(function() {
+
+                        // Redraw chart
+                        myChart.draw(0, true);
+
+                        // Remove axis titles
+                        x.titleShape.remove();
+                        y.titleShape.remove();
+                    }, 100)
+                }
+            });
+        }
+    };
+
+
+    //
+    // Return objects assigned to module
+    //
+
+    return {
+        init: function() {
+            _lnieHorizontalSingle();
+        }
+    }
+}();
+
+
+// Initialize module
+// ------------------------------
+
+document.addEventListener('DOMContentLoaded', function() {
+    DimpleLineHorizontalSingle.init();
+});

assets/global/js/demo_pages/charts/dimple/lines/line_horizontal_single_grouped.js

@@ -0,0 +1,148 @@
+/* ------------------------------------------------------------------------------
+ *
+ *  # Dimple.js - single horizontal grouped line
+ *
+ *  Demo of a grouped line chart. Data stored in .tsv file format
+ *
+ * ---------------------------------------------------------------------------- */
+
+
+// Setup module
+// ------------------------------
+
+var DimpleLineHorizontalSingleGrouped = function() {
+
+
+    //
+    // Setup module components
+    //
+
+    // Chart
+    var _lineHorizontalSingleGrouped = function() {
+        if (typeof dimple == 'undefined') {
+            console.warn('Warning - dimple.min.js is not loaded.');
+            return;
+        }
+
+        // Main variables
+        var element = document.getElementById('dimple-line-horizontal-single-grouped');
+
+
+        // Initialize chart only if element exsists in the DOM
+        if(element) {
+
+            // Construct chart
+            var svg = dimple.newSvg(element, "100%", 500);
+
+
+            // Chart setup
+            // ------------------------------
+
+            d3.tsv("../../../../global_assets/demo_data/dimple/demo_data.tsv", function (data) {
+
+                // Filter data
+                data = dimple.filterData(data, "Owner", ["Aperture", "Black Mesa"]);
+
+
+                // Create chart
+                // ------------------------------
+
+                // Define chart
+                var myChart = new dimple.chart(svg, data);
+
+                // Set bounds
+                myChart.setBounds(0, 0, "100%", "100%");
+
+                // Set margins
+                myChart.setMargins(40, 10, 0, 30);
+
+
+                // Create axes
+                // ------------------------------
+
+                // Horizontal
+                var x = myChart.addCategoryAxis("x", ["Owner", "Month"]);
+                    x.addGroupOrderRule("Date");
+
+                // Vertical
+                var y = myChart.addMeasureAxis("y", "Unit Sales");
+
+
+                // Construct layout
+                // ------------------------------
+
+                // Add line
+                var s = myChart
+                    .addSeries("Owner", dimple.plot.line)
+                    .interpolation = "basis";
+
+                // Bar space
+                s.barGap = 0.05;
+
+
+                // Add styles
+                // ------------------------------
+
+                // Font size
+                x.fontSize = "12";
+                y.fontSize = "12";
+
+                // Font family
+                x.fontFamily = "Roboto";
+                y.fontFamily = "Roboto";
+
+
+                //
+                // Draw chart
+                //
+
+                // Draw
+                myChart.draw();
+
+                // Remove axis titles
+                x.titleShape.remove();
+                y.titleShape.remove();
+
+
+                // Resize chart
+                // ------------------------------
+
+                // Add a method to draw the chart on resize of the window
+                $(window).on('resize', resize);
+                $('.sidebar-control').on('click', resize);
+
+                // Resize function
+                function resize() {
+                    setTimeout(function() {
+
+                        // Redraw chart
+                        myChart.draw(0, true);
+
+                        // Remove axis titles
+                        x.titleShape.remove();
+                        y.titleShape.remove();
+                    }, 100)
+                }
+            });
+        }
+    };
+
+
+    //
+    // Return objects assigned to module
+    //
+
+    return {
+        init: function() {
+            _lineHorizontalSingleGrouped();
+        }
+    }
+}();
+
+
+// Initialize module
+// ------------------------------
+
+document.addEventListener('DOMContentLoaded', function() {
+    DimpleLineHorizontalSingleGrouped.init();
+});

assets/global/js/demo_pages/charts/dimple/lines/line_vertical_multiple.js

@@ -0,0 +1,161 @@
+/* ------------------------------------------------------------------------------
+ *
+ *  # Dimple.js - multiple vertical lines
+ *
+ *  Demo of multiple line chart. Data stored in .tsv file format
+ *
+ * ---------------------------------------------------------------------------- */
+
+
+// Setup module
+// ------------------------------
+
+var DimpleLineVerticalMultiple = function() {
+
+
+    //
+    // Setup module components
+    //
+
+    // Chart
+    var _lineVerticalMultiple = function() {
+        if (typeof dimple == 'undefined') {
+            console.warn('Warning - dimple.min.js is not loaded.');
+            return;
+        }
+
+        // Main variables
+        var element = document.getElementById('dimple-line-vertical-multiple');
+
+
+        // Initialize chart only if element exsists in the DOM
+        if(element) {
+
+            // Construct chart
+            var svg = dimple.newSvg(element, "100%", 500);
+
+
+            // Chart setup
+            // ------------------------------
+
+            d3.tsv("../../../../global_assets/demo_data/dimple/demo_data.tsv", function (data) {
+
+                // Filter data
+                data = dimple.filterData(data, "Owner", ["Aperture", "Black Mesa"])
+
+
+                // Create chart
+                // ------------------------------
+
+                // Define chart
+                var myChart = new dimple.chart(svg, data);
+
+                // Set bounds
+                myChart.setBounds(0, 0, "100%", "100%");
+
+                // Set margins
+                myChart.setMargins(50, 25, 20, 30);
+
+
+                // Create axes
+                // ------------------------------
+
+                // Horizontal
+                var x = myChart.addMeasureAxis("x", "Unit Sales");
+
+                // Vertical
+                var y = myChart.addCategoryAxis("y", "Month");
+                    y.addOrderRule("Date");
+
+
+                // Construct layout
+                // ------------------------------
+
+                // Add line
+                myChart
+                    .addSeries("Channel", dimple.plot.line)
+                    .interpolation = "basis";
+
+
+                // Add legend
+                // ------------------------------
+
+                var myLegend = myChart.addLegend(0, 5, "100%", 0, "right");
+
+
+                // Add styles
+                // ------------------------------
+
+                // Font size
+                x.fontSize = "12";
+                y.fontSize = "12";
+
+                // Font family
+                x.fontFamily = "Roboto";
+                y.fontFamily = "Roboto";
+
+                // Legend font style
+                myLegend.fontSize = "12";
+                myLegend.fontFamily = "Roboto";
+
+
+                //
+                // Draw chart
+                //
+
+                // Draw
+                myChart.draw();
+
+                // Position legend text
+                myLegend.shapes.selectAll("text").attr("dy", "1");
+
+                // Remove axis titles
+                x.titleShape.remove();
+                y.titleShape.remove();
+
+
+                // Resize chart
+                // ------------------------------
+
+                // Add a method to draw the chart on resize of the window
+                $(window).on('resize', resize);
+                $('.sidebar-control').on('click', resize);
+
+                // Resize function
+                function resize() {
+                    setTimeout(function() {
+
+                        // Redraw chart
+                        myChart.draw(0, true);
+
+                        // Position legend text
+                        myLegend.shapes.selectAll("text").attr("dy", "1");
+
+                        // Remove axis titles
+                        x.titleShape.remove();
+                        y.titleShape.remove();
+                    }, 100)
+                }
+            });
+        }
+    };
+
+
+    //
+    // Return objects assigned to module
+    //
+
+    return {
+        init: function() {
+            _lineVerticalMultiple();
+        }
+    }
+}();
+
+
+// Initialize module
+// ------------------------------
+
+document.addEventListener('DOMContentLoaded', function() {
+    DimpleLineVerticalMultiple.init();
+});

assets/global/js/demo_pages/charts/dimple/lines/line_vertical_multiple_grouped.js

@@ -0,0 +1,165 @@
+/* ------------------------------------------------------------------------------
+ *
+ *  # Dimple.js - grouped multiple vertical lines
+ *
+ *  Demo of grouped multiple line chart. Data stored in .tsv file format
+ *
+ * ---------------------------------------------------------------------------- */
+
+
+// Setup module
+// ------------------------------
+
+var DimpleLineVerticalMultipleGrouped = function() {
+
+
+    //
+    // Setup module components
+    //
+
+    // Chart
+    var _lineVerticalMultipleGrouped = function() {
+        if (typeof dimple == 'undefined') {
+            console.warn('Warning - dimple.min.js is not loaded.');
+            return;
+        }
+
+        // Main variables
+        var element = document.getElementById('dimple-line-vertical-multiple-grouped');
+
+
+        // Initialize chart only if element exsists in the DOM
+        if(element) {
+
+            // Construct chart
+            var svg = dimple.newSvg(element, "100%", 500);
+
+
+            // Chart setup
+            // ------------------------------
+
+            d3.tsv("../../../../global_assets/demo_data/dimple/demo_data.tsv", function (data) {
+
+                // Filter data
+                data = dimple.filterData(data, "Owner", ["Aperture", "Black Mesa"])
+
+
+                // Create chart
+                // ------------------------------
+
+                // Define chart
+                var myChart = new dimple.chart(svg, data);
+
+                // Set bounds
+                myChart.setBounds(0, 0, "100%", "100%");
+
+                // Set margins
+                myChart.setMargins(70, 0, 90, 30);
+
+
+                // Create axes
+                // ------------------------------
+
+                // Horizontal
+                var x = myChart.addMeasureAxis("x", "Unit Sales");
+
+                // Vertical
+                var y = myChart.addCategoryAxis("y", ["Owner", "Month"]);
+                    y.addGroupOrderRule("Date");
+
+
+                // Construct layout
+                // ------------------------------
+
+                // Add line
+                var s = myChart
+                    .addSeries(["Brand"], dimple.plot.line)
+                    .interpolation = "basis";
+
+                // Bar space
+                s.barGap = 0.05;
+
+
+                // Add legend
+                // ------------------------------
+
+                var myLegend = myChart
+                    .addLegend("100%", 0, 0, "100%", "right");
+
+
+                // Add styles
+                // ------------------------------
+
+                // Font size
+                x.fontSize = "12";
+                y.fontSize = "12";
+
+                // Font family
+                x.fontFamily = "Roboto";
+                y.fontFamily = "Roboto";
+
+                // Legend font style
+                myLegend.fontSize = "12";
+                myLegend.fontFamily = "Roboto";
+
+
+                //
+                // Draw chart
+                //
+
+                // Draw
+                myChart.draw();
+
+                // Position legend text
+                myLegend.shapes.selectAll("text").attr("dy", "1");
+
+                // Remove axis titles
+                x.titleShape.remove();
+                y.titleShape.remove();
+
+
+                // Resize chart
+                // ------------------------------
+
+                // Add a method to draw the chart on resize of the window
+                $(window).on('resize', resize);
+                $('.sidebar-control').on('click', resize);
+
+                // Resize function
+                function resize() {
+                    setTimeout(function() {
+
+                        // Redraw chart
+                        myChart.draw(0, true);
+
+                        // Position legend text
+                        myLegend.shapes.selectAll("text").attr("dy", "1");
+
+                        // Remove axis titles
+                        x.titleShape.remove();
+                        y.titleShape.remove();
+                    }, 100)
+                }
+            });
+        }
+    };
+
+
+    //
+    // Return objects assigned to module
+    //
+
+    return {
+        init: function() {
+            _lineVerticalMultipleGrouped();
+        }
+    }
+}();
+
+
+// Initialize module
+// ------------------------------
+
+document.addEventListener('DOMContentLoaded', function() {
+    DimpleLineVerticalMultipleGrouped.init();
+});

assets/global/js/demo_pages/charts/dimple/lines/line_vertical_single.js

@@ -0,0 +1,145 @@
+/* ------------------------------------------------------------------------------
+ *
+ *  # Dimple.js - vertical line
+ *
+ *  Demo of a single line chart. Data stored in .tsv file format
+ *
+ * ---------------------------------------------------------------------------- */
+
+
+// Setup module
+// ------------------------------
+
+var DimpleLineVerticalSingle = function() {
+
+
+    //
+    // Setup module components
+    //
+
+    // Chart
+    var _lineVerticalSingle = function() {
+        if (typeof dimple == 'undefined') {
+            console.warn('Warning - dimple.min.js is not loaded.');
+            return;
+        }
+
+        // Main variables
+        var element = document.getElementById('dimple-line-vertical-single');
+
+
+        // Initialize chart only if element exsists in the DOM
+        if(element) {
+
+            // Construct chart
+            var svg = dimple.newSvg(element, "100%", 500);
+
+
+            // Chart setup
+            // ------------------------------
+
+            d3.tsv("../../../../global_assets/demo_data/dimple/demo_data.tsv", function (data) {
+
+                // Filter data
+                data = dimple.filterData(data, "Owner", ["Aperture", "Black Mesa"])
+
+
+                // Create chart
+                // ------------------------------
+
+                // Define chart
+                var myChart = new dimple.chart(svg, data);
+
+                // Set bounds
+                myChart.setBounds(0, 0, "100%", "100%");
+
+                // Set margin
+                myChart.setMargins(50, 10, 20, 30);
+
+
+                // Create axes
+                // ------------------------------
+
+                // Horizontal
+                var x = myChart.addMeasureAxis("x", "Unit Sales");
+
+                // Vertical
+                var y = myChart.addCategoryAxis("y", "Month");
+                    y.addOrderRule("Date");
+
+
+                // Construct layout
+                // ------------------------------
+
+                // Add line
+                var s = myChart
+                    .addSeries(null, dimple.plot.line)
+                    .interpolation = "basis";
+
+
+                // Add styles
+                // ------------------------------
+
+                // Font size
+                x.fontSize = "12";
+                y.fontSize = "12";
+
+                // Font family
+                x.fontFamily = "Roboto";
+                y.fontFamily = "Roboto";
+
+
+                //
+                // Draw chart
+                //
+
+                // Draw
+                myChart.draw();
+
+                // Remove axis titles
+                x.titleShape.remove();
+                y.titleShape.remove();
+
+
+                // Resize chart
+                // ------------------------------
+
+                // Add a method to draw the chart on resize of the window
+                $(window).on('resize', resize);
+                $('.sidebar-control').on('click', resize);
+
+                // Resize function
+                function resize() {
+                    setTimeout(function() {
+
+                        // Redraw chart
+                        myChart.draw(0, true);
+
+                        // Remove axis titles
+                        x.titleShape.remove();
+                        y.titleShape.remove();
+                    }, 100)
+                }
+            });
+        }
+    };
+
+
+    //
+    // Return objects assigned to module
+    //
+
+    return {
+        init: function() {
+            _lineVerticalSingle();
+        }
+    }
+}();
+
+
+// Initialize module
+// ------------------------------
+
+document.addEventListener('DOMContentLoaded', function() {
+    DimpleLineVerticalSingle.init();
+});

assets/global/js/demo_pages/charts/dimple/lines/line_vertical_single_grouped.js

@@ -0,0 +1,148 @@
+/* ------------------------------------------------------------------------------
+ *
+ *  # Dimple.js - vertical grouped line
+ *
+ *  Demo of a grouped line chart. Data stored in .tsv file format
+ *
+ * ---------------------------------------------------------------------------- */
+
+
+// Setup module
+// ------------------------------
+
+var DimpleLineVerticalSingleGrouped = function() {
+
+
+    //
+    // Setup module components
+    //
+
+    // Chart
+    var _lineVerticalSingleGrouped = function() {
+        if (typeof dimple == 'undefined') {
+            console.warn('Warning - dimple.min.js is not loaded.');
+            return;
+        }
+
+        // Main variables
+        var element = document.getElementById('dimple-line-vertical-single-grouped');
+
+
+        // Initialize chart only if element exsists in the DOM
+        if(element) {
+
+            // Construct chart
+            var svg = dimple.newSvg(element, "100%", 500);
+
+
+            // Chart setup
+            // ------------------------------
+
+            d3.tsv("../../../../global_assets/demo_data/dimple/demo_data.tsv", function (data) {
+
+                // Filter data
+                data = dimple.filterData(data, "Owner", ["Aperture", "Black Mesa"])
+
+
+                // Create chart
+                // ------------------------------
+
+                // Define chart
+                var myChart = new dimple.chart(svg, data);
+
+                // Set bounds
+                myChart.setBounds(0, 0, "100%", "100%");
+
+                // Set margins
+                myChart.setMargins(70, 0, 20, 30);
+
+
+                // Create axes
+                // ------------------------------
+
+                // Horizontal
+                var x = myChart.addMeasureAxis("x", "Unit Sales");
+
+                // Vertical
+                var y = myChart.addCategoryAxis("y", ["Owner", "Month"]);
+                    y.addGroupOrderRule("Date");
+
+
+                // Construct layout
+                // ------------------------------
+
+                // Add line
+                var s = myChart
+                    .addSeries("Owner", dimple.plot.line)
+                    .interpolation = "cardinal";
+
+                // Bar space
+                s.barGap = 0.05;
+
+
+                // Add styles
+                // ------------------------------
+
+                // Font size
+                x.fontSize = "12";
+                y.fontSize = "12";
+
+                // Font family
+                x.fontFamily = "Roboto";
+                y.fontFamily = "Roboto";
+
+
+                //
+                // Draw chart
+                //
+
+                // Draw
+                myChart.draw();
+
+                // Remove axis titles
+                x.titleShape.remove();
+                y.titleShape.remove();
+
+
+                // Resize chart
+                // ------------------------------
+
+                // Add a method to draw the chart on resize of the window
+                $(window).on('resize', resize);
+                $('.sidebar-control').on('click', resize);
+
+                // Resize function
+                function resize() {
+                    setTimeout(function() {
+
+                        // Redraw chart
+                        myChart.draw(0, true);
+
+                        // Remove axis titles
+                        x.titleShape.remove();
+                        y.titleShape.remove();
+                    }, 100)
+                }
+            });
+        }
+    };
+
+
+    //
+    // Return objects assigned to module
+    //
+
+    return {
+        init: function() {
+            _lineVerticalSingleGrouped();
+        }
+    }
+}();
+
+
+// Initialize module
+// ------------------------------
+
+document.addEventListener('DOMContentLoaded', function() {
+    DimpleLineVerticalSingleGrouped.init();
+});

assets/global/js/demo_pages/charts/dimple/pies/pie_basic.js

@@ -0,0 +1,108 @@
+/* ------------------------------------------------------------------------------
+ *
+ *  # Dimple.js - basic pie
+ *
+ *  Demo of pie chart. Data stored in .tsv file format
+ *
+ * ---------------------------------------------------------------------------- */
+
+
+// Setup module
+// ------------------------------
+
+var DimplePieBasic = function() {
+
+
+    //
+    // Setup module components
+    //
+
+    // Chart
+    var _pieBasic = function() {
+        if (typeof dimple == 'undefined') {
+            console.warn('Warning - dimple.min.js is not loaded.');
+            return;
+        }
+
+        // Main variables
+        var element = document.getElementById('dimple-pie-basic');
+
+
+        // Initialize chart only if element exsists in the DOM
+        if(element) {
+
+            // Construct chart
+            var svg = dimple.newSvg(element, 420, 300);
+
+
+            // Chart setup
+            // ------------------------------
+
+            d3.tsv("../../../../global_assets/demo_data/dimple/demo_data.tsv", function (data) {
+
+
+                // Create chart
+                // ------------------------------
+
+                // Define chart
+                var myChart = new dimple.chart(svg, data);
+
+                // Set bounds
+                myChart.setBounds(0, 0, "100%", "100%")
+
+                // Set margins
+                myChart.setMargins(5, 5, 5, 5);
+
+
+                // Add axes
+                // ------------------------------
+
+                var p = myChart.addMeasureAxis("p", "Unit Sales");
+
+
+                // Construct layout
+                // ------------------------------
+
+                // Add pie
+                myChart.addSeries("Owner", dimple.plot.pie);
+
+
+                // Add styles
+                // ------------------------------
+
+                // Font size
+                p.fontSize = "12";
+
+                // Font family
+                p.fontFamily = "Roboto";
+
+
+                //
+                // Draw chart
+                //
+
+                // Draw
+                myChart.draw();
+            });
+        }
+    };
+
+
+    //
+    // Return objects assigned to module
+    //
+
+    return {
+        init: function() {
+            _pieBasic();
+        }
+    }
+}();
+
+
+// Initialize module
+// ------------------------------
+
+document.addEventListener('DOMContentLoaded', function() {
+    DimplePieBasic.init();
+});

assets/global/js/demo_pages/charts/dimple/pies/pie_bubble.js

@@ -0,0 +1,152 @@
+/* ------------------------------------------------------------------------------
+ *
+ *  # Dimple.js - bubbles with pie
+ *
+ *  Demo of bubble chart with pies. Data stored in .tsv file format
+ *
+ * ---------------------------------------------------------------------------- */
+
+
+// Setup module
+// ------------------------------
+
+var DimplePieBubble = function() {
+
+
+    //
+    // Setup module components
+    //
+
+    // Chart
+    var _pieBubble = function() {
+        if (typeof dimple == 'undefined') {
+            console.warn('Warning - dimple.min.js is not loaded.');
+            return;
+        }
+
+        // Main variables
+        var element = document.getElementById('dimple-pie-bubble');
+
+
+        // Initialize chart only if element exsists in the DOM
+        if(element) {
+
+            // Construct chart
+            var svg = dimple.newSvg(element, "100%", 500);
+
+
+            // Chart setup
+            // ------------------------------
+
+            d3.tsv("../../../../global_assets/demo_data/dimple/demo_data.tsv", function (data) {
+
+                // Filter data
+                data = dimple.filterData(data, "Date", "01/12/2011");
+
+
+                // Create chart
+                // ------------------------------
+
+                // Define chart
+                var myChart = new dimple.chart(svg, data);
+
+                // Set bounds
+                myChart.setBounds(0, 0, "100%", "100%");
+
+                // Set margins
+                myChart.setMargins(55, 35, 20, 45);
+
+
+                // Add axes
+                // ------------------------------
+
+                // Horizontal
+                var x = myChart.addMeasureAxis("x", "Price Monthly Change");
+
+                // Vertical
+                var y = myChart.addMeasureAxis("y", "Unit Sales Monthly Change");
+
+                // Other axes
+                myChart.addMeasureAxis("p", "Operating Profit");
+                myChart.addMeasureAxis("z", "Operating Profit");
+
+
+                // Construct layout
+                // ------------------------------
+
+                // Add pie
+                myChart.addSeries(["Owner", "Channel"], dimple.plot.pie);
+
+
+                // Add legend
+                // ------------------------------
+
+                var myLegend = myChart.addLegend(0, 5, "100%", 0, "right");
+
+
+                // Add styles
+                // ------------------------------
+
+                // Font size
+                x.fontSize = "12";
+                y.fontSize = "12";
+
+                // Font family
+                x.fontFamily = "Roboto";
+                y.fontFamily = "Roboto";
+
+                // Legend font style
+                myLegend.fontSize = "12";
+                myLegend.fontFamily = "Roboto";
+
+
+                //
+                // Draw chart
+                //
+
+                // Draw
+                myChart.draw();
+
+                // Position legend text
+                myLegend.shapes.selectAll("text").attr("dy", "1");
+
+
+                // Resize chart
+                // ------------------------------
+
+                // Add a method to draw the chart on resize of the window
+                $(window).on('resize', resize);
+                $('.sidebar-control').on('click', resize);
+
+                // Resize function
+                function resize() {
+
+                    // Redraw chart
+                    myChart.draw(0, true);
+
+                    // Position legend text
+                    myLegend.shapes.selectAll("text").attr("dy", "1");
+                }
+            });
+        }
+    };
+
+
+    //
+    // Return objects assigned to module
+    //
+
+    return {
+        init: function() {
+            _pieBubble();
+        }
+    }
+}();
+
+
+// Initialize module
+// ------------------------------
+
+document.addEventListener('DOMContentLoaded', function() {
+    DimplePieBubble.init();
+});

assets/global/js/demo_pages/charts/dimple/pies/pie_legend.js

@@ -0,0 +1,114 @@
+/* ------------------------------------------------------------------------------
+ *
+ *  # Dimple.js - pie with legend
+ *
+ *  Demo of pie chart with legend. Data stored in .tsv file format
+ *
+ * ---------------------------------------------------------------------------- */
+
+
+// Setup module
+// ------------------------------
+
+var DimplePieLegend = function() {
+
+
+    //
+    // Setup module components
+    //
+
+    // Chart
+    var _pieLegend = function() {
+        if (typeof dimple == 'undefined') {
+            console.warn('Warning - dimple.min.js is not loaded.');
+            return;
+        }
+
+        // Main variables
+        var element = document.getElementById('dimple-pie-legend');
+
+
+        // Initialize chart only if element exsists in the DOM
+        if(element) {
+
+            // Construct chart
+            var svg = dimple.newSvg(element, 420, 300);
+
+
+            // Chart setup
+            // ------------------------------
+
+            d3.tsv("../../../../global_assets/demo_data/dimple/demo_data.tsv", function (data) {
+
+
+                // Create chart
+                // ------------------------------
+
+                // Define chart
+                var myChart = new dimple.chart(svg, data);
+
+                // Set bounds
+                myChart.setBounds(0, 0, "100%", "100%")
+
+                // Set margins
+                myChart.setMargins(5, 5, 100, 5);
+
+
+                // Add axes
+                // ------------------------------
+
+                myChart.addMeasureAxis("p", "Unit Sales");
+
+
+                // Construct layout
+                // ------------------------------
+
+                // Add pie
+                myChart.addSeries("Owner", dimple.plot.pie);
+
+
+                // Add legend
+                // ------------------------------
+
+                var myLegend = myChart.addLegend("100%", 0, 0, "100%", "right");
+
+
+                // Add styles
+                // ------------------------------
+
+                // Font size
+                myLegend.fontSize = "12";
+
+                // Font family
+                myLegend.fontFamily = "Roboto";
+
+
+                //
+                // Draw chart
+                //
+
+                // Draw
+                myChart.draw();
+            });
+        }
+    };
+
+
+    //
+    // Return objects assigned to module
+    //
+
+    return {
+        init: function() {
+            _pieLegend();
+        }
+    }
+}();
+
+
+// Initialize module
+// ------------------------------
+
+document.addEventListener('DOMContentLoaded', function() {
+    DimplePieLegend.init();
+});

assets/global/js/demo_pages/charts/dimple/pies/pie_lollipop.js

@@ -0,0 +1,158 @@
+/* ------------------------------------------------------------------------------
+ *
+ *  # Dimple.js - lollipops
+ *
+ *  Demo of lollipop chart. Data stored in .tsv file format
+ *
+ * ---------------------------------------------------------------------------- */
+
+
+// Setup module
+// ------------------------------
+
+var DimplePieLollipop = function() {
+
+
+    //
+    // Setup module components
+    //
+
+    // Chart
+    var _pieLollipop = function() {
+        if (typeof dimple == 'undefined') {
+            console.warn('Warning - dimple.min.js is not loaded.');
+            return;
+        }
+
+        // Main variables
+        var element = document.getElementById('dimple-pie-lollipop');
+
+
+        // Initialize chart only if element exsists in the DOM
+        if(element) {
+
+            // Construct chart
+            var svg = dimple.newSvg(element, "100%", 500);
+
+
+            // Chart setup
+            // ------------------------------
+
+            d3.tsv("../../../../global_assets/demo_data/dimple/demo_data.tsv", function (data) {
+
+                // Filter data
+                data = dimple.filterData(data, "Date", [
+                    "01/07/2011", "01/08/2011", "01/09/2011",
+                    "01/10/2011", "01/11/2011", "01/12/2011"
+                ]);
+
+
+                // Create chart
+                // ------------------------------
+
+                // Define chart
+                var myChart = new dimple.chart(svg, data);
+
+                // Set bounds
+                myChart.setBounds(0, 0, "100%", "100%");
+
+                // Set margins
+                myChart.setMargins(55, 25, 10, 30);
+
+
+                // Add axes
+                // ------------------------------
+
+                // Horizontal
+                var x = myChart.addCategoryAxis("x", "Month");
+                    x.addOrderRule("Date");
+
+                // Vertical
+                var y = myChart.addMeasureAxis("y", "Unit Sales");
+
+                // Other axes
+                myChart.addMeasureAxis("p", "Unit Sales");
+
+
+                // Construct layout
+                // ------------------------------
+
+                // Add pie
+                var pies = myChart.addSeries("Channel", dimple.plot.pie);
+
+                // Radius
+                pies.radius = 30;
+
+
+                // Add legend
+                // ------------------------------
+
+                var myLegend = myChart.addLegend(0, 5, "100%", 0, "right");
+
+
+                // Add styles
+                // ------------------------------
+
+                // Font size
+                x.fontSize = "12";
+                y.fontSize = "12";
+
+                // Font family
+                x.fontFamily = "Roboto";
+                y.fontFamily = "Roboto";
+
+                // Legend font style
+                myLegend.fontSize = "12";
+                myLegend.fontFamily = "Roboto";
+
+
+                //
+                // Draw chart
+                //
+
+                // Draw
+                myChart.draw();
+
+                // Remove axis titles
+                x.titleShape.remove();
+
+
+                // Resize chart
+                // ------------------------------
+
+                // Add a method to draw the chart on resize of the window
+                $(window).on('resize', resize);
+                $('.sidebar-control').on('click', resize);
+
+                // Resize function
+                function resize() {
+
+                    // Redraw chart
+                    myChart.draw(0, true);
+
+                    // Remove axis titles
+                    x.titleShape.remove();
+                }
+            });
+        }
+    };
+
+
+    //
+    // Return objects assigned to module
+    //
+
+    return {
+        init: function() {
+            _pieLollipop();
+        }
+    }
+}();
+
+
+// Initialize module
+// ------------------------------
+
+document.addEventListener('DOMContentLoaded', function() {
+    DimplePieLollipop.init();
+});

assets/global/js/demo_pages/charts/dimple/pies/pie_matrix.js

@@ -0,0 +1,155 @@
+/* ------------------------------------------------------------------------------
+ *
+ *  # Dimple.js - pies matrix
+ *
+ *  Demo of matrix of pies. Data stored in .tsv file format
+ *
+ * ---------------------------------------------------------------------------- */
+
+
+// Setup module
+// ------------------------------
+
+var DimplePieMatrix = function() {
+
+
+    //
+    // Setup module components
+    //
+
+    // Chart
+    var _pieMatrix = function() {
+        if (typeof dimple == 'undefined') {
+            console.warn('Warning - dimple.min.js is not loaded.');
+            return;
+        }
+
+        // Main variables
+        var element = document.getElementById('dimple-pie-matrix');
+
+
+        // Initialize chart only if element exsists in the DOM
+        if(element) {
+
+            // Construct chart
+            var svg = dimple.newSvg(element, "100%", 500);
+
+
+            // Chart setup
+            // ------------------------------
+
+            d3.tsv("../../../../global_assets/demo_data/dimple/demo_data.tsv", function (data) {
+
+
+                // Create chart
+                // ------------------------------
+
+                // Define chart
+                var myChart = new dimple.chart(svg, data);
+
+                // Set bounds
+                myChart.setBounds(0, 0, "100%", "100%");
+
+                // Set margins
+                myChart.setMargins(45, 25, 10, 45);
+
+
+                // Add axes
+                // ------------------------------
+
+                // Horizontal
+                var x = myChart.addCategoryAxis("x", "Price Tier");
+
+                // Vertical
+                var y = myChart.addCategoryAxis("y", "Pack Size");
+
+                // Other axes
+                myChart.addMeasureAxis("p", "Unit Sales");
+
+
+                // Construct layout
+                // ------------------------------
+
+                // Add pie
+                var pies = myChart.addSeries("Channel", dimple.plot.pie);
+
+                // Radius
+                pies.radius = 30;
+
+                // Display grid lines
+                x.showGridlines = true;
+                y.showGridlines = true;
+
+
+                // Add legend
+                // ------------------------------
+
+                var myLegend = myChart.addLegend(0, 5, "100%", 0, "right");
+
+
+                // Add styles
+                // ------------------------------
+
+                // Font size
+                x.fontSize = "12";
+                y.fontSize = "12";
+
+                // Font family
+                x.fontFamily = "Roboto";
+                y.fontFamily = "Roboto";
+
+                // Legend font style
+                myLegend.fontSize = "12";
+                myLegend.fontFamily = "Roboto";
+
+
+                //
+                // Draw chart
+                //
+
+                // Draw
+                myChart.draw();
+
+                // Remove axis titles
+                x.titleShape.remove();
+
+
+                // Resize chart
+                // ------------------------------
+
+                // Add a method to draw the chart on resize of the window
+                $(window).on('resize', resize);
+                $('.sidebar-control').on('click', resize);
+
+                // Resize function
+                function resize() {
+
+                    // Redraw chart
+                    myChart.draw(0, true);
+
+                    // Remove axis titles
+                    x.titleShape.remove();
+                }
+            });
+        }
+    };
+
+
+    //
+    // Return objects assigned to module
+    //
+
+    return {
+        init: function() {
+            _pieMatrix();
+        }
+    }
+}();
+
+
+// Initialize module
+// ------------------------------
+
+document.addEventListener('DOMContentLoaded', function() {
+    DimplePieMatrix.init();
+});

assets/global/js/demo_pages/charts/dimple/pies/pie_scatter.js

@@ -0,0 +1,148 @@
+/* ------------------------------------------------------------------------------
+ *
+ *  # Dimple.js - pies as scatter
+ *
+ *  Demo of scatter chart with pies. Data stored in .tsv file format
+ *
+ * ---------------------------------------------------------------------------- */
+
+
+// Setup module
+// ------------------------------
+
+var DimplePieScatter = function() {
+
+
+    //
+    // Setup module components
+    //
+
+    // Chart
+    var _pieScatter = function() {
+        if (typeof dimple == 'undefined') {
+            console.warn('Warning - dimple.min.js is not loaded.');
+            return;
+        }
+
+        // Main variables
+        var element = document.getElementById('dimple-pie-scatter');
+
+
+        // Initialize chart only if element exsists in the DOM
+        if(element) {
+
+            // Construct chart
+            var svg = dimple.newSvg(element, "100%", 500);
+
+
+            // Chart setup
+            // ------------------------------
+
+            d3.tsv("../../../../global_assets/demo_data/dimple/demo_data.tsv", function (data) {
+
+                // Filter data
+                data = dimple.filterData(data, "Date", "01/12/2011");
+
+
+                // Create chart
+                // ------------------------------
+
+                // Define chart
+                var myChart = new dimple.chart(svg, data);
+
+                // Set bounds
+                myChart.setBounds(0, 0, "100%", "100%");
+
+                // Set margins
+                myChart.setMargins(60, 35, 10, 45);
+
+
+                // Add axes
+                // ------------------------------
+
+                // Horizontal
+                var x = myChart.addMeasureAxis("x", "Price Monthly Change");
+
+                // Vertical
+                var y = myChart.addMeasureAxis("y", "Unit Sales Monthly Change");
+
+                // Other axes
+                myChart.addMeasureAxis("p", "Operating Profit");
+
+
+                // Construct layout
+                // ------------------------------
+
+                // Add pie
+                var pies = myChart.addSeries(["Owner", "Channel"], dimple.plot.pie);
+
+                // Radius
+                pies.radius = 40;
+
+
+                // Add legend
+                // ------------------------------
+
+                var myLegend = myChart.addLegend(0, 5, "100%", 0, "right");
+
+
+                // Add styles
+                // ------------------------------
+
+                // Font size
+                x.fontSize = "12";
+                y.fontSize = "12";
+
+                // Font family
+                x.fontFamily = "Roboto";
+                y.fontFamily = "Roboto";
+
+                // Legend font style
+                myLegend.fontSize = "12";
+                myLegend.fontFamily = "Roboto";
+
+
+                //
+                // Draw chart
+                //
+
+                // Draw
+                myChart.draw();
+
+
+                // Resize chart
+                // ------------------------------
+
+                // Add a method to draw the chart on resize of the window
+                $(window).on('resize', resize);
+                $('.sidebar-control').on('click', resize);
+
+                // Resize function
+                function resize() {
+
+                    // Redraw chart
+                    myChart.draw(0, true);
+                }
+            });
+        }
+    };
+
+
+    //
+    // Return objects assigned to module
+    //
+
+    return {
+        init: function() {
+            _pieScatter();
+        }
+    }
+}();
+
+
+// Initialize module
+// ------------------------------
+
+document.addEventListener('DOMContentLoaded', function() {
+    DimplePieScatter.init();
+});

assets/global/js/demo_pages/charts/dimple/rings/ring_basic.js

@@ -0,0 +1,117 @@
+/* ------------------------------------------------------------------------------
+ *
+ *  # Dimple.js - basic ring
+ *
+ *  Demo of ring chart. Data stored in .tsv file format
+ *
+ * ---------------------------------------------------------------------------- */
+
+
+// Setup module
+// ------------------------------
+
+var DimpleRingBasic = function() {
+
+
+    //
+    // Setup module components
+    //
+
+    // Chart
+    var _ringBasic = function() {
+        if (typeof dimple == 'undefined') {
+            console.warn('Warning - dimple.min.js is not loaded.');
+            return;
+        }
+
+        // Main variables
+        var element = document.getElementById('dimple-ring-basic');
+
+
+        // Initialize chart only if element exsists in the DOM
+        if(element) {
+
+            // Construct chart
+            var svg = dimple.newSvg(element, 420, 300);
+
+
+            // Chart setup
+            // ------------------------------
+
+            d3.tsv("../../../../global_assets/demo_data/dimple/demo_data.tsv", function (data) {
+
+
+                // Create chart
+                // ------------------------------
+
+                // Define chart
+                var myChart = new dimple.chart(svg, data);
+
+                // Set bounds
+                myChart.setBounds(0, 0, "100%", "100%")
+
+                // Set margins
+                myChart.setMargins(5, 5, 90, 5);
+
+
+                // Add axes
+                // ------------------------------
+
+                myChart.addMeasureAxis("p", "Unit Sales");
+
+
+                // Construct layout
+                // ------------------------------
+
+                // Add ring
+                var ring = myChart.addSeries("Owner", dimple.plot.pie);
+
+                // Inner ring radius
+                ring.innerRadius = "50%";
+
+
+                // Add legend
+                // ------------------------------
+
+                var myLegend = myChart.addLegend("100%", 0, 0, "100%", "right");
+
+
+                // Add styles
+                // ------------------------------
+
+                // Font size
+                myLegend.fontSize = "12";
+
+                // Font family
+                myLegend.fontFamily = "Roboto";
+
+
+                //
+                // Draw chart
+                //
+
+                // Draw
+                myChart.draw();
+            });
+        }
+    };
+
+
+    //
+    // Return objects assigned to module
+    //
+
+    return {
+        init: function() {
+            _ringBasic();
+        }
+    }
+}();
+
+
+// Initialize module
+// ------------------------------
+
+document.addEventListener('DOMContentLoaded', function() {
+    DimpleRingBasic.init();
+});

assets/global/js/demo_pages/charts/dimple/rings/ring_bubble.js

@@ -0,0 +1,155 @@
+/* ------------------------------------------------------------------------------
+ *
+ *  # Dimple.js - bubbles with ring
+ *
+ *  Demo of bubble chart with rings. Data stored in .tsv file format
+ *
+ * ---------------------------------------------------------------------------- */
+
+
+// Setup module
+// ------------------------------
+
+var DimpleRingBubble = function() {
+
+
+    //
+    // Setup module components
+    //
+
+    // Chart
+    var _ringBubble = function() {
+        if (typeof dimple == 'undefined') {
+            console.warn('Warning - dimple.min.js is not loaded.');
+            return;
+        }
+
+        // Main variables
+        var element = document.getElementById('dimple-ring-bubble');
+
+
+        // Initialize chart only if element exsists in the DOM
+        if(element) {
+
+            // Construct chart
+            var svg = dimple.newSvg(element, "100%", 500);
+
+
+            // Chart setup
+            // ------------------------------
+
+            d3.tsv("../../../../global_assets/demo_data/dimple/demo_data.tsv", function (data) {
+
+                // Filter data
+                data = dimple.filterData(data, "Date", "01/12/2011");
+
+
+                // Create chart
+                // ------------------------------
+
+                // Define chart
+                var myChart = new dimple.chart(svg, data);
+
+                // Set bounds
+                myChart.setBounds(0, 0, "100%", "100%");
+
+                // Set margins
+                myChart.setMargins(45, 30, 35, 10);
+
+
+                // Add axes
+                // ------------------------------
+
+                // Horizontal
+                var x = myChart.addMeasureAxis("x", "Unit Sales Monthly Change");
+
+                // Vertical
+                var y =  myChart.addMeasureAxis("y", "Price Monthly Change");
+
+                // Other axes
+                myChart.addMeasureAxis("p", "Operating Profit");
+                myChart.addMeasureAxis("z", "Operating Profit");
+
+
+                // Construct layout
+                // ------------------------------
+
+                // Add ring
+                var rings = myChart.addSeries(["SKU", "Channel"], dimple.plot.pie);
+
+                // Inner radius
+                rings.innerRadius = "80%";
+
+
+                // Add legend
+                // ------------------------------
+
+                var myLegend = myChart.addLegend(0, 5, "100%", 0, "left");
+
+
+                // Add styles
+                // ------------------------------
+
+                // Font size
+                x.fontSize = "12";
+                y.fontSize = "12";
+
+                // Font family
+                x.fontFamily = "Roboto";
+                y.fontFamily = "Roboto";
+
+                // Legend font style
+                myLegend.fontSize = "12";
+                myLegend.fontFamily = "Roboto";
+
+
+                //
+                // Draw chart
+                //
+
+                // Draw
+                myChart.draw();
+
+                // Position legend text
+                myLegend.shapes.selectAll("text").attr("dy", "1");
+
+
+                // Resize chart
+                // ------------------------------
+
+                // Add a method to draw the chart on resize of the window
+                $(window).on('resize', resize);
+                $('.sidebar-control').on('click', resize);
+
+                // Resize function
+                function resize() {
+
+                    // Redraw chart
+                    myChart.draw(0, true);
+
+                    // Position legend text
+                    myLegend.shapes.selectAll("text").attr("dy", "1");
+                }
+            });
+        }
+    };
+
+
+    //
+    // Return objects assigned to module
+    //
+
+    return {
+        init: function() {
+            _ringBubble();
+        }
+    }
+}();
+
+
+// Initialize module
+// ------------------------------
+
+document.addEventListener('DOMContentLoaded', function() {
+    DimpleRingBubble.init();
+});

assets/global/js/demo_pages/charts/dimple/rings/ring_concentric.js

@@ -0,0 +1,122 @@
+/* ------------------------------------------------------------------------------
+ *
+ *  # Dimple.js - concentric ring
+ *
+ *  Demo of concentric ring chart. Data stored in .tsv file format
+ *
+ * ---------------------------------------------------------------------------- */
+
+
+// Setup module
+// ------------------------------
+
+var DimpleRingConcentric = function() {
+
+
+    //
+    // Setup module components
+    //
+
+    // Chart
+    var _ringConcentric = function() {
+        if (typeof dimple == 'undefined') {
+            console.warn('Warning - dimple.min.js is not loaded.');
+            return;
+        }
+
+        // Main variables
+        var element = document.getElementById('dimple-ring-concentric');
+
+
+        // Initialize chart only if element exsists in the DOM
+        if(element) {
+
+            // Construct chart
+            var svg = dimple.newSvg(element, 420, 300);
+
+
+            // Chart setup
+            // ------------------------------
+
+            d3.tsv("../../../../global_assets/demo_data/dimple/demo_data.tsv", function (data) {
+
+
+                // Create chart
+                // ------------------------------
+
+                // Define chart
+                var myChart = new dimple.chart(svg, data);
+
+                // Set bounds
+                myChart.setBounds(0, 0, "100%", "100%")
+
+                // Set margins
+                myChart.setMargins(5, 5, 90, 5);
+
+
+                // Add axes
+                // ------------------------------
+
+                myChart.addMeasureAxis("p", "Unit Sales");
+
+
+                // Construct layout
+                // ------------------------------
+
+                // Outer ring
+                var outerRing = myChart.addSeries("Channel", dimple.plot.pie);
+
+                // Inner ring
+                var innerRing = myChart.addSeries("Price Tier", dimple.plot.pie);
+
+                // Negatives are calculated from outside edge, positives from center
+                outerRing.innerRadius = "-30px";
+                innerRing.outerRadius = "-40px";
+                innerRing.innerRadius = "-70px";
+
+
+                // Add legend
+                // ------------------------------
+
+                var myLegend = myChart.addLegend("100%", 0, 0, "100%", "right");
+
+
+                // Add styles
+                // ------------------------------
+
+                // Font size
+                myLegend.fontSize = "12";
+
+                // Font family
+                myLegend.fontFamily = "Roboto";
+
+
+                //
+                // Draw chart
+                //
+
+                // Draw
+                myChart.draw();
+            });
+        }
+    };
+
+
+    //
+    // Return objects assigned to module
+    //
+
+    return {
+        init: function() {
+            _ringConcentric();
+        }
+    }
+}();
+
+
+// Initialize module
+// ------------------------------
+
+document.addEventListener('DOMContentLoaded', function() {
+    DimpleRingConcentric.init();
+});

assets/global/js/demo_pages/charts/dimple/rings/ring_lollipop.js

@@ -0,0 +1,155 @@
+/* ------------------------------------------------------------------------------
+ *
+ *  # Dimple.js - lollipops
+ *
+ *  Demo of lollipop chart. Data stored in .tsv file format
+ *
+ * ---------------------------------------------------------------------------- */
+
+
+// Setup module
+// ------------------------------
+
+var DimpleRingLollipop = function() {
+
+
+    //
+    // Setup module components
+    //
+
+    // Chart
+    var _ringLollipop = function() {
+        if (typeof dimple == 'undefined') {
+            console.warn('Warning - dimple.min.js is not loaded.');
+            return;
+        }
+
+        // Main variables
+        var element = document.getElementById('dimple-ring-lollipop');
+
+
+        // Initialize chart only if element exsists in the DOM
+        if(element) {
+
+            // Construct chart
+            var svg = dimple.newSvg(element, "100%", 500);
+
+
+            // Chart setup
+            // ------------------------------
+
+            d3.tsv("../../../../global_assets/demo_data/dimple/demo_data.tsv", function (data) {
+
+                // Filter data
+                data = dimple.filterData(data, "Date", [
+                    "01/07/2011", "01/08/2011", "01/09/2011",
+                    "01/10/2011", "01/11/2011", "01/12/2011"
+                ]);
+
+
+                // Create chart
+                // ------------------------------
+
+                // Define chart
+                var myChart = new dimple.chart(svg, data);
+
+                // Set bounds
+                myChart.setBounds(0, 0, "100%", "100%");
+
+                // Set margins
+                myChart.setMargins(55, 25, 10, 45);
+
+
+                // Add axes
+                // ------------------------------
+
+                // Horizontal
+                var x = myChart.addCategoryAxis("x", "Month");
+                    x.addOrderRule("Date");
+
+                // Vertical
+                var y = myChart.addMeasureAxis("y", "Unit Sales");
+
+                // Other axes
+                myChart.addMeasureAxis("p", "Unit Sales");
+
+
+                // Construct layout
+                // ------------------------------
+
+                // Add ring
+                var rings = myChart.addSeries("Channel", dimple.plot.pie);
+
+                // Inner radius
+                rings.innerRadius = 20;
+
+                // Outer radius
+                rings.outerRadius = 30;
+
+
+                // Add legend
+                // ------------------------------
+
+                var myLegend = myChart.addLegend(0, 5, "100%", 0, "right");
+
+
+                // Add styles
+                // ------------------------------
+
+                // Font size
+                x.fontSize = "12";
+                y.fontSize = "12";
+
+                // Font family
+                x.fontFamily = "Roboto";
+                y.fontFamily = "Roboto";
+
+                // Legend font style
+                myLegend.fontSize = "12";
+                myLegend.fontFamily = "Roboto";
+
+
+                //
+                // Draw chart
+                //
+
+                // Draw
+                myChart.draw();
+
+
+                // Resize chart
+                // ------------------------------
+
+                // Add a method to draw the chart on resize of the window
+                $(window).on('resize', resize);
+                $('.sidebar-control').on('click', resize);
+
+                // Resize function
+                function resize() {
+
+                    // Redraw chart
+                    myChart.draw(0, true);
+                }
+            });
+        }
+    };
+
+
+    //
+    // Return objects assigned to module
+    //
+
+    return {
+        init: function() {
+            _ringLollipop();
+        }
+    }
+}();
+
+
+// Initialize module
+// ------------------------------
+
+document.addEventListener('DOMContentLoaded', function() {
+    DimpleRingLollipop.init();
+});

assets/global/js/demo_pages/charts/dimple/rings/ring_matrix.js

@@ -0,0 +1,152 @@
+/* ------------------------------------------------------------------------------
+ *
+ *  # Dimple.js - rings matrix
+ *
+ *  Demo of matrix of rings. Data stored in .tsv file format
+ *
+ * ---------------------------------------------------------------------------- */
+
+
+// Setup module
+// ------------------------------
+
+var DimpleRingMatrix = function() {
+
+
+    //
+    // Setup module components
+    //
+
+    // Chart
+    var _ringMatrix = function() {
+        if (typeof dimple == 'undefined') {
+            console.warn('Warning - dimple.min.js is not loaded.');
+            return;
+        }
+
+        // Main variables
+        var element = document.getElementById('dimple-ring-matrix');
+
+
+        // Initialize chart only if element exsists in the DOM
+        if(element) {
+
+            // Construct chart
+            var svg = dimple.newSvg(element, "100%", 500);
+
+
+            // Chart setup
+            // ------------------------------
+
+            d3.tsv("../../../../global_assets/demo_data/dimple/demo_data.tsv", function (data) {
+
+
+                // Create chart
+                // ------------------------------
+
+                // Define chart
+                var myChart = new dimple.chart(svg, data);
+
+                // Set bounds
+                myChart.setBounds(0, 0, "100%", "100%");
+
+                // Set margins
+                myChart.setMargins(40, 25, 10, 45);
+
+
+                // Add axes
+                // ------------------------------
+
+                // Horizontal
+                var x = myChart.addCategoryAxis("x", "Price Tier");
+
+                // Vertical
+                var y = myChart.addCategoryAxis("y", "Pack Size");
+
+                // Other axes
+                myChart.addMeasureAxis("p", "Unit Sales");
+
+
+                // Construct layout
+                // ------------------------------
+
+                // Add ring
+                var rings = myChart.addSeries("Channel", dimple.plot.pie);
+
+                // Inner radius
+                rings.innerRadius = 15;
+
+                // Outer radius
+                rings.outerRadius = 25;
+
+                // Display grid lines
+                x.showGridlines = true;
+                y.showGridlines = true;
+
+
+                // Add legend
+                // ------------------------------
+
+                var myLegend = myChart.addLegend(0, 5, "100%", 0, "right");
+
+
+                // Add styles
+                // ------------------------------
+
+                // Font size
+                x.fontSize = "12";
+                y.fontSize = "12";
+
+                // Font family
+                x.fontFamily = "Roboto";
+                y.fontFamily = "Roboto";
+
+                // Legend font style
+                myLegend.fontSize = "12";
+                myLegend.fontFamily = "Roboto";
+
+
+                //
+                // Draw chart
+                //
+
+                // Draw
+                myChart.draw();
+
+
+                // Resize chart
+                // ------------------------------
+
+                // Add a method to draw the chart on resize of the window
+                $(window).on('resize', resize);
+                $('.sidebar-control').on('click', resize);
+
+                // Resize function
+                function resize() {
+
+                    // Redraw chart
+                    myChart.draw(0, true);
+                }
+            });
+        }
+    };
+
+
+    //
+    // Return objects assigned to module
+    //
+
+    return {
+        init: function() {
+            _ringMatrix();
+        }
+    }
+}();
+
+
+// Initialize module
+// ------------------------------
+
+document.addEventListener('DOMContentLoaded', function() {
+    DimpleRingMatrix.init();
+});

assets/global/js/demo_pages/charts/dimple/rings/ring_scatter.js

@@ -0,0 +1,151 @@
+/* ------------------------------------------------------------------------------
+ *
+ *  # Dimple.js - rings as scatter
+ *
+ *  Demo of scatter chart with rings. Data stored in .tsv file format
+ *
+ * ---------------------------------------------------------------------------- */
+
+
+// Setup module
+// ------------------------------
+
+var DimpleRingScatter = function() {
+
+
+    //
+    // Setup module components
+    //
+
+    // Chart
+    var _ringScatter = function() {
+        if (typeof dimple == 'undefined') {
+            console.warn('Warning - dimple.min.js is not loaded.');
+            return;
+        }
+
+        // Main variables
+        var element = document.getElementById('dimple-ring-scatter');
+
+
+        // Initialize chart only if element exsists in the DOM
+        if(element) {
+
+            // Construct chart
+            var svg = dimple.newSvg(element, "100%", 500);
+
+
+            // Chart setup
+            // ------------------------------
+
+            d3.tsv("../../../../global_assets/demo_data/dimple/demo_data.tsv", function (data) {
+
+                // Filter data
+                data = dimple.filterData(data, "Date", "01/12/2011");
+
+
+                // Create chart
+                // ------------------------------
+
+                // Define chart
+                var myChart = new dimple.chart(svg, data);
+
+                // Set bounds
+                myChart.setBounds(0, 0, "100%", "100%");
+
+                // Set margins
+                myChart.setMargins(45, 25, 15, 45);
+
+
+                // Add axes
+                // ------------------------------
+
+                // Horizontal
+                var x = myChart.addMeasureAxis("x", "Unit Sales Monthly Change");
+
+                // Vertical
+                var y = myChart.addMeasureAxis("y", "Price Monthly Change");
+
+                // Other axes
+                myChart.addMeasureAxis("p", "Operating Profit");
+
+
+                // Construct layout
+                // ------------------------------
+
+                // Add ring
+                var rings = myChart.addSeries(["Owner", "Channel"], dimple.plot.pie);
+
+                // Inner radius
+                rings.innerRadius = 30;
+
+                // Outer radius
+                rings.outerRadius = 20;
+
+
+                // Add legend
+                // ------------------------------
+
+                var myLegend = myChart.addLegend(0, 5, "100%", 0, "right");
+
+
+                // Add styles
+                // ------------------------------
+
+                // Font size
+                x.fontSize = "12";
+                y.fontSize = "12";
+
+                // Font family
+                x.fontFamily = "Roboto";
+                y.fontFamily = "Roboto";
+
+                // Legend font style
+                myLegend.fontSize = "12";
+                myLegend.fontFamily = "Roboto";
+
+
+                //
+                // Draw chart
+                //
+
+                // Draw
+                myChart.draw();
+
+
+                // Resize chart
+                // ------------------------------
+
+                // Add a method to draw the chart on resize of the window
+                $(window).on('resize', resize);
+                $('.sidebar-control').on('click', resize);
+
+                // Resize function
+                function resize() {
+
+                    // Redraw chart
+                    myChart.draw(0, true);
+                }
+            });
+        }
+    };
+
+
+    //
+    // Return objects assigned to module
+    //
+
+    return {
+        init: function() {
+            _ringScatter();
+        }
+    }
+}();
+
+
+// Initialize module
+// ------------------------------
+
+document.addEventListener('DOMContentLoaded', function() {
+    DimpleRingScatter.init();
+});

assets/global/js/demo_pages/charts/dimple/scatter/scatter_basic.js

@@ -0,0 +1,148 @@
+/* ------------------------------------------------------------------------------
+ *
+ *  # Dimple.js - basic scatter
+ *
+ *  Demo of scatter chart. Data stored in .tsv file format
+ *
+ * ---------------------------------------------------------------------------- */
+
+
+// Setup module
+// ------------------------------
+
+var DimpleScatterBasic = function() {
+
+
+    //
+    // Setup module components
+    //
+
+    // Chart
+    var _scatterBasic = function() {
+        if (typeof dimple == 'undefined') {
+            console.warn('Warning - dimple.min.js is not loaded.');
+            return;
+        }
+
+        // Main variables
+        var element = document.getElementById('dimple-scatter-basic');
+
+
+        // Initialize chart only if element exsists in the DOM
+        if(element) {
+
+            // Construct chart
+            var svg = dimple.newSvg(element, "100%", 500);
+
+
+            // Chart setup
+            // ------------------------------
+
+            d3.tsv("../../../../global_assets/demo_data/dimple/demo_data.tsv", function (data) {
+
+                // Filter data
+                data = dimple.filterData(data, "Date", "01/12/2011");
+
+
+                // Create chart
+                // ------------------------------
+
+                // Define chart
+                var myChart = new dimple.chart(svg, data);
+
+                // Set bounds
+                myChart.setBounds(0, 0, "100%", "100%");
+
+                // Set margins
+                myChart.setMargins(55, 25, 15, 45);
+
+
+                // Create axes
+                // ------------------------------
+
+                // Horizontal
+                var x = myChart.addMeasureAxis("x", "Unit Sales");
+
+                // Vertical
+                var y = myChart.addMeasureAxis("y", "Operating Profit");
+
+
+                // Construct layout
+                // ------------------------------
+
+                // Add scatter
+                myChart.addSeries(["SKU", "Channel"], dimple.plot.bubble);
+
+
+                // Add legend
+                // ------------------------------
+
+                var myLegend = myChart.addLegend(0, 5, "100%", 0, "right");
+
+
+                // Add styles
+                // ------------------------------
+
+                // Font size
+                x.fontSize = "12";
+                y.fontSize = "12";
+
+                // Font family
+                x.fontFamily = "Roboto";
+                y.fontFamily = "Roboto";
+
+                // Legend font style
+                myLegend.fontSize = "12";
+                myLegend.fontFamily = "Roboto";
+
+
+                //
+                // Draw chart
+                //
+
+                // Draw
+                myChart.draw();
+
+                // Position legend text
+                myLegend.shapes.selectAll("text").attr("dy", "1");
+
+
+                // Resize chart
+                // ------------------------------
+
+                // Add a method to draw the chart on resize of the window
+                $(window).on('resize', resize);
+                $('.sidebar-control').on('click', resize);
+
+                // Resize function
+                function resize() {
+
+                    // Redraw chart
+                    myChart.draw(0, true);
+
+                    // Position legend text
+                    myLegend.shapes.selectAll("text").attr("dy", "1");
+                }
+            });
+        }
+    };
+
+
+    //
+    // Return objects assigned to module
+    //
+
+    return {
+        init: function() {
+            _scatterBasic();
+        }
+    }
+}();
+
+
+// Initialize module
+// ------------------------------
+
+document.addEventListener('DOMContentLoaded', function() {
+    DimpleScatterBasic.init();
+});

assets/global/js/demo_pages/charts/dimple/scatter/scatter_horizontal_lollipop.js

@@ -0,0 +1,151 @@
+/* ------------------------------------------------------------------------------
+ *
+ *  # Dimple.js - horizontal lollipop
+ *
+ *  Demo of horizontal lollipop chart. Data stored in .tsv file format
+ *
+ * ---------------------------------------------------------------------------- */
+
+
+// Setup module
+// ------------------------------
+
+var DimpleScatterLollipopHorizontal = function() {
+
+
+    //
+    // Setup module components
+    //
+
+    // Chart
+    var _scatterLollipopHorizontal = function() {
+        if (typeof dimple == 'undefined') {
+            console.warn('Warning - dimple.min.js is not loaded.');
+            return;
+        }
+
+        // Main variables
+        var element = document.getElementById('dimple-scatter-lollipop-horizontal');
+
+
+        // Initialize chart only if element exsists in the DOM
+        if(element) {
+
+            // Construct chart
+            var svg = dimple.newSvg(element, "100%", 500);
+
+
+            // Chart setup
+            // ------------------------------
+
+            d3.tsv("../../../../global_assets/demo_data/dimple/demo_data.tsv", function (data) {
+
+
+                // Create chart
+                // ------------------------------
+
+                // Define chart
+                var myChart = new dimple.chart(svg, data);
+
+                // Set bounds
+                myChart.setBounds(0, 0, "100%", "100%");
+
+                // Set margins
+                myChart.setMargins(70, 25, 15, 45);
+
+
+                // Create axes
+                // ------------------------------
+
+                // Horizontal
+                var x = myChart.addMeasureAxis("x", "Unit Sales");
+
+                // Vertical
+                var y = myChart.addCategoryAxis("y", "Month");
+
+                // Show vertical grid lines
+                y.showGridlines = true;
+
+                // Order by date
+                y.addOrderRule("Date");
+
+
+                // Construct layout
+                // ------------------------------
+
+                // Add scatter
+                myChart.addSeries("Channel", dimple.plot.bubble);
+
+
+                // Add legend
+                // ------------------------------
+
+                var myLegend = myChart.addLegend(0, 5, "100%", 0, "right");
+
+
+                // Add styles
+                // ------------------------------
+
+                // Font size
+                x.fontSize = "12";
+                y.fontSize = "12";
+
+                // Font family
+                x.fontFamily = "Roboto";
+                y.fontFamily = "Roboto";
+
+                // Legend font style
+                myLegend.fontSize = "12";
+                myLegend.fontFamily = "Roboto";
+
+
+                //
+                // Draw chart
+                //
+
+                // Draw
+                myChart.draw();
+
+                // Position legend text
+                myLegend.shapes.selectAll("text").attr("dy", "1");
+
+
+                // Resize chart
+                // ------------------------------
+
+                // Add a method to draw the chart on resize of the window
+                $(window).on('resize', resize);
+                $('.sidebar-control').on('click', resize);
+
+                // Resize function
+                function resize() {
+
+                    // Redraw chart
+                    myChart.draw(0, true);
+
+                    // Position legend text
+                    myLegend.shapes.selectAll("text").attr("dy", "1");
+                }
+            });
+        }
+    };
+
+
+    //
+    // Return objects assigned to module
+    //
+
+    return {
+        init: function() {
+            _scatterLollipopHorizontal();
+        }
+    }
+}();
+
+
+// Initialize module
+// ------------------------------
+
+document.addEventListener('DOMContentLoaded', function() {
+    DimpleScatterLollipopHorizontal.init();
+});

assets/global/js/demo_pages/charts/dimple/scatter/scatter_lollipop_grouped.js

@@ -0,0 +1,146 @@
+/* ------------------------------------------------------------------------------
+ *
+ *  # Dimple.js - grouped lollipop
+ *
+ *  Demo of grouped lollipop chart. Data stored in .tsv file format
+ *
+ * ---------------------------------------------------------------------------- */
+
+
+// Setup module
+// ------------------------------
+
+var DimpleScatterLollipopGrouped = function() {
+
+
+    //
+    // Setup module components
+    //
+
+    // Chart
+    var _scatterLollipopGrouped = function() {
+        if (typeof dimple == 'undefined') {
+            console.warn('Warning - dimple.min.js is not loaded.');
+            return;
+        }
+
+        // Main variables
+        var element = document.getElementById('dimple-scatter-lollipop-grouped');
+
+
+        // Initialize chart only if element exsists in the DOM
+        if(element) {
+
+            // Construct chart
+            var svg = dimple.newSvg(element, "100%", 500);
+
+
+            // Chart setup
+            // ------------------------------
+
+            d3.tsv("../../../../global_assets/demo_data/dimple/demo_data.tsv", function (data) {
+
+
+                // Create chart
+                // ------------------------------
+
+                // Define chart
+                var myChart = new dimple.chart(svg, data);
+
+                // Set bounds
+                myChart.setBounds(0, 0, "100%", "100%");
+
+                // Set margins
+                myChart.setMargins(60, 25, 15, 45);
+
+
+                // Create axes
+                // ------------------------------
+
+                // Horizontal
+                var x = myChart.addMeasureAxis("x", "Unit Sales");
+
+                // Vertical
+                var y = myChart.addCategoryAxis("y", ["Price Tier", "Channel"]);
+                    y.showGridlines = true;
+
+
+                // Construct layout
+                // ------------------------------
+
+                // Add scatter
+                myChart.addSeries("Channel", dimple.plot.bubble);
+
+
+                // Add legend
+                // ------------------------------
+
+                var myLegend = myChart.addLegend(0, 5, "100%", 0, "right");
+
+
+                // Add styles
+                // ------------------------------
+
+                // Font size
+                x.fontSize = "12";
+                y.fontSize = "12";
+
+                // Font family
+                x.fontFamily = "Roboto";
+                y.fontFamily = "Roboto";
+
+                // Legend font style
+                myLegend.fontSize = "12";
+                myLegend.fontFamily = "Roboto";
+
+
+                //
+                // Draw chart
+                //
+
+                // Draw
+                myChart.draw();
+
+                // Position legend text
+                myLegend.shapes.selectAll("text").attr("dy", "1");
+
+
+                // Resize chart
+                // ------------------------------
+
+                // Add a method to draw the chart on resize of the window
+                $(window).on('resize', resize);
+                $('.sidebar-control').on('click', resize);
+
+                // Resize function
+                function resize() {
+
+                    // Redraw chart
+                    myChart.draw(0, true);
+
+                    // Position legend text
+                    myLegend.shapes.selectAll("text").attr("dy", "1");
+                }
+            });
+        }
+    };
+
+
+    //
+    // Return objects assigned to module
+    //
+
+    return {
+        init: function() {
+            _scatterLollipopGrouped();
+        }
+    }
+}();
+
+
+// Initialize module
+// ------------------------------
+
+document.addEventListener('DOMContentLoaded', function() {
+    DimpleScatterLollipopGrouped.init();
+});

assets/global/js/demo_pages/charts/dimple/scatter/scatter_matrix.js

@@ -0,0 +1,149 @@
+/* ------------------------------------------------------------------------------
+ *
+ *  # Dimple.js - scatter matrix
+ *
+ *  Demo of scatter matrix. Data stored in .tsv file format
+ *
+ * ---------------------------------------------------------------------------- */
+
+
+// Setup module
+// ------------------------------
+
+var DimpleScatterMatrix = function() {
+
+
+    //
+    // Setup module components
+    //
+
+    // Chart
+    var _scatterMatrix = function() {
+        if (typeof dimple == 'undefined') {
+            console.warn('Warning - dimple.min.js is not loaded.');
+            return;
+        }
+
+        // Main variables
+        var element = document.getElementById('dimple-scatter-matrix');
+
+
+        // Initialize chart only if element exsists in the DOM
+        if(element) {
+
+            // Construct chart
+            var svg = dimple.newSvg(element, "100%", 500);
+
+
+            // Chart setup
+            // ------------------------------
+
+            d3.tsv("../../../../global_assets/demo_data/dimple/demo_data.tsv", function (data) {
+
+
+                // Create chart
+                // ------------------------------
+
+                // Define chart
+                var myChart = new dimple.chart(svg, data);
+
+                // Set bounds
+                myChart.setBounds(0, 0, "100%", "100%");
+
+                // Set margins
+                myChart.setMargins(70, 25, 10, 45);
+
+
+                // Create axes
+                // ------------------------------
+
+                // Horizontal
+                var x = myChart.addCategoryAxis("x", ["Channel", "Price Tier"]);
+
+                // Vertical
+                var y = myChart.addCategoryAxis("y", "Owner");
+
+                // Display grid lines
+                x.showGridlines = true;
+                y.showGridlines = true;
+
+
+                // Construct layout
+                // ------------------------------
+
+                // Add scatter
+                myChart.addSeries("Price Tier", dimple.plot.bubble);
+
+
+                // Add legend
+                // ------------------------------
+
+                var myLegend = myChart.addLegend(0, 5, "100%", 0, "right");
+
+
+                // Add styles
+                // ------------------------------
+
+                // Font size
+                x.fontSize = "12";
+                y.fontSize = "12";
+
+                // Font family
+                x.fontFamily = "Roboto";
+                y.fontFamily = "Roboto";
+
+                // Legend font style
+                myLegend.fontSize = "12";
+                myLegend.fontFamily = "Roboto";
+
+
+                //
+                // Draw chart
+                //
+
+                // Draw
+                myChart.draw();
+
+                // Position legend text
+                myLegend.shapes.selectAll("text").attr("dy", "1");
+
+
+                // Resize chart
+                // ------------------------------
+
+                // Add a method to draw the chart on resize of the window
+                $(window).on('resize', resize);
+                $('.sidebar-control').on('click', resize);
+
+                // Resize function
+                function resize() {
+
+                    // Redraw chart
+                    myChart.draw(0, true);
+
+                    // Position legend text
+                    myLegend.shapes.selectAll("text").attr("dy", "1");
+                }
+            });
+        }
+    };
+
+
+    //
+    // Return objects assigned to module
+    //
+
+    return {
+        init: function() {
+            _scatterMatrix();
+        }
+    }
+}();
+
+
+// Initialize module
+// ------------------------------
+
+document.addEventListener('DOMContentLoaded', function() {
+    DimpleScatterMatrix.init();
+});

assets/global/js/demo_pages/charts/dimple/scatter/scatter_vertical_lollipop.js

@@ -0,0 +1,152 @@
+/* ------------------------------------------------------------------------------
+ *
+ *  # Dimple.js - vertical lollipop
+ *
+ *  Demo of vertical lollipop chart. Data stored in .tsv file format
+ *
+ * ---------------------------------------------------------------------------- */
+
+
+// Setup module
+// ------------------------------
+
+var DimpleScatterLollipopVertical = function() {
+
+
+    //
+    // Setup module components
+    //
+
+    // Chart
+    var _scatterLollipopVertical = function() {
+        if (typeof dimple == 'undefined') {
+            console.warn('Warning - dimple.min.js is not loaded.');
+            return;
+        }
+
+        // Main variables
+        var element = document.getElementById('dimple-scatter-lollipop-vertical');
+
+
+        // Initialize chart only if element exsists in the DOM
+        if(element) {
+
+            // Construct chart
+            var svg = dimple.newSvg(element, "100%", 500);
+
+
+            // Chart setup
+            // ------------------------------
+
+            d3.tsv("../../../../global_assets/demo_data/dimple/demo_data.tsv", function (data) {
+
+
+                // Create chart
+                // ------------------------------
+
+                // Define chart
+                var myChart = new dimple.chart(svg, data);
+
+                // Set bounds
+                myChart.setBounds(0, 0, "100%", "100%");
+
+                // Set margins
+                myChart.setMargins(55, 25, 10, 50);
+
+
+                // Create axes
+                // ------------------------------
+
+                // Horizontal
+                var x = myChart.addCategoryAxis("x", "Month");
+                    x.addOrderRule("Date");
+
+                // Vertical
+                var y = myChart.addMeasureAxis("y", "Unit Sales");
+
+
+                // Construct layout
+                // ------------------------------
+
+                // Add scatter
+                myChart.addSeries("Channel", dimple.plot.bubble);
+
+
+                // Add legend
+                // ------------------------------
+
+                var myLegend = myChart.addLegend(0, 5, "100%", 0, "right");
+
+
+                // Add styles
+                // ------------------------------
+
+                // Font size
+                x.fontSize = "12";
+                y.fontSize = "12";
+
+                // Font family
+                x.fontFamily = "Roboto";
+                y.fontFamily = "Roboto";
+
+                // Legend font style
+                myLegend.fontSize = "12";
+                myLegend.fontFamily = "Roboto";
+
+
+                //
+                // Draw chart
+                //
+
+                // Draw
+                myChart.draw();
+
+                // Remove axis titles
+                x.titleShape.remove();
+
+                // Position legend text
+                myLegend.shapes.selectAll("text").attr("dy", "1");
+
+
+                // Resize chart
+                // ------------------------------
+
+                // Add a method to draw the chart on resize of the window
+                $(window).on('resize', resize);
+                $('.sidebar-control').on('click', resize);
+
+                // Resize function
+                function resize() {
+
+                    // Redraw chart
+                    myChart.draw(0, true);
+
+                    // Remove axis titles
+                    x.titleShape.remove();
+
+                    // Position legend text
+                    myLegend.shapes.selectAll("text").attr("dy", "1");
+                }
+            });
+        }
+    };
+
+
+    //
+    // Return objects assigned to module
+    //
+
+    return {
+        init: function() {
+            _scatterLollipopVertical();
+        }
+    }
+}();
+
+
+// Initialize module
+// ------------------------------
+
+document.addEventListener('DOMContentLoaded', function() {
+    DimpleScatterLollipopVertical.init();
+});

assets/global/js/demo_pages/charts/dimple/step/step_horizontal_multiple.js

@@ -0,0 +1,157 @@
+/* ------------------------------------------------------------------------------
+ *
+ *  # Dimple.js - multiple horizontal steps
+ *
+ *  Demo of multiple step chart. Data stored in .tsv file format
+ *
+ * ---------------------------------------------------------------------------- */
+
+
+// Setup module
+// ------------------------------
+
+var DimpleStepHorizontalMultiple = function() {
+
+
+    //
+    // Setup module components
+    //
+
+    // Chart
+    var _stepHorizontalMultiple = function() {
+        if (typeof dimple == 'undefined') {
+            console.warn('Warning - dimple.min.js is not loaded.');
+            return;
+        }
+
+        // Main variables
+        var element = document.getElementById('dimple-step-horizontal-multiple');
+
+
+        // Initialize chart only if element exsists in the DOM
+        if(element) {
+
+            // Construct chart
+            var svg = dimple.newSvg(element, "100%", 500);
+
+
+            // Chart setup
+            // ------------------------------
+
+            d3.tsv("../../../../global_assets/demo_data/dimple/demo_data.tsv", function (data) {
+
+                // Filter data
+                data = dimple.filterData(data, "Owner", ["Aperture", "Black Mesa"])
+
+
+                // Create chart
+                // ------------------------------
+
+                // Define chart
+                var myChart = new dimple.chart(svg, data);
+
+                // Set bounds
+                myChart.setBounds(0, 0, "100%", "100%")
+
+                // Set margins
+                myChart.setMargins(55, 25, 10, 45);
+
+
+                // Create axes
+                // ------------------------------
+
+                // Horizontal
+                var x = myChart.addCategoryAxis("x", "Month");
+                    x.addOrderRule("Date");
+
+                // Vertical
+                var y = myChart.addMeasureAxis("y", "Unit Sales");
+
+
+                // Construct layout
+                // ------------------------------
+
+                // Add line
+                var s = myChart
+                    .addSeries("Channel", dimple.plot.line)
+                    .interpolation = "step";
+
+
+                // Add legend
+                // ------------------------------
+                
+                var myLegend = myChart.addLegend(0, 5, "100%", 0, "right");
+
+
+                // Add styles
+                // ------------------------------
+
+                // Font size
+                x.fontSize = "12";
+                y.fontSize = "12";
+
+                // Font family
+                x.fontFamily = "Roboto";
+                y.fontFamily = "Roboto";
+
+                // Legend font style
+                myLegend.fontSize = "12";
+                myLegend.fontFamily = "Roboto";
+
+
+                //
+                // Draw chart
+                //
+
+                // Draw
+                myChart.draw();
+
+                // Position legend text
+                myLegend.shapes.selectAll("text").attr("dy", "1");
+
+                // Remove axis titles
+                x.titleShape.remove();
+
+
+                // Resize chart
+                // ------------------------------
+
+                // Add a method to draw the chart on resize of the window
+                $(window).on('resize', resize);
+                $('.sidebar-control').on('click', resize);
+
+                // Resize function
+                function resize() {
+
+                    // Redraw chart
+                    myChart.draw(0, true);
+
+                    // Position legend text
+                    myLegend.shapes.selectAll("text").attr("dy", "1");
+
+                    // Remove axis titles
+                    x.titleShape.remove();
+                }
+            });
+        }
+    };
+
+
+    //
+    // Return objects assigned to module
+    //
+
+    return {
+        init: function() {
+            _stepHorizontalMultiple();
+        }
+    }
+}();
+
+
+// Initialize module
+// ------------------------------
+
+document.addEventListener('DOMContentLoaded', function() {
+    DimpleStepHorizontalMultiple.init();
+});

assets/global/js/demo_pages/charts/dimple/step/step_horizontal_multiple_grouped.js

@@ -0,0 +1,154 @@
+/* ------------------------------------------------------------------------------
+ *
+ *  # Dimple.js - grouped multiple horizontal steps
+ *
+ *  Demo of multiple grouped step chart. Data stored in .tsv file format
+ *
+ * ---------------------------------------------------------------------------- */
+
+
+// Setup module
+// ------------------------------
+
+var DimpleStepHorizontalMultipleGrouped = function() {
+
+
+    //
+    // Setup module components
+    //
+
+    // Chart
+    var _stepHorizontalMultipleGrouped = function() {
+        if (typeof dimple == 'undefined') {
+            console.warn('Warning - dimple.min.js is not loaded.');
+            return;
+        }
+
+        // Main variables
+        var element = document.getElementById('dimple-step-horizontal-multiple-grouped');
+
+
+        // Initialize chart only if element exsists in the DOM
+        if(element) {
+
+            // Construct chart
+            var svg = dimple.newSvg(element, "100%", 500);
+
+
+            // Chart setup
+            // ------------------------------
+
+            d3.tsv("../../../../global_assets/demo_data/dimple/demo_data.tsv", function (data) {
+
+                // Filter data
+                data = dimple.filterData(data, "Owner", ["Aperture", "Black Mesa"])
+
+
+                // Create chart
+                // ------------------------------
+
+                // Define chart
+                var myChart = new dimple.chart(svg, data);
+
+                // Set bounds
+                myChart.setBounds(0, 0, "100%", "100%")
+
+                // Set margins
+                myChart.setMargins(55, 10, 100, 45);
+
+
+                // Create axes
+                // ------------------------------
+
+                // Horizontal
+                var x = myChart.addCategoryAxis("x", ["Owner", "Month"]);
+                    x.addGroupOrderRule("Date");
+
+                // Vertical
+                var y = myChart.addMeasureAxis("y", "Unit Sales");
+
+
+                // Construct layout
+                // ------------------------------
+
+                // Add line
+                var s = myChart
+                    .addSeries(["Brand"], dimple.plot.line)
+                    .interpolation = "step";
+
+                // Steps space
+                s.barGap = 0.05;
+
+
+                // Add legend
+                // ------------------------------
+                
+                var myLegend = myChart.addLegend("100%", 0, 0, "100%", "right");
+
+
+                // Add styles
+                // ------------------------------
+
+                // Font size
+                x.fontSize = "12";
+                y.fontSize = "12";
+
+                // Font family
+                x.fontFamily = "Roboto";
+                y.fontFamily = "Roboto";
+
+                // Legend font style
+                myLegend.fontSize = "12";
+                myLegend.fontFamily = "Roboto";
+
+
+                //
+                // Draw chart
+                //
+
+                // Draw
+                myChart.draw();
+
+                // Position legend text
+                myLegend.shapes.selectAll("text").attr("dy", "1");
+
+
+                // Resize chart
+                // ------------------------------
+
+                // Add a method to draw the chart on resize of the window
+                $(window).on('resize', resize);
+                $('.sidebar-control').on('click', resize);
+
+                // Resize function
+                function resize() {
+
+                    // Redraw chart
+                    myChart.draw(0, true);
+
+                    // Position legend text
+                    myLegend.shapes.selectAll("text").attr("dy", "1");
+                }
+            });
+        }
+    };
+
+
+    //
+    // Return objects assigned to module
+    //
+
+    return {
+        init: function() {
+            _stepHorizontalMultipleGrouped();
+        }
+    }
+}();
+
+
+// Initialize module
+// ------------------------------
+
+document.addEventListener('DOMContentLoaded', function() {
+    DimpleStepHorizontalMultipleGrouped.init();
+});

assets/global/js/demo_pages/charts/dimple/step/step_horizontal_single.js

@@ -0,0 +1,141 @@
+/* ------------------------------------------------------------------------------
+ *
+ *  # Dimple.js - horizontal step
+ *
+ *  Demo of a single step chart. Data stored in .tsv file format
+ *
+ * ---------------------------------------------------------------------------- */
+
+
+// Setup module
+// ------------------------------
+
+var DimpleStepHorizontalSingle = function() {
+
+
+    //
+    // Setup module components
+    //
+
+    // Chart
+    var _stepHorizontalSingle = function() {
+        if (typeof dimple == 'undefined') {
+            console.warn('Warning - dimple.min.js is not loaded.');
+            return;
+        }
+
+        // Main variables
+        var element = document.getElementById('dimple-step-horizontal-single');
+
+
+        // Initialize chart only if element exsists in the DOM
+        if(element) {
+
+            // Construct chart
+            var svg = dimple.newSvg(element, "100%", 500);
+
+
+            // Chart setup
+            // ------------------------------
+
+            d3.tsv("../../../../global_assets/demo_data/dimple/demo_data.tsv", function (data) {
+
+                // Filter data
+                data = dimple.filterData(data, "Owner", ["Aperture", "Black Mesa"])
+
+
+                // Create chart
+                // ------------------------------
+
+                // Define chart
+                var myChart = new dimple.chart(svg, data);
+
+                // Set bounds
+                myChart.setBounds(0, 0, "100%", "100%")
+
+                // Set margins
+                myChart.setMargins(55, 10, 10, 45);
+
+
+                // Create axes
+                // ------------------------------
+
+                // Horizontal
+                var x = myChart.addCategoryAxis("x", "Month");
+                    x.addOrderRule("Date");
+
+                // Vertical
+                var y = myChart.addMeasureAxis("y", "Unit Sales");
+
+
+                // Construct layout
+                // ------------------------------
+
+                // Add line
+                var s = myChart
+                    .addSeries(null, dimple.plot.line)
+                    .interpolation = "step";
+
+
+                // Add styles
+                // ------------------------------
+
+                // Font size
+                x.fontSize = "12";
+                y.fontSize = "12";
+
+                // Font family
+                x.fontFamily = "Roboto";
+                y.fontFamily = "Roboto";
+
+
+                //
+                // Draw chart
+                //
+
+                // Draw
+                myChart.draw();
+
+                // Remove axis titles
+                x.titleShape.remove();
+
+
+                // Resize chart
+                // ------------------------------
+
+                // Add a method to draw the chart on resize of the window
+                $(window).on('resize', resize);
+                $('.sidebar-control').on('click', resize);
+
+                // Resize function
+                function resize() {
+
+                    // Redraw chart
+                    myChart.draw(0, true);
+
+                    // Remove axis titles
+                    x.titleShape.remove();
+                }
+            });
+        }
+    };
+
+
+    //
+    // Return objects assigned to module
+    //
+
+    return {
+        init: function() {
+            _stepHorizontalSingle();
+        }
+    }
+}();
+
+
+// Initialize module
+// ------------------------------
+
+document.addEventListener('DOMContentLoaded', function() {
+    DimpleStepHorizontalSingle.init();
+});

assets/global/js/demo_pages/charts/dimple/step/step_horizontal_single_grouped.js

@@ -0,0 +1,138 @@
+/* ------------------------------------------------------------------------------
+ *
+ *  # Dimple.js - grouped horizontal steps
+ *
+ *  Demo of grouped steps chart. Data stored in .tsv file format
+ *
+ * ---------------------------------------------------------------------------- */
+
+
+// Setup module
+// ------------------------------
+
+var DimpleStepHorizontalSingleGrouped = function() {
+
+
+    //
+    // Setup module components
+    //
+
+    // Chart
+    var _stepHorizontalSingleGrouped = function() {
+        if (typeof dimple == 'undefined') {
+            console.warn('Warning - dimple.min.js is not loaded.');
+            return;
+        }
+
+        // Main variables
+        var element = document.getElementById('dimple-step-horizontal-single-grouped');
+
+
+        // Initialize chart only if element exsists in the DOM
+        if(element) {
+
+            // Construct chart
+            var svg = dimple.newSvg(element, "100%", 500);
+
+
+            // Chart setup
+            // ------------------------------
+
+            d3.tsv("../../../../global_assets/demo_data/dimple/demo_data.tsv", function (data) {
+
+                // Filter data
+                data = dimple.filterData(data, "Owner", ["Aperture", "Black Mesa"])
+
+
+                // Create chart
+                // ------------------------------
+
+                // Define chart
+                var myChart = new dimple.chart(svg, data);
+
+                // Set bounds
+                myChart.setBounds(0, 0, "100%", "100%")
+
+                // Set margins
+                myChart.setMargins(55, 10, 10, 45);
+
+
+                // Create axes
+                // ------------------------------
+
+                // Horizontal
+                var x = myChart.addCategoryAxis("x", ["Owner", "Month"]);
+                    x.addGroupOrderRule("Date");
+
+                // Vertical
+                var y = myChart.addMeasureAxis("y", "Unit Sales");
+
+
+                // Construct layout
+                // ------------------------------
+
+                // Add line
+                var s = myChart
+                    .addSeries("Owner", dimple.plot.line)
+                    .interpolation = "step";
+
+                // Line space
+                s.barGap = 0.05;
+
+                
+                // Add styles
+                // ------------------------------
+
+                // Font size
+                x.fontSize = "12";
+                y.fontSize = "12";
+
+                // Font family
+                x.fontFamily = "Roboto";
+                y.fontFamily = "Roboto";
+
+
+                //
+                // Draw chart
+                //
+
+                // Draw
+                myChart.draw();
+
+
+                // Resize chart
+                // ------------------------------
+
+                // Add a method to draw the chart on resize of the window
+                $(window).on('resize', resize);
+                $('.sidebar-control').on('click', resize);
+
+                // Resize function
+                function resize() {
+
+                    // Redraw chart
+                    myChart.draw(0, true);
+                }
+            });
+        }
+    };
+
+
+    //
+    // Return objects assigned to module
+    //
+
+    return {
+        init: function() {
+            _stepHorizontalSingleGrouped();
+        }
+    }
+}();
+
+
+// Initialize module
+// ------------------------------
+
+document.addEventListener('DOMContentLoaded', function() {
+    DimpleStepHorizontalSingleGrouped.init();
+});

assets/global/js/demo_pages/charts/dimple/step/step_vertical_multiple.js

@@ -0,0 +1,148 @@
+/* ------------------------------------------------------------------------------
+ *
+ *  # Dimple.js - multiple vertical steps
+ *
+ *  Demo of multiple step chart. Data stored in .tsv file format
+ *
+ * ---------------------------------------------------------------------------- */
+
+
+// Setup module
+// ------------------------------
+
+var DimpleStepVerticalMultiple = function() {
+
+
+    //
+    // Setup module components
+    //
+
+    // Chart
+    var _stepVerticalMultiple = function() {
+        if (typeof dimple == 'undefined') {
+            console.warn('Warning - dimple.min.js is not loaded.');
+            return;
+        }
+
+        // Main variables
+        var element = document.getElementById('dimple-step-vertical-multiple');
+
+
+        // Initialize chart only if element exsists in the DOM
+        if(element) {
+
+            // Construct chart
+            var svg = dimple.newSvg(element, "100%", 500);
+
+
+            d3.tsv("../../../../global_assets/demo_data/dimple/demo_data.tsv", function (data) {
+
+                // Filter data
+                data = dimple.filterData(data, "Owner", ["Aperture", "Black Mesa"])
+
+
+                // Create chart
+                // ------------------------------
+
+                // Define chart
+                var myChart = new dimple.chart(svg, data);
+
+                // Set bounds
+                myChart.setBounds(0, 0, "100%", "100%")
+
+                // Set margins
+                myChart.setMargins(70, 25, 20, 45);
+
+
+                // Create axes
+                // ------------------------------
+
+                // Horizontal
+                var x = myChart.addMeasureAxis("x", "Unit Sales");
+
+                // Vertical
+                var y = myChart.addCategoryAxis("y", "Month");
+                    y.addOrderRule("Date");
+
+
+                // Construct layout
+                // ------------------------------
+
+                // Add line
+                var s = myChart
+                    .addSeries("Channel", dimple.plot.line)
+                    .interpolation = "step";
+
+
+                // Add legend
+                // ------------------------------
+
+                var myLegend = myChart.addLegend(0, 5, "100%", 0, "right");
+
+
+                // Add styles
+                // ------------------------------
+
+                // Font size
+                x.fontSize = "12";
+                y.fontSize = "12";
+
+                // Font family
+                x.fontFamily = "Roboto";
+                y.fontFamily = "Roboto";
+
+                // Legend font style
+                myLegend.fontSize = "12";
+                myLegend.fontFamily = "Roboto";
+
+
+                //
+                // Draw chart
+                //
+
+                // Draw
+                myChart.draw();
+
+                // Position legend text
+                myLegend.shapes.selectAll("text").attr("dy", "1");
+
+
+                // Resize chart
+                // ------------------------------
+
+                // Add a method to draw the chart on resize of the window
+                $(window).on('resize', resize);
+                $('.sidebar-control').on('click', resize);
+
+                // Resize function
+                function resize() {
+
+                    // Redraw chart
+                    myChart.draw(0, true);
+
+                    // Position legend text
+                    myLegend.shapes.selectAll("text").attr("dy", "1");
+                }
+            });
+        }
+    };
+
+
+    //
+    // Return objects assigned to module
+    //
+
+    return {
+        init: function() {
+            _stepVerticalMultiple();
+        }
+    }
+}();
+
+
+// Initialize module
+// ------------------------------
+
+document.addEventListener('DOMContentLoaded', function() {
+    DimpleStepVerticalMultiple.init();
+});

assets/global/js/demo_pages/charts/dimple/step/step_vertical_multiple_grouped.js

@@ -0,0 +1,154 @@
+/* ------------------------------------------------------------------------------
+ *
+ *  # Dimple.js - multiple vertical steps
+ *
+ *  Demo of grouped multiple step chart. Data stored in .tsv file format
+ *
+ * ---------------------------------------------------------------------------- */
+
+
+// Setup module
+// ------------------------------
+
+var DimpleStepVerticalMultipleGrouped = function() {
+
+
+    //
+    // Setup module components
+    //
+
+    // Chart
+    var _stepVerticalMultipleGrouped = function() {
+        if (typeof dimple == 'undefined') {
+            console.warn('Warning - dimple.min.js is not loaded.');
+            return;
+        }
+
+        // Main variables
+        var element = document.getElementById('dimple-step-vertical-multiple-grouped');
+
+
+        // Initialize chart only if element exsists in the DOM
+        if(element) {
+
+            // Construct chart
+            var svg = dimple.newSvg(element, "100%", 500);
+
+
+            // Chart setup
+            // ------------------------------
+
+            d3.tsv("../../../../global_assets/demo_data/dimple/demo_data.tsv", function (data) {
+
+                // Filter data
+                data = dimple.filterData(data, "Owner", ["Aperture", "Black Mesa"])
+
+
+                // Create chart
+                // ------------------------------
+
+                // Define chart
+                var myChart = new dimple.chart(svg, data);
+
+                // Set bounds
+                myChart.setBounds(0, 0, "100%", "100%")
+
+                // Set margins
+                myChart.setMargins(70, 10, 100, 45);
+
+
+                // Create axes
+                // ------------------------------
+
+                // Horizontal
+                var x = myChart.addMeasureAxis("x", "Unit Sales");
+
+                // Vertical
+                var y = myChart.addCategoryAxis("y", ["Owner", "Month"]);
+                    y.addGroupOrderRule("Date");
+
+
+                // Construct layout
+                // ------------------------------
+
+                // Add line
+                var s = myChart
+                    .addSeries(["Brand"], dimple.plot.line)
+                    .interpolation = "step";
+
+                // Line space
+                s.barGap = 0.05;
+
+
+                // Add legend
+                // ------------------------------
+
+                var myLegend = myChart.addLegend("100%", 5, 0, "100%", "right");
+
+
+                // Add styles
+                // ------------------------------
+
+                // Font size
+                x.fontSize = "12";
+                y.fontSize = "12";
+
+                // Font family
+                x.fontFamily = "Roboto";
+                y.fontFamily = "Roboto";
+
+                // Legend font style
+                myLegend.fontSize = "12";
+                myLegend.fontFamily = "Roboto";
+
+
+                //
+                // Draw chart
+                //
+
+                // Draw
+                myChart.draw();
+
+                // Position legend text
+                myLegend.shapes.selectAll("text").attr("dy", "1");
+
+
+                // Resize chart
+                // ------------------------------
+
+                // Add a method to draw the chart on resize of the window
+                $(window).on('resize', resize);
+                $('.sidebar-control').on('click', resize);
+
+                // Resize function
+                function resize() {
+
+                    // Redraw chart
+                    myChart.draw(0, true);
+
+                    // Position legend text
+                    myLegend.shapes.selectAll("text").attr("dy", "1");
+                }
+            });
+        }
+    };
+
+
+    //
+    // Return objects assigned to module
+    //
+
+    return {
+        init: function() {
+            _stepVerticalMultipleGrouped();
+        }
+    }
+}();
+
+
+// Initialize module
+// ------------------------------
+
+document.addEventListener('DOMContentLoaded', function() {
+    DimpleStepVerticalMultipleGrouped.init();
+});

assets/global/js/demo_pages/charts/dimple/step/step_vertical_single.js

@@ -0,0 +1,135 @@
+/* ------------------------------------------------------------------------------
+ *
+ *  # Dimple.js - single vertical step
+ *
+ *  Demo of a single step chart. Data stored in .tsv file format
+ *
+ * ---------------------------------------------------------------------------- */
+
+
+// Setup module
+// ------------------------------
+
+var DimpleStepVerticalSingle = function() {
+
+
+    //
+    // Setup module components
+    //
+
+    // Chart
+    var _stepVerticalSingle = function() {
+        if (typeof dimple == 'undefined') {
+            console.warn('Warning - dimple.min.js is not loaded.');
+            return;
+        }
+
+        // Main variables
+        var element = document.getElementById('dimple-step-vertical-single');
+
+
+        // Initialize chart only if element exsists in the DOM
+        if(element) {
+
+            // Construct chart
+            var svg = dimple.newSvg(element, "100%", 500);
+
+
+            // Chart setup
+            // ------------------------------
+
+            d3.tsv("../../../../global_assets/demo_data/dimple/demo_data.tsv", function (data) {
+
+                // Filter data
+                data = dimple.filterData(data, "Owner", ["Aperture", "Black Mesa"])
+
+
+                // Create chart
+                // ------------------------------
+
+                // Define chart
+                var myChart = new dimple.chart(svg, data);
+
+                // Set bounds
+                myChart.setBounds(0, 0, "100%", "100%")
+
+                // Set margins
+                myChart.setMargins(70, 10, 20, 45);
+
+
+                // Create axes
+                // ------------------------------
+
+                // Horizontal
+                var x = myChart.addMeasureAxis("x", "Unit Sales");
+
+                // Vertical
+                var y = myChart.addCategoryAxis("y", "Month");
+                    y.addOrderRule("Date");
+
+
+                // Construct layout
+                // ------------------------------
+
+                // Add line
+                var s = myChart
+                    .addSeries(null, dimple.plot.line)
+                    .interpolation = "step";
+
+
+                // Add styles
+                // ------------------------------
+
+                // Font size
+                x.fontSize = "12";
+                y.fontSize = "12";
+
+                // Font family
+                x.fontFamily = "Roboto";
+                y.fontFamily = "Roboto";
+
+
+                //
+                // Draw chart
+                //
+
+                // Draw
+                myChart.draw();
+
+
+                // Resize chart
+                // ------------------------------
+
+                // Add a method to draw the chart on resize of the window
+                $(window).on('resize', resize);
+                $('.sidebar-control').on('click', resize);
+
+                // Resize function
+                function resize() {
+
+                    // Redraw chart
+                    myChart.draw(0, true);
+                }
+            });
+        }
+    };
+
+
+    //
+    // Return objects assigned to module
+    //
+
+    return {
+        init: function() {
+            _stepVerticalSingle();
+        }
+    }
+}();
+
+
+// Initialize module
+// ------------------------------
+
+document.addEventListener('DOMContentLoaded', function() {
+    DimpleStepVerticalSingle.init();
+});

assets/global/js/demo_pages/charts/dimple/step/step_vertical_single_grouped.js

@@ -0,0 +1,138 @@
+/* ------------------------------------------------------------------------------
+ *
+ *  # Dimple.js - vertical grouped step
+ *
+ *  Demo of a grouped step chart. Data stored in .tsv file format
+ *
+ * ---------------------------------------------------------------------------- */
+
+
+// Setup module
+// ------------------------------
+
+var DimpleStepVerticalSingleGrouped = function() {
+
+
+    //
+    // Setup module components
+    //
+
+    // Chart
+    var _verticalSingleGrouped = function() {
+        if (typeof dimple == 'undefined') {
+            console.warn('Warning - dimple.min.js is not loaded.');
+            return;
+        }
+
+        // Main variables
+        var element = document.getElementById('dimple-step-vertical-single-grouped');
+
+
+        // Initialize chart only if element exsists in the DOM
+        if(element) {
+
+            // Construct chart
+            var svg = dimple.newSvg(element, "100%", 500);
+
+
+            // Chart setup
+            // ------------------------------
+
+            d3.tsv("../../../../global_assets/demo_data/dimple/demo_data.tsv", function (data) {
+
+                // Filter data
+                data = dimple.filterData(data, "Owner", ["Aperture", "Black Mesa"])
+
+
+                // Create chart
+                // ------------------------------
+
+                // Define chart
+                var myChart = new dimple.chart(svg, data);
+
+                // Set bounds
+                myChart.setBounds(0, 0, "100%", "100%")
+
+                // Set margins
+                myChart.setMargins(70, 10, 20, 45);
+
+
+                // Create axes
+                // ------------------------------
+
+                // Horizontal
+                var x = myChart.addMeasureAxis("x", "Unit Sales");
+
+                // Vertical
+                var y = myChart.addCategoryAxis("y", ["Owner", "Month"]);
+                    y.addGroupOrderRule("Date");
+
+
+                // Construct layout
+                // ------------------------------
+
+                // Add lines
+                var s = myChart
+                    .addSeries("Owner", dimple.plot.line)
+                    .interpolation = "step";
+
+                // Line space
+                s.barGap = 0.05;
+
+                
+                // Add styles
+                // ------------------------------
+
+                // Font size
+                x.fontSize = "12";
+                y.fontSize = "12";
+
+                // Font family
+                x.fontFamily = "Roboto";
+                y.fontFamily = "Roboto";
+
+
+                //
+                // Draw chart
+                //
+
+                // Draw
+                myChart.draw();
+
+
+                // Resize chart
+                // ------------------------------
+
+                // Add a method to draw the chart on resize of the window
+                $(window).on('resize', resize);
+                $('.sidebar-control').on('click', resize);
+
+                // Resize function
+                function resize() {
+
+                    // Redraw chart
+                    myChart.draw(0, true);
+                }
+            });
+        }
+    };
+
+
+    //
+    // Return objects assigned to module
+    //
+
+    return {
+        init: function() {
+            _verticalSingleGrouped();
+        }
+    }
+}();
+
+
+// Initialize module
+// ------------------------------
+
+document.addEventListener('DOMContentLoaded', function() {
+    DimpleStepVerticalSingleGrouped.init();
+});