first commit

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

@@ -0,0 +1,100 @@
+/* ------------------------------------------------------------------------------
+ *
+ *  # Dimple.js - horizontal area
+ *
+ *  Demo of area chart. Data stored in .tsv file format
+ *
+ *  Version: 1.0
+ *  Latest update: August 1, 2015
+ *
+ * ---------------------------------------------------------------------------- */
+
+$(function () {
+
+    // Construct chart
+    var svg = dimple.newSvg("#dimple-area-horizontal", "100%", 500);
+
+
+    // Chart setup
+    // ------------------------------
+
+    d3.tsv("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();
+        }
+    });
+});

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

@@ -0,0 +1,100 @@
+/* ------------------------------------------------------------------------------
+ *
+ *  # Dimple.js - horizontal grouped area
+ *
+ *  Demo of grouped area chart. Data stored in .tsv file format
+ *
+ *  Version: 1.0
+ *  Latest update: August 1, 2015
+ *
+ * ---------------------------------------------------------------------------- */
+
+$(function () {
+
+    // Construct chart
+    var svg = dimple.newSvg("#dimple-area-horizontal-grouped", "100%", 500);
+
+
+    // Chart setup
+    // ------------------------------
+
+    d3.tsv("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);
+        }
+    });
+});

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

@@ -0,0 +1,116 @@
+/* ------------------------------------------------------------------------------
+ *
+ *  # Dimple.js - horizontal stacked area
+ *
+ *  Demo of stacked area chart. Data stored in .tsv file format
+ *
+ *  Version: 1.0
+ *  Latest update: August 1, 2015
+ *
+ * ---------------------------------------------------------------------------- */
+
+$(function () {
+
+    // Construct chart
+    var svg = dimple.newSvg("#dimple-area-horizontal-stacked", "100%", 500);
+
+
+    // Chart setup
+    // ------------------------------
+
+    d3.tsv("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();
+        }
+    });
+});

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

@@ -0,0 +1,116 @@
+/* ------------------------------------------------------------------------------
+ *
+ *  # Dimple.js - horizontal grouped stacked area
+ *
+ *  Demo of grouped stacked area chart. Data stored in .tsv file format
+ *
+ *  Version: 1.0
+ *  Latest update: August 1, 2015
+ *
+ * ---------------------------------------------------------------------------- */
+
+$(function () {
+
+    // Construct chart
+    var svg = dimple.newSvg("#dimple-area-horizontal-stacked-grouped", "100%", 500);
+
+
+    // Chart setup
+    // ------------------------------
+
+    d3.tsv("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");
+        }
+    });
+});

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

@@ -0,0 +1,116 @@
+/* ------------------------------------------------------------------------------
+ *
+ *  # Dimple.js - horizontal normalized stacked area
+ *
+ *  Demo of normalized stacked area chart. Data stored in .tsv file format
+ *
+ *  Version: 1.0
+ *  Latest update: August 1, 2015
+ *
+ * ---------------------------------------------------------------------------- */
+
+$(function () {
+
+    // Construct chart
+    var svg = dimple.newSvg("#dimple-area-horizontal-stacked-normalized", "100%", 500);
+
+
+    // Chart setup
+    // ------------------------------
+
+    d3.tsv("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();
+        }
+    });
+});

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

@@ -0,0 +1,91 @@
+/* ------------------------------------------------------------------------------
+ *
+ *  # Dimple.js - vertical area
+ *
+ *  Demo of area chart. Data stored in .tsv file format
+ *
+ *  Version: 1.0
+ *  Latest update: August 1, 2015
+ *
+ * ---------------------------------------------------------------------------- */
+
+$(function () {
+
+    // Construct chart
+    var svg = dimple.newSvg("#dimple-area-vertical", "100%", 500);
+
+
+    d3.tsv("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);
+        }
+    });
+});

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

@@ -0,0 +1,100 @@
+/* ------------------------------------------------------------------------------
+ *
+ *  # Dimple.js - vertical grouped area
+ *
+ *  Demo of grouped area chart. Data stored in .tsv file format
+ *
+ *  Version: 1.0
+ *  Latest update: August 1, 2015
+ *
+ * ---------------------------------------------------------------------------- */
+
+$(function () {
+
+    // Construct chart
+    var svg = dimple.newSvg("#dimple-area-vertical-grouped", "100%", 500);
+
+
+    // Chart setup
+    // ------------------------------
+
+    d3.tsv("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);
+        }
+    });
+});

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

@@ -0,0 +1,110 @@
+/* ------------------------------------------------------------------------------
+ *
+ *  # Dimple.js - vertical stacked area
+ *
+ *  Demo of stacked area chart. Data stored in .tsv file format
+ *
+ *  Version: 1.0
+ *  Latest update: August 1, 2015
+ *
+ * ---------------------------------------------------------------------------- */
+
+$(function () {
+
+    // Construct chart
+    var svg = dimple.newSvg("#dimple-area-vertical-stacked", "100%", 500);
+
+
+    // Chart setup
+    // ------------------------------
+
+    d3.tsv("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");
+        }
+    });
+});

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

@@ -0,0 +1,114 @@
+/* ------------------------------------------------------------------------------
+ *
+ *  # Dimple.js - vertical grouped stacked area
+ *
+ *  Demo of grouped stacked area chart. Data stored in .tsv file format
+ *
+ *  Version: 1.0
+ *  Latest update: August 1, 2015
+ *
+ * ---------------------------------------------------------------------------- */
+
+$(function () {
+
+    // Construct chart
+    var svg = dimple.newSvg("#dimple-area-vertical-stacked-grouped", "100%", 500);
+
+
+    // Chart setup
+    // ------------------------------
+
+    d3.tsv("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");
+        }
+    });
+});

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

@@ -0,0 +1,110 @@
+/* ------------------------------------------------------------------------------
+ *
+ *  # Dimple.js - vertical normalized stacked area
+ *
+ *  Demo of normalized stacked area chart. Data stored in .tsv file format
+ *
+ *  Version: 1.0
+ *  Latest update: August 1, 2015
+ *
+ * ---------------------------------------------------------------------------- */
+
+$(function () {
+
+    // Construct chart
+    var svg = dimple.newSvg("#dimple-area-vertical-stacked-normalized", "100%", 500);
+
+
+    // Chart setup
+    // ------------------------------
+
+    d3.tsv("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");
+        }
+    });
+});

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

@@ -0,0 +1,96 @@
+/* ------------------------------------------------------------------------------
+ *
+ *  # Dimple.js - horizontal bars
+ *
+ *  Demo of bar chart. Data stored in .tsv file format
+ *
+ *  Version: 1.0
+ *  Latest update: August 1, 2015
+ *
+ * ---------------------------------------------------------------------------- */
+
+$(function () {
+
+    // Construct chart
+    var svg = dimple.newSvg("#dimple-bar-horizontal", "100%", 500);
+
+
+    // Chart setup
+    // ------------------------------
+
+    d3.tsv("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();
+        }
+    });
+
+});

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

@@ -0,0 +1,104 @@
+/* ------------------------------------------------------------------------------
+ *
+ *  # Dimple.js - horizontal grouped bars
+ *
+ *  Demo of grouped bar chart. Data stored in .tsv file format
+ *
+ *  Version: 1.0
+ *  Latest update: August 1, 2015
+ *
+ * ---------------------------------------------------------------------------- */
+
+$(function () {
+
+    // Construct chart
+    var svg = dimple.newSvg("#dimple-bar-horizontal-grouped", "100%", 500);
+
+
+    // Chart setup
+    // ------------------------------
+
+    d3.tsv("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");
+        }
+    });
+});

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

@@ -0,0 +1,112 @@
+/* ------------------------------------------------------------------------------
+ *
+ *  # Dimple.js - horizontal stacked bars
+ *
+ *  Demo of stacked bar chart. Data stored in .tsv file format
+ *
+ *  Version: 1.0
+ *  Latest update: August 1, 2015
+ *
+ * ---------------------------------------------------------------------------- */
+
+$(function () {
+
+    // Construct chart
+    var svg = dimple.newSvg("#dimple-bar-horizontal-stacked", "100%", 500);
+
+
+    // Chart setup
+    // ------------------------------
+
+    d3.tsv("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");
+        }
+    });
+
+});

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

@@ -0,0 +1,104 @@
+/* ------------------------------------------------------------------------------
+ *
+ *  # Dimple.js - horizontal grouped stacked bars
+ *
+ *  Demo of grouped stacked bar chart. Data stored in .tsv file format
+ *
+ *  Version: 1.0
+ *  Latest update: August 1, 2015
+ *
+ * ---------------------------------------------------------------------------- */
+
+$(function () {
+
+    // Construct chart
+    var svg = dimple.newSvg("#dimple-bar-horizontal-stacked-grouped", "100%", 500);
+
+
+    // Chart setup
+    // ------------------------------
+
+    d3.tsv("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");
+        }
+    });
+});

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

@@ -0,0 +1,112 @@
+/* ------------------------------------------------------------------------------
+ *
+ *  # Dimple.js - horizontal normalized stacked bars
+ *
+ *  Demo of normalized stacked bar chart. Data stored in .tsv file format
+ *
+ *  Version: 1.0
+ *  Latest update: August 1, 2015
+ *
+ * ---------------------------------------------------------------------------- */
+
+$(function () {
+
+    // Construct chart
+    var svg = dimple.newSvg("#dimple-bar-horizontal-stacked-normalized", "100%", 500);
+
+
+    // Chart setup
+    // ------------------------------
+
+    d3.tsv("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");
+        }
+    });
+
+});

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

@@ -0,0 +1,96 @@
+/* ------------------------------------------------------------------------------
+ *
+ *  # Dimple.js - vertical bars
+ *
+ *  Demo of bar chart. Data stored in .tsv file format
+ *
+ *  Version: 1.0
+ *  Latest update: August 1, 2015
+ *
+ * ---------------------------------------------------------------------------- */
+
+$(function () {
+
+    // Construct chart
+    var svg = dimple.newSvg("#dimple-bar-vertical", "100%", 500);
+
+
+    // Chart setup
+    // ------------------------------
+
+    d3.tsv("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();
+        }
+    });
+
+});

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

@@ -0,0 +1,105 @@
+/* ------------------------------------------------------------------------------
+ *
+ *  # Dimple.js - vertical grouped bars
+ *
+ *  Demo of grouped bar chart. Data stored in .tsv file format
+ *
+ *  Version: 1.0
+ *  Latest update: August 1, 2015
+ *
+ * ---------------------------------------------------------------------------- */
+
+$(function () {
+
+    // Construct chart
+    var svg = dimple.newSvg("#dimple-bar-vertical-grouped", "100%", 500);
+
+
+    // Chart setup
+    // ------------------------------
+
+    d3.tsv("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");
+        }
+    });
+
+});

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

@@ -0,0 +1,112 @@
+/* ------------------------------------------------------------------------------
+ *
+ *  # Dimple.js - vertical stacked bars
+ *
+ *  Demo of stacked bar chart. Data stored in .tsv file format
+ *
+ *  Version: 1.0
+ *  Latest update: August 1, 2015
+ *
+ * ---------------------------------------------------------------------------- */
+
+$(function () {
+
+    // Construct chart
+    var svg = dimple.newSvg("#dimple-bar-vertical-stacked", "100%", 500);
+
+
+    // Chart setup
+    // ------------------------------
+
+    d3.tsv("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");
+        }
+    });
+
+});

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

@@ -0,0 +1,105 @@
+/* ------------------------------------------------------------------------------
+ *
+ *  # Dimple.js - vertical grouped stacked bars
+ *
+ *  Demo of grouped stacked bar chart. Data stored in .tsv file format
+ *
+ *  Version: 1.0
+ *  Latest update: August 1, 2015
+ *
+ * ---------------------------------------------------------------------------- */
+
+$(function () {
+
+    // Construct chart
+    var svg = dimple.newSvg("#dimple-bar-vertical-stacked-grouped", "100%", 500);
+
+
+    // Chart setup
+    // ------------------------------
+
+    d3.tsv("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");
+        }
+    });
+
+});

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

@@ -0,0 +1,112 @@
+/* ------------------------------------------------------------------------------
+ *
+ *  # Dimple.js - vertical normalized stacked bars
+ *
+ *  Demo of normalized stacked bar chart. Data stored in .tsv file format
+ *
+ *  Version: 1.0
+ *  Latest update: August 1, 2015
+ *
+ * ---------------------------------------------------------------------------- */
+
+$(function () {
+
+    // Construct chart
+    var svg = dimple.newSvg("#dimple-bar-vertical-stacked-normalized", "100%", 500);
+
+
+    // Chart setup
+    // ------------------------------
+
+    d3.tsv("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");
+        }
+    });
+
+});

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

@@ -0,0 +1,107 @@
+/* ------------------------------------------------------------------------------
+ *
+ *  # Dimple.js - basic bubbles
+ *
+ *  Demo of bubble chart with legend. Data stored in .tsv file format
+ *
+ *  Version: 1.0
+ *  Latest update: August 1, 2015
+ *
+ * ---------------------------------------------------------------------------- */
+
+$(function () {
+
+    // Construct chart
+    var svg = dimple.newSvg("#dimple-bubble-basic", "100%", 500);
+
+
+    d3.tsv("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");
+        }
+    });
+});

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

@@ -0,0 +1,116 @@
+/* ------------------------------------------------------------------------------
+ *
+ *  # Dimple.js - horizontal lollipop
+ *
+ *  Demo of horizontal lollipop chart. Data stored in .tsv file format
+ *
+ *  Version: 1.0
+ *  Latest update: August 1, 2015
+ *
+ * ---------------------------------------------------------------------------- */
+
+$(function () {
+
+    // Construct chart
+    var svg = dimple.newSvg("#dimple-bubble-lollipop-horizontal", "100%", 500);
+
+
+    d3.tsv("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");
+        }
+    });
+});

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

@@ -0,0 +1,104 @@
+/* ------------------------------------------------------------------------------
+ *
+ *  # Dimple.js - grouped lollipop
+ *
+ *  Demo of grouped lollipop chart. Data stored in .tsv file format
+ *
+ *  Version: 1.0
+ *  Latest update: August 1, 2015
+ *
+ * ---------------------------------------------------------------------------- */
+
+$(function () {
+
+    // Construct chart
+    var svg = dimple.newSvg("#dimple-bubble-lollipop-grouped", "100%", 500);
+
+
+    d3.tsv("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");
+        }
+    });
+});

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

@@ -0,0 +1,110 @@
+/* ------------------------------------------------------------------------------
+ *
+ *  # Dimple.js - bubble matrix
+ *
+ *  Demo of bubble matrix. Data stored in .tsv file format
+ *
+ *  Version: 1.0
+ *  Latest update: August 1, 2015
+ *
+ * ---------------------------------------------------------------------------- */
+
+$(function () {
+
+    // Construct chart
+    var svg = dimple.newSvg("#dimple-bubble-matrix", "100%", 500);
+
+
+    d3.tsv("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");
+        }
+    });
+});

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

@@ -0,0 +1,111 @@
+/* ------------------------------------------------------------------------------
+ *
+ *  # Dimple.js - vertical lollipop
+ *
+ *  Demo of vertical lollipop chart. Data stored in .tsv file format
+ *
+ *  Version: 1.0
+ *  Latest update: August 1, 2015
+ *
+ * ---------------------------------------------------------------------------- */
+
+$(function () {
+
+    // Construct chart
+    var svg = dimple.newSvg("#dimple-bubble-lollipop-vertical", "100%", 500);
+
+
+    d3.tsv("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");
+        }
+    });
+});

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

@@ -0,0 +1,121 @@
+/* ------------------------------------------------------------------------------
+ *
+ *  # Dimple.js - multiple horizontal lines
+ *
+ *  Demo of multiple line chart. Data stored in .tsv file format
+ *
+ *  Version: 1.0
+ *  Latest update: August 1, 2015
+ *
+ * ---------------------------------------------------------------------------- */
+
+$(function () {
+
+    // Construct chart
+    var svg = dimple.newSvg("#dimple-line-horizontal-multiple", "100%", 500);
+
+
+    // Chart setup
+    // ------------------------------
+
+    d3.tsv("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)
+        }
+    });
+});

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

@@ -0,0 +1,124 @@
+/* ------------------------------------------------------------------------------
+ *
+ *  # Dimple.js - multiple horizontal lines
+ *
+ *  Demo of grouped multiple line chart. Data stored in .tsv file format
+ *
+ *  Version: 1.0
+ *  Latest update: August 1, 2015
+ *
+ * ---------------------------------------------------------------------------- */
+
+$(function () {
+
+    // Construct chart
+    var svg = dimple.newSvg("#dimple-line-horizontal-multiple-grouped", "100%", 500);
+
+
+    // Chart setup
+    // ------------------------------
+
+    d3.tsv("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)
+        }
+    });
+});

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

@@ -0,0 +1,104 @@
+/* ------------------------------------------------------------------------------
+ *
+ *  # Dimple.js - single horizontal line
+ *
+ *  Demo of a single line chart. Data stored in .tsv file format
+ *
+ *  Version: 1.0
+ *  Latest update: August 1, 2015
+ *
+ * ---------------------------------------------------------------------------- */
+
+$(function () {
+
+    // Construct chart
+    var svg = dimple.newSvg("#dimple-line-horizontal-single", "100%", 500);
+
+
+    // Chart setup
+    // ------------------------------
+
+    d3.tsv("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)
+        }
+    });
+});

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

@@ -0,0 +1,107 @@
+/* ------------------------------------------------------------------------------
+ *
+ *  # Dimple.js - single horizontal grouped line
+ *
+ *  Demo of a grouped line chart. Data stored in .tsv file format
+ *
+ *  Version: 1.0
+ *  Latest update: August 1, 2015
+ *
+ * ---------------------------------------------------------------------------- */
+
+$(function () {
+
+    // Construct chart
+    var svg = dimple.newSvg("#dimple-line-horizontal-single-grouped", "100%", 500);
+
+
+    // Chart setup
+    // ------------------------------
+
+    d3.tsv("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)
+        }
+    });
+});

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

@@ -0,0 +1,121 @@
+/* ------------------------------------------------------------------------------
+ *
+ *  # Dimple.js - multiple vertical lines
+ *
+ *  Demo of multiple line chart. Data stored in .tsv file format
+ *
+ *  Version: 1.0
+ *  Latest update: August 1, 2015
+ *
+ * ---------------------------------------------------------------------------- */
+
+$(function () {
+
+    // Construct chart
+    var svg = dimple.newSvg("#dimple-line-vertical-multiple", "100%", 500);
+
+
+    // Chart setup
+    // ------------------------------
+
+    d3.tsv("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)
+        }
+    });
+
+});

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

@@ -0,0 +1,124 @@
+/* ------------------------------------------------------------------------------
+ *
+ *  # Dimple.js - grouped multiple vertical lines
+ *
+ *  Demo of grouped multiple line chart. Data stored in .tsv file format
+ *
+ *  Version: 1.0
+ *  Latest update: August 1, 2015
+ *
+ * ---------------------------------------------------------------------------- */
+
+$(function () {
+
+    // Construct chart
+    var svg = dimple.newSvg("#dimple-line-vertical-multiple-grouped", "100%", 500);
+
+
+    // Chart setup
+    // ------------------------------
+
+    d3.tsv("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)
+        }
+    });
+});

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

@@ -0,0 +1,105 @@
+/* ------------------------------------------------------------------------------
+ *
+ *  # Dimple.js - vertical line
+ *
+ *  Demo of a single line chart. Data stored in .tsv file format
+ *
+ *  Version: 1.0
+ *  Latest update: August 1, 2015
+ *
+ * ---------------------------------------------------------------------------- */
+
+$(function () {
+
+    // Construct chart
+    var svg = dimple.newSvg("#dimple-line-vertical-single", "100%", 500);
+
+
+    // Chart setup
+    // ------------------------------
+
+    d3.tsv("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)
+        }
+    });
+
+});

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

@@ -0,0 +1,107 @@
+/* ------------------------------------------------------------------------------
+ *
+ *  # Dimple.js - vertical grouped line
+ *
+ *  Demo of a grouped line chart. Data stored in .tsv file format
+ *
+ *  Version: 1.0
+ *  Latest update: August 1, 2015
+ *
+ * ---------------------------------------------------------------------------- */
+
+$(function () {
+
+    // Construct chart
+    var svg = dimple.newSvg("#dimple-line-vertical-single-grouped", "100%", 500);
+
+
+    // Chart setup
+    // ------------------------------
+
+    d3.tsv("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)
+        }
+    });
+});

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

@@ -0,0 +1,67 @@
+/* ------------------------------------------------------------------------------
+ *
+ *  # Dimple.js - basic pie
+ *
+ *  Demo of pie chart. Data stored in .tsv file format
+ *
+ *  Version: 1.0
+ *  Latest update: August 1, 2015
+ *
+ * ---------------------------------------------------------------------------- */
+
+$(function () {
+
+    // Construct chart
+    var svg = dimple.newSvg("#dimple-pie-basic", 420, 300);
+
+
+    // Chart setup
+    // ------------------------------
+
+    d3.tsv("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();
+    });
+});

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

@@ -0,0 +1,111 @@
+/* ------------------------------------------------------------------------------
+ *
+ *  # Dimple.js - bubbles with pie
+ *
+ *  Demo of bubble chart with pies. Data stored in .tsv file format
+ *
+ *  Version: 1.0
+ *  Latest update: August 1, 2015
+ *
+ * ---------------------------------------------------------------------------- */
+
+$(function () {
+
+    // Construct chart
+	var svg = dimple.newSvg("#dimple-pie-bubble", "100%", 500);
+
+
+    // Chart setup
+    // ------------------------------
+
+	d3.tsv("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");
+        }
+	});
+});

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

@@ -0,0 +1,73 @@
+/* ------------------------------------------------------------------------------
+ *
+ *  # Dimple.js - pie with legend
+ *
+ *  Demo of pie chart with legend. Data stored in .tsv file format
+ *
+ *  Version: 1.0
+ *  Latest update: August 1, 2015
+ *
+ * ---------------------------------------------------------------------------- */
+
+$(function () {
+
+    // Construct chart
+    var svg = dimple.newSvg("#dimple-pie-legend", 420, 300);
+
+
+    // Chart setup
+    // ------------------------------
+
+    d3.tsv("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();
+    });
+});

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

@@ -0,0 +1,117 @@
+/* ------------------------------------------------------------------------------
+ *
+ *  # Dimple.js - lollipops
+ *
+ *  Demo of lollipop chart. Data stored in .tsv file format
+ *
+ *  Version: 1.0
+ *  Latest update: August 1, 2015
+ *
+ * ---------------------------------------------------------------------------- */
+
+$(function () {
+
+    // Construct chart
+	var svg = dimple.newSvg("#dimple-pie-lollipop", "100%", 500);
+
+
+    // Chart setup
+    // ------------------------------
+
+    d3.tsv("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();
+        }
+    });
+});

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

@@ -0,0 +1,114 @@
+/* ------------------------------------------------------------------------------
+ *
+ *  # Dimple.js - pies matrix
+ *
+ *  Demo of matrix of pies. Data stored in .tsv file format
+ *
+ *  Version: 1.0
+ *  Latest update: August 1, 2015
+ *
+ * ---------------------------------------------------------------------------- */
+
+$(function () {
+
+    // Construct chart
+    var svg = dimple.newSvg("#dimple-pie-matrix", "100%", 500);
+
+
+    // Chart setup
+    // ------------------------------
+
+    d3.tsv("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();
+        }
+    });
+});

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

@@ -0,0 +1,107 @@
+/* ------------------------------------------------------------------------------
+ *
+ *  # Dimple.js - pies as scatter
+ *
+ *  Demo of scatter chart with pies. Data stored in .tsv file format
+ *
+ *  Version: 1.0
+ *  Latest update: August 1, 2015
+ *
+ * ---------------------------------------------------------------------------- */
+
+$(function () {
+
+    // Construct chart
+    var svg = dimple.newSvg("#dimple-pie-scatter", "100%", 500);
+
+
+    // Chart setup
+    // ------------------------------
+
+    d3.tsv("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);
+        }
+    });
+});

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

@@ -0,0 +1,76 @@
+/* ------------------------------------------------------------------------------
+ *
+ *  # Dimple.js - basic ring
+ *
+ *  Demo of ring chart. Data stored in .tsv file format
+ *
+ *  Version: 1.0
+ *  Latest update: August 1, 2015
+ *
+ * ---------------------------------------------------------------------------- */
+
+$(function () {
+
+    // Construct chart
+    var svg = dimple.newSvg("#dimple-ring-basic", 420, 300);
+
+
+    // Chart setup
+    // ------------------------------
+
+    d3.tsv("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();
+    });
+});

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

@@ -0,0 +1,114 @@
+/* ------------------------------------------------------------------------------
+ *
+ *  # Dimple.js - bubbles with ring
+ *
+ *  Demo of bubble chart with rings. Data stored in .tsv file format
+ *
+ *  Version: 1.0
+ *  Latest update: August 1, 2015
+ *
+ * ---------------------------------------------------------------------------- */
+
+$(function () {
+
+    // Construct chart
+    var svg = dimple.newSvg("#dimple-ring-bubble", "100%", 500);
+
+
+    // Chart setup
+    // ------------------------------
+
+    d3.tsv("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");
+        }
+    });
+});

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

@@ -0,0 +1,81 @@
+/* ------------------------------------------------------------------------------
+ *
+ *  # Dimple.js - concentric ring
+ *
+ *  Demo of concentric ring chart. Data stored in .tsv file format
+ *
+ *  Version: 1.0
+ *  Latest update: August 1, 2015
+ *
+ * ---------------------------------------------------------------------------- */
+
+$(function () {
+
+    // Construct chart
+    var svg = dimple.newSvg("#dimple-ring-concentric", 420, 300);
+
+
+    // Chart setup
+    // ------------------------------
+
+    d3.tsv("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();
+    });
+});

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

@@ -0,0 +1,114 @@
+/* ------------------------------------------------------------------------------
+ *
+ *  # Dimple.js - lollipops
+ *
+ *  Demo of lollipop chart. Data stored in .tsv file format
+ *
+ *  Version: 1.0
+ *  Latest update: August 1, 2015
+ *
+ * ---------------------------------------------------------------------------- */
+
+$(function () {
+
+    // Construct chart
+    var svg = dimple.newSvg("#dimple-ring-lollipop", "100%", 500);
+
+
+    // Chart setup
+    // ------------------------------
+
+    d3.tsv("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);
+        }
+    });
+});

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

@@ -0,0 +1,111 @@
+/* ------------------------------------------------------------------------------
+ *
+ *  # Dimple.js - rings matrix
+ *
+ *  Demo of matrix of rings. Data stored in .tsv file format
+ *
+ *  Version: 1.0
+ *  Latest update: August 1, 2015
+ *
+ * ---------------------------------------------------------------------------- */
+
+$(function () {
+
+    // Construct chart
+    var svg = dimple.newSvg("#dimple-ring-matrix", "100%", 500);
+
+
+    // Chart setup
+    // ------------------------------
+
+    d3.tsv("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);
+        }
+    });
+});

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

@@ -0,0 +1,110 @@
+/* ------------------------------------------------------------------------------
+ *
+ *  # Dimple.js - rings as scatter
+ *
+ *  Demo of scatter chart with rings. Data stored in .tsv file format
+ *
+ *  Version: 1.0
+ *  Latest update: August 1, 2015
+ *
+ * ---------------------------------------------------------------------------- */
+
+$(function () {
+
+    // Construct chart
+    var svg = dimple.newSvg("#dimple-ring-scatter", "100%", 500);
+
+
+    // Chart setup
+    // ------------------------------
+
+    d3.tsv("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);
+        }
+    });
+});

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

@@ -0,0 +1,107 @@
+/* ------------------------------------------------------------------------------
+ *
+ *  # Dimple.js - basic scatter
+ *
+ *  Demo of scatter chart. Data stored in .tsv file format
+ *
+ *  Version: 1.0
+ *  Latest update: August 1, 2015
+ *
+ * ---------------------------------------------------------------------------- */
+
+$(function () {
+
+    // Construct chart
+    var svg = dimple.newSvg("#dimple-scatter-basic", "100%", 500);
+
+
+    // Chart setup
+    // ------------------------------
+
+    d3.tsv("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");
+        }
+    });
+});

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

@@ -0,0 +1,110 @@
+/* ------------------------------------------------------------------------------
+ *
+ *  # Dimple.js - horizontal lollipop
+ *
+ *  Demo of horizontal lollipop chart. Data stored in .tsv file format
+ *
+ *  Version: 1.0
+ *  Latest update: August 1, 2015
+ *
+ * ---------------------------------------------------------------------------- */
+
+$(function () {
+
+    // Construct chart
+	var svg = dimple.newSvg("#dimple-scatter-lollipop-horizontal", "100%", 500);
+
+
+    // Chart setup
+    // ------------------------------
+
+    d3.tsv("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");
+        }
+    });
+});

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

@@ -0,0 +1,105 @@
+/* ------------------------------------------------------------------------------
+ *
+ *  # Dimple.js - grouped lollipop
+ *
+ *  Demo of grouped lollipop chart. Data stored in .tsv file format
+ *
+ *  Version: 1.0
+ *  Latest update: August 1, 2015
+ *
+ * ---------------------------------------------------------------------------- */
+
+$(function () {
+
+    // Construct chart
+    var svg = dimple.newSvg("#dimple-scatter-lollipop-grouped", "100%", 500);
+
+
+    // Chart setup
+    // ------------------------------
+
+    d3.tsv("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");
+        }
+    });
+});

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

@@ -0,0 +1,108 @@
+/* ------------------------------------------------------------------------------
+ *
+ *  # Dimple.js - scatter matrix
+ *
+ *  Demo of scatter matrix. Data stored in .tsv file format
+ *
+ *  Version: 1.0
+ *  Latest update: August 1, 2015
+ *
+ * ---------------------------------------------------------------------------- */
+
+$(function () {
+
+    // Construct chart
+    var svg = dimple.newSvg("#dimple-scatter-matrix", "100%", 500);
+
+
+    // Chart setup
+    // ------------------------------
+
+    d3.tsv("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");
+        }
+    });
+});

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

@@ -0,0 +1,111 @@
+/* ------------------------------------------------------------------------------
+ *
+ *  # Dimple.js - vertical lollipop
+ *
+ *  Demo of vertical lollipop chart. Data stored in .tsv file format
+ *
+ *  Version: 1.0
+ *  Latest update: August 1, 2015
+ *
+ * ---------------------------------------------------------------------------- */
+
+$(function () {
+
+    // Construct chart
+    var svg = dimple.newSvg("#dimple-scatter-lollipop-vertical", "100%", 500);
+
+
+    // Chart setup
+    // ------------------------------
+
+    d3.tsv("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");
+        }
+    });
+});

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

@@ -0,0 +1,117 @@
+/* ------------------------------------------------------------------------------
+ *
+ *  # Dimple.js - multiple horizontal steps
+ *
+ *  Demo of multiple step chart. Data stored in .tsv file format
+ *
+ *  Version: 1.0
+ *  Latest update: August 1, 2015
+ *
+ * ---------------------------------------------------------------------------- */
+
+$(function () {
+
+    // Construct chart
+    var svg = dimple.newSvg("#dimple-step-horizontal-multiple", "100%", 500);
+
+
+    // Chart setup
+    // ------------------------------
+
+    d3.tsv("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();
+        }
+    });
+
+});

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

@@ -0,0 +1,114 @@
+/* ------------------------------------------------------------------------------
+ *
+ *  # Dimple.js - grouped multiple horizontal steps
+ *
+ *  Demo of multiple grouped step chart. Data stored in .tsv file format
+ *
+ *  Version: 1.0
+ *  Latest update: August 1, 2015
+ *
+ * ---------------------------------------------------------------------------- */
+
+$(function () {
+
+    // Construct chart
+    var svg = dimple.newSvg("#dimple-step-horizontal-multiple-grouped", "100%", 500);
+
+
+    // Chart setup
+    // ------------------------------
+
+    d3.tsv("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");
+        }
+    });
+
+});

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

@@ -0,0 +1,101 @@
+/* ------------------------------------------------------------------------------
+ *
+ *  # Dimple.js - horizontal step
+ *
+ *  Demo of a single step chart. Data stored in .tsv file format
+ *
+ *  Version: 1.0
+ *  Latest update: August 1, 2015
+ *
+ * ---------------------------------------------------------------------------- */
+
+$(function () {
+
+    // Construct chart
+    var svg = dimple.newSvg("#dimple-step-horizontal-single", "100%", 500);
+
+
+    // Chart setup
+    // ------------------------------
+
+    d3.tsv("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();
+        }
+    });
+
+});

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

@@ -0,0 +1,98 @@
+/* ------------------------------------------------------------------------------
+ *
+ *  # Dimple.js - grouped horizontal steps
+ *
+ *  Demo of grouped steps chart. Data stored in .tsv file format
+ *
+ *  Version: 1.0
+ *  Latest update: August 1, 2015
+ *
+ * ---------------------------------------------------------------------------- */
+
+$(function () {
+
+    // Construct chart
+    var svg = dimple.newSvg("#dimple-step-horizontal-single-grouped", "100%", 500);
+
+
+    // Chart setup
+    // ------------------------------
+
+    d3.tsv("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);
+        }
+    });
+
+});

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

@@ -0,0 +1,108 @@
+/* ------------------------------------------------------------------------------
+ *
+ *  # Dimple.js - multiple vertical steps
+ *
+ *  Demo of multiple step chart. Data stored in .tsv file format
+ *
+ *  Version: 1.0
+ *  Latest update: August 1, 2015
+ *
+ * ---------------------------------------------------------------------------- */
+
+$(function () {
+
+    // Construct chart
+    var svg = dimple.newSvg("#dimple-step-vertical-multiple", "100%", 500);
+
+
+    d3.tsv("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");
+        }
+    });
+
+});

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

@@ -0,0 +1,114 @@
+/* ------------------------------------------------------------------------------
+ *
+ *  # Dimple.js - multiple vertical steps
+ *
+ *  Demo of grouped multiple step chart. Data stored in .tsv file format
+ *
+ *  Version: 1.0
+ *  Latest update: August 1, 2015
+ *
+ * ---------------------------------------------------------------------------- */
+
+$(function () {
+
+    // Construct chart
+    var svg = dimple.newSvg("#dimple-step-vertical-multiple-grouped", "100%", 500);
+
+
+    // Chart setup
+    // ------------------------------
+
+    d3.tsv("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");
+        }
+    });
+
+});

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

@@ -0,0 +1,94 @@
+/* ------------------------------------------------------------------------------
+ *
+ *  # Dimple.js - single vertical step
+ *
+ *  Demo of a single step chart. Data stored in .tsv file format
+ *
+ *  Version: 1.0
+ *  Latest update: August 1, 2015
+ *
+ * ---------------------------------------------------------------------------- */
+
+$(function () {
+
+    // Construct chart
+    var svg = dimple.newSvg("#dimple-step-vertical-single", "100%", 500);
+
+
+    // Chart setup
+    // ------------------------------
+
+    d3.tsv("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);
+        }
+    });
+});

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

@@ -0,0 +1,97 @@
+/* ------------------------------------------------------------------------------
+ *
+ *  # Dimple.js - vertical grouped step
+ *
+ *  Demo of a grouped step chart. Data stored in .tsv file format
+ *
+ *  Version: 1.0
+ *  Latest update: August 1, 2015
+ *
+ * ---------------------------------------------------------------------------- */
+
+$(function () {
+
+    // Construct chart
+    var svg = dimple.newSvg("#dimple-step-vertical-single-grouped", "100%", 500);
+
+
+    // Chart setup
+    // ------------------------------
+
+    d3.tsv("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);
+        }
+    });
+});