diff --git a/examples/advanced_lollipop_with_hover.html b/examples/advanced_lollipop_with_hover.html
index 534f86f..dfbd093 100644
--- a/examples/advanced_lollipop_with_hover.html
+++ b/examples/advanced_lollipop_with_hover.html
@@ -14,15 +14,15 @@
       var popup = null;
       
       // Position the main chart
-      myChart.setBounds(60, 30, 490, 290);
+      myChart.setBounds(60, 30, 500, 300);
       
       // Add the main chart axes
       myChart.addCategoryAxis("x", "Brand");
       myChart.addMeasureAxis("y", "Unit Sales");
       myChart.addMeasureAxis("z", "Sales Value");
       
-      // Draw bubbles by SKU
-      var s = myChart.addSeries("SKU", dimple.plot.bubble);
+      // Draw bubbles by SKU colored by brand
+      var s = myChart.addSeries(["SKU", "Brand"], dimple.plot.bubble);
       
       // Handle the hover event - overriding the default behaviour
       s.addEventHandler("mouseover", onHover);
@@ -45,8 +45,12 @@
         // Set the size and position of the popup
         var width = 150,
             height = 100,
-            x = (cx + r + width + 10 < svg.attr("width") ? cx + r + 10 : cx - r - width - 20);
-            y = (cy - height / 2 < 0 ? 15 : cy - height / 2);
+            x = (cx + r + width + 10 < svg.attr("width") ?
+                  cx + r + 10 :
+                  cx - r - width - 20);
+            y = (cy - height / 2 < 0 ?
+                  15 :
+                  cy - height / 2);
                 
         // Fade the popup fill mixing the shape fill with 80% white
         var popupFillColor = d3.rgb(
@@ -76,7 +80,7 @@
           .append("text")
           .attr("x", x + 10)
           .attr("y", y + 10)
-          .text(e.seriesValue)
+          .text(e.seriesValue[0])
           .style("font-family", "sans-serif")
           .style("font-size", 10)
           .style("fill", stroke);
diff --git a/examples/advanced_pong.html b/examples/advanced_pong.html
new file mode 100644
index 0000000..b334b5e
--- /dev/null
+++ b/examples/advanced_pong.html
@@ -0,0 +1,71 @@
+<div id="chartContainer">
+  <script src="http://d3js.org/d3.v3.min.js"></script>
+  <script src="/dist/dimple.v1.min.js"></script>
+  <script type="text/javascript">
+    var svg = dimple.newSvg("#chartContainer", 590, 400);
+    var data = [
+      { "F":0, "Seg":"G", "BarX":"L", "BarY":60, "BubX":16, "BubY":70 },
+      { "F":0, "Seg":"P", "BarX":"L", "BarY":20, "BubX":0, "BubY":0 },
+      { "F":0, "Seg":"G", "BarX":"R", "BarY":30, "BubX":0, "BubY":0 },
+      { "F":0, "Seg":"P", "BarX":"R", "BarY":20, "BubX":0, "BubY":0 },
+      { "F":1, "Seg":"G", "BarX":"L", "BarY":40, "BubX":44, "BubY":70 },
+      { "F":1, "Seg":"P", "BarX":"L", "BarY":20, "BubX":0, "BubY":0 },
+      { "F":1, "Seg":"G", "BarX":"R", "BarY":60, "BubX":0, "BubY":0 },
+      { "F":1, "Seg":"P", "BarX":"R", "BarY":20, "BubX":0, "BubY":0 },
+      { "F":2, "Seg":"G", "BarX":"L", "BarY":60, "BubX":16, "BubY":70 },
+      { "F":2, "Seg":"P", "BarX":"L", "BarY":20, "BubX":0, "BubY":0 },
+      { "F":2, "Seg":"G", "BarX":"R", "BarY":10, "BubX":0, "BubY":0 },
+      { "F":2, "Seg":"P", "BarX":"R", "BarY":20, "BubX":0, "BubY":0 },
+      { "F":3, "Seg":"G", "BarX":"L", "BarY":30, "BubX":44, "BubY":10 },
+      { "F":3, "Seg":"P", "BarX":"L", "BarY":20, "BubX":0, "BubY":0 },
+      { "F":3, "Seg":"G", "BarX":"R", "BarY":0, "BubX":0, "BubY":0 },
+      { "F":3, "Seg":"P", "BarX":"R", "BarY":20, "BubX":0, "BubY":0 },
+      { "F":4, "Seg":"G", "BarX":"L", "BarY":0, "BubX":16, "BubY":10 },
+      { "F":4, "Seg":"P", "BarX":"L", "BarY":20, "BubX":0, "BubY":0 },
+      { "F":4, "Seg":"G", "BarX":"R", "BarY":30, "BubX":0, "BubY":0 },
+      { "F":4, "Seg":"P", "BarX":"R", "BarY":20, "BubX":0, "BubY":0 },
+      { "F":5, "Seg":"G", "BarX":"L", "BarY":30, "BubX":44, "BubY":50 },
+      { "F":5, "Seg":"P", "BarX":"L", "BarY":20, "BubX":0, "BubY":0 },
+      { "F":5, "Seg":"G", "BarX":"R", "BarY":40, "BubX":0, "BubY":0 },
+      { "F":5, "Seg":"P", "BarX":"R", "BarY":20, "BubX":0, "BubY":0 }
+    ];        
+    
+    // Create the chart
+    var myChart = new dimple.chart(svg, data);
+    myChart.setBounds(20, 20, 550, 300)
+    
+    myChart.assignColor("G", "#FFF", "#FFF", 0);
+    myChart.assignColor("P", "#888", "#888", 1);
+    myChart.assignColor("Ball", "#888", "#888", 1);
+    
+    var barX = myChart.addCategoryAxis("x", "BarX");
+    barX.hidden = true;
+    
+    var barY = myChart.addMeasureAxis("y", "BarY");
+    barY.overrideMax = 100;
+    barY.hidden = true;
+    
+    var bubX = myChart.addMeasureAxis("x", "BubX");
+    bubX.overrideMax = 60;
+    bubX.hidden = true;
+    
+    var bubY = myChart.addMeasureAxis("y", "BubY");
+    bubY.overrideMax = 100;
+    bubY.hidden = true;
+        
+    var paddles = myChart.addSeries("Seg", dimple.plot.bar, [barX, barY]);
+    paddles.barGap = 0.99;
+    
+    var ball = myChart.addSeries("Ball", dimple.plot.bubble, [bubX, bubY]);
+    
+    // Animate the chart for every date value, any dimension can be passed
+    // here and dimple will animate over its values.
+    var sb = myChart.setStoryboard("F");
+    sb.frameDuration = 600;
+        
+    myChart.draw();
+    
+    sb.storyLabel.remove();
+        
+  </script>
+</div>
\ No newline at end of file
diff --git a/examples/advanced_price_range_lollipop.html b/examples/advanced_price_range_lollipop.html
index 5022f7c..a4d3cff 100644
--- a/examples/advanced_price_range_lollipop.html
+++ b/examples/advanced_price_range_lollipop.html
@@ -4,18 +4,38 @@
   <script type="text/javascript">
     var svg = dimple.newSvg("#chartContainer", 590, 400);
       d3.tsv("/data/example_data.tsv", function (data) {
-        data = dimple.filterData(data, "Month", "Dec-12");
+        
+        // Filter the data for a single channel
         data = dimple.filterData(data, "Channel", "Hypermarkets");
+        
+        // Create the chart
         var myChart = new dimple.chart(svg, data);
-        myChart.setBounds(40, 30, 420, 320)
+        myChart.setBounds(60, 30, 500, 300)
+        
+        // Add an x and 2 y-axes.  When using multiple axes it's
+        // important to assign them to variables to pass to the series
         var x = myChart.addCategoryAxis("x", "Brand");
         var y1 = myChart.addMeasureAxis("y", "Price");
         var y2 = myChart.addMeasureAxis("y", "Sales Value");
+        
+        // Color the sales bars to be highly transparent
         myChart.assignColor("Sales", "#222222", "#000000", 0.1);
+        
+        // Add the bars mapped to the second y axis
         myChart.addSeries("Sales", dimple.plot.bar, [x, y2]);
-        myChart.addSeries("Min", dimple.plot.bubble, [x, y1]).aggregate = dimple.aggregateMethod.min;
-        myChart.addSeries("Avg", dimple.plot.bubble, [x, y1]).aggregate = dimple.aggregateMethod.avg;
-        myChart.addSeries("Max", dimple.plot.bubble, [x, y1]).aggregate = dimple.aggregateMethod.max;
+        
+        // Add series for minimum, average and maximum price
+        var min = myChart.addSeries("Min", dimple.plot.bubble, [x, y1]);
+        min.aggregate = dimple.aggregateMethod.min;
+        var avg = myChart.addSeries("Avg", dimple.plot.bubble, [x, y1]);
+        avg.aggregate = dimple.aggregateMethod.avg;
+        var max = myChart.addSeries("Max", dimple.plot.bubble, [x, y1]);
+        max.aggregate = dimple.aggregateMethod.max;
+        
+        // Animate the chart for every date value, any dimension can be passed
+        // here and dimple will animate over its values.
+        myChart.setStoryboard("Date");
+        
         myChart.draw();
       });
   </script>