From: Tanner Linsley <tannerlinsley@gmail.com>
Date: Thu, 24 Sep 2015 08:25:21 +0000 (-0600)
Subject: checkpoint for the morning check
X-Git-Tag: 2.0.0-alpha4~12^2~23
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=ca48caa8b02a017b07e6789574887c75bc8ed846;p=thirdparty%2FChart.js.git

checkpoint for the morning check

made some good progress.  Just need some more eyes on it, cuz I’m
literally typing without my glasses on right now.
---

diff --git a/samples/combo-bar-line.html b/samples/combo-bar-line.html
index cdca070c4..f2e936ab3 100644
--- a/samples/combo-bar-line.html
+++ b/samples/combo-bar-line.html
@@ -13,54 +13,56 @@
     </div>
     <button id="randomizeData">Randomize Data</button>
     <script>
-    var randomScalingFactor = function() {
-        return (Math.random() > 0.5 ? 1.0 : -1.0) * Math.round(Math.random() * 100);
-    };
-    var randomColorFactor = function() {
-        return Math.round(Math.random() * 255);
-    };
+        var randomScalingFactor = function() {
+            return (Math.random() > 0.5 ? 1.0 : -1.0) * Math.round(Math.random() * 100);
+        };
+        var randomColorFactor = function() {
+            return Math.round(Math.random() * 255);
+        };
 
-    var barChartData = {
-        labels: ["January", "February", "March", "April", "May", "June", "July"],
-        datasets: [{
-            label: 'Dataset 1',
-            backgroundColor: "rgba(151,187,205,0.5)",
-            data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()],
-            borderColor: 'white',
-            borderWidth: 2
-        }, {
-            label: 'Dataset 2',
-            backgroundColor: "rgba(151,187,205,0.5)",
-            data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()],
-            borderColor: 'white',
-            borderWidth: 2
-        }, {
-            type: 'line',
-            label: 'Dataset 3',
-            backgroundColor: "rgba(220,220,220,0.5)",
-            data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]
-        }, ]
+        var barChartData = {
+            labels: ["January", "February", "March", "April", "May", "June", "July"],
+            datasets: [{
+                type: 'bar',
+                label: 'Dataset 1',
+                backgroundColor: "rgba(151,187,205,0.5)",
+                data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()],
+                borderColor: 'white',
+                borderWidth: 2
+            }, {
+                type: 'bar',
+                label: 'Dataset 2',
+                backgroundColor: "rgba(151,187,205,0.5)",
+                data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()],
+                borderColor: 'white',
+                borderWidth: 2
+            }, {
+                type: 'line',
+                label: 'Dataset 3',
+                backgroundColor: "rgba(220,220,220,0.5)",
+                data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]
+            }, ]
 
-    };
-    window.onload = function() {
-        var ctx = document.getElementById("canvas").getContext("2d");
-        window.myBar = new Chart(ctx, {
-            type: 'bar',
-            data: barChartData,
-            options: {
-                responsive: true,
-            }
-        });
-    };
+        };
+        window.onload = function() {
+            var ctx = document.getElementById("canvas").getContext("2d");
+            window.myBar = new Chart(ctx, {
+                type: 'bar',
+                data: barChartData,
+                options: {
+                    responsive: true,
+                }
+            });
+        };
 
-    $('#randomizeData').click(function() {
-        $.each(barChartData.datasets, function(i, dataset) {
-            dataset.backgroundColor = 'rgba(' + randomColorFactor() + ',' + randomColorFactor() + ',' + randomColorFactor() + ',.7)';
-            dataset.data = [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()];
+        $('#randomizeData').click(function() {
+            $.each(barChartData.datasets, function(i, dataset) {
+                dataset.backgroundColor = 'rgba(' + randomColorFactor() + ',' + randomColorFactor() + ',' + randomColorFactor() + ',.7)';
+                dataset.data = [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()];
 
+            });
+            window.myBar.update();
         });
-        window.myBar.update();
-    });
     </script>
 </body>
 
diff --git a/samples/line-scale-override.html b/samples/line-scale-override.html
deleted file mode 100644
index 6603b5c04..000000000
--- a/samples/line-scale-override.html
+++ /dev/null
@@ -1,131 +0,0 @@
-<!doctype html>
-<html>
-
-<head>
-    <title>Line Chart with Scale Override</title>
-    <script src="../Chart.js"></script>
-    <script src="../node_modules/jquery/dist/jquery.min.js"></script>
-</head>
-
-<body>
-    <div style="width:50%;">
-        <canvas id="canvas" style="width:100%;height:100%"></canvas>
-    </div>
-    <br>
-    <br>
-    <button id="randomizeData">Randomize Data</button>
-    <button id="addDataset">Add Dataset</button>
-    <button id="removeDataset">Remove Dataset</button>
-    <button id="addData">Add Data</button>
-    <button id="removeData">Remove Data</button>
-    <script>
-    var randomScalingFactor = function() {
-        return Math.round(Math.random() * 100 * (Math.random() > 0.5 ? -1 : 1));
-    };
-    var randomColorFactor = function() {
-        return Math.round(Math.random() * 255);
-    };
-    var randomColor = function(opacity) {
-        return 'rgba(' + randomColorFactor() + ',' + randomColorFactor() + ',' + randomColorFactor() + ',' + (opacity || '.3') + ')';
-    };
-
-    var config = {
-        type: 'line',
-        data: {
-            labels: ["January", "February", "March", "April", "May", "June", "July"],
-            datasets: [{
-                label: "My First dataset",
-                data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()],
-                fill: false,
-            }, {
-                label: "My Second dataset",
-                data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()],
-            }]
-        },
-        options: {
-            responsive: true,
-            scales: {
-                xAxes: [{
-                    display: true
-                }],
-                yAxes: [{
-                    display: true,
-                    override: {
-                        start: -100,
-                        stepWidth: 10,
-                        steps: 20
-                    }
-                }]
-            }
-        }
-    };
-
-    $.each(config.data.datasets, function(i, dataset) {
-        dataset.borderColor = randomColor(0.4);
-        dataset.backgroundColor = randomColor(0.5);
-        dataset.pointBorderColor = randomColor(0.7);
-        dataset.pointBackgroundColor = randomColor(0.5);
-        dataset.pointBorderWidth = 1;
-    });
-
-    console.log(config.data);
-
-    window.onload = function() {
-        var ctx = document.getElementById("canvas").getContext("2d");
-        window.myLine = new Chart(ctx, config);
-    };
-
-    $('#randomizeData').click(function() {
-        $.each(config.data.datasets, function(i, dataset) {
-            dataset.data = dataset.data.map(function() {
-                return randomScalingFactor();
-            });
-
-        });
-
-        window.myLine.update();
-    });
-
-    $('#addDataset').click(function() {
-        var newDataset = {
-            label: 'Dataset ' + config.data.datasets.length,
-            borderColor: randomColor(0.4),
-            backgroundColor: randomColor(0.5),
-            pointBorderColor: randomColor(0.7),
-            pointBackgroundColor: randomColor(0.5),
-            pointBorderWidth: 1,
-            data: [],
-        };
-
-        for (var index = 0; index < config.data.labels.length; ++index) {
-            newDataset.data.push(randomScalingFactor());
-        }
-
-        window.myLine.addDataset(newDataset);
-    });
-
-    $('#addData').click(function() {
-        if (config.data.datasets.length > 0) {
-            config.data.labels.push('dataset #' + config.data.labels.length);
-
-            for (var index = 0; index < config.data.datasets.length; ++index) {
-                window.myLine.addData(randomScalingFactor(), index);
-            }
-        }
-    });
-
-    $('#removeDataset').click(function() {
-        window.myLine.removeDataset(0);
-    });
-
-    $('#removeData').click(function() {
-        config.data.labels.splice(-1, 1); // remove the label first
-
-        config.data.datasets.forEach(function(dataset, datasetIndex) {
-            window.myLine.removeData(datasetIndex, -1);
-        });
-    });
-    </script>
-</body>
-
-</html>
diff --git a/samples/line-x-axis-filter.html b/samples/line-x-axis-filter.html
index 71a1b8844..39a19ea3d 100644
--- a/samples/line-x-axis-filter.html
+++ b/samples/line-x-axis-filter.html
@@ -6,9 +6,9 @@
     <script src="../Chart.js"></script>
     <script src="../node_modules/jquery/dist/jquery.min.js"></script>
     <style>
-    canvas {
-        -webkit-box-shadow: 0 0 20px 0 rgba(0, 0, 0, .5);
-    }
+        canvas {
+            -webkit-box-shadow: 0 0 20px 0 rgba(0, 0, 0, .5);
+        }
     </style>
 </head>
 
@@ -24,114 +24,114 @@
     <button id="addData">Add Data</button>
     <button id="removeData">Remove Data</button>
     <script>
-    var randomScalingFactor = function() {
-        return Math.round(Math.random() * 50 * (Math.random() > 0.5 ? 1 : 1)) + 50;
-    };
-    var randomColorFactor = function() {
-        return Math.round(Math.random() * 255);
-    };
-    var randomColor = function(opacity) {
-        return 'rgba(' + randomColorFactor() + ',' + randomColorFactor() + ',' + randomColorFactor() + ',' + (opacity || '.3') + ')';
-    };
-
-    var config = {
-        type: 'line',
-        data: {
-            labels: ["January", "February", "March", "April", "May", "June", "July"],
-            datasets: [{
-                label: "My First dataset",
-                data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()],
-                fill: false,
-                borderDash: [5, 5],
-            }, {
-                label: "My Second dataset",
-                data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()],
-            }]
-        },
-        options: {
-            responsive: true,
-            scales: {
-                xAxes: [{
-                    display: true,
-                    labels: {
-                        userCallback: function(dataLabel, index) {
-                            return index % 2 === 0 ? dataLabel : null;
-                        }
-                    }
-                }],
-                yAxes: [{
-                    display: true,
-                    beginAtZero: false
+        var randomScalingFactor = function() {
+            return Math.round(Math.random() * 50 * (Math.random() > 0.5 ? 1 : 1)) + 50;
+        };
+        var randomColorFactor = function() {
+            return Math.round(Math.random() * 255);
+        };
+        var randomColor = function(opacity) {
+            return 'rgba(' + randomColorFactor() + ',' + randomColorFactor() + ',' + randomColorFactor() + ',' + (opacity || '.3') + ')';
+        };
+
+        var config = {
+            type: 'line',
+            data: {
+                labels: ["January is a long month", "February", "March", "April", "May", "June", "July"],
+                datasets: [{
+                    label: "My First dataset",
+                    data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()],
+                    fill: false,
+                    borderDash: [5, 5],
+                }, {
+                    label: "My Second dataset",
+                    data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()],
                 }]
+            },
+            options: {
+                responsive: true,
+                scales: {
+                    xAxes: [{
+                        display: true,
+                        ticks: {
+                            callback: function(dataLabel, index) {
+                                return dataLabel;
+                            }
+                        }
+                    }],
+                    yAxes: [{
+                        display: true,
+                        beginAtZero: false
+                    }]
+                }
             }
-        }
-    };
+        };
 
-    $.each(config.data.datasets, function(i, dataset) {
-        dataset.borderColor = randomColor(0.4);
-        dataset.backgroundColor = randomColor(0.5);
-        dataset.pointBorderColor = randomColor(0.7);
-        dataset.pointBackgroundColor = randomColor(0.5);
-        dataset.pointBorderWidth = 1;
-    });
+        $.each(config.data.datasets, function(i, dataset) {
+            dataset.borderColor = randomColor(0.4);
+            dataset.backgroundColor = randomColor(0.5);
+            dataset.pointBorderColor = randomColor(0.7);
+            dataset.pointBackgroundColor = randomColor(0.5);
+            dataset.pointBorderWidth = 1;
+        });
 
-    console.log(config.data);
+        console.log(config.data);
 
-    window.onload = function() {
-        var ctx = document.getElementById("canvas").getContext("2d");
-        window.myLine = new Chart(ctx, config);
-    };
+        window.onload = function() {
+            var ctx = document.getElementById("canvas").getContext("2d");
+            window.myLine = new Chart(ctx, config);
+        };
+
+        $('#randomizeData').click(function() {
+            $.each(config.data.datasets, function(i, dataset) {
+                dataset.data = dataset.data.map(function() {
+                    return randomScalingFactor();
+                });
 
-    $('#randomizeData').click(function() {
-        $.each(config.data.datasets, function(i, dataset) {
-            dataset.data = dataset.data.map(function() {
-                return randomScalingFactor();
             });
 
+            window.myLine.update();
         });
 
-        window.myLine.update();
-    });
-
-    $('#addDataset').click(function() {
-        var newDataset = {
-            label: 'Dataset ' + config.data.datasets.length,
-            borderColor: randomColor(0.4),
-            backgroundColor: randomColor(0.5),
-            pointBorderColor: randomColor(0.7),
-            pointBackgroundColor: randomColor(0.5),
-            pointBorderWidth: 1,
-            data: [],
-        };
-
-        for (var index = 0; index < config.data.labels.length; ++index) {
-            newDataset.data.push(randomScalingFactor());
-        }
+        $('#addDataset').click(function() {
+            var newDataset = {
+                label: 'Dataset ' + config.data.datasets.length,
+                borderColor: randomColor(0.4),
+                backgroundColor: randomColor(0.5),
+                pointBorderColor: randomColor(0.7),
+                pointBackgroundColor: randomColor(0.5),
+                pointBorderWidth: 1,
+                data: [],
+            };
+
+            for (var index = 0; index < config.data.labels.length; ++index) {
+                newDataset.data.push(randomScalingFactor());
+            }
 
-        window.myLine.addDataset(newDataset);
-    });
+            window.myLine.addDataset(newDataset);
+        });
 
-    $('#addData').click(function() {
-        if (config.data.datasets.length > 0) {
-            config.data.labels.push('dataset #' + config.data.labels.length);
+        $('#addData').click(function() {
+            if (config.data.datasets.length > 0) {
+                config.data.labels.push('dataset #' + config.data.labels.length);
 
-            for (var index = 0; index < config.data.datasets.length; ++index) {
-                window.myLine.addData(randomScalingFactor(), index);
+                for (var index = 0; index < config.data.datasets.length; ++index) {
+                    window.myLine.addData(randomScalingFactor(), index);
+                }
             }
-        }
-    });
+        });
 
-    $('#removeDataset').click(function() {
-        window.myLine.removeDataset(0);
-    });
+        $('#removeDataset').click(function() {
+            window.myLine.removeDataset(0);
+        });
 
-    $('#removeData').click(function() {
-        config.data.labels.splice(-1, 1); // remove the label first
+        $('#removeData').click(function() {
+            config.data.labels.splice(-1, 1); // remove the label first
 
-        config.data.datasets.forEach(function(dataset, datasetIndex) {
-            window.myLine.removeData(datasetIndex, -1);
+            config.data.datasets.forEach(function(dataset, datasetIndex) {
+                window.myLine.removeData(datasetIndex, -1);
+            });
         });
-    });
     </script>
 </body>
 
diff --git a/samples/scatter.html b/samples/scatter.html
index fa9f08c0e..57f8e7645 100644
--- a/samples/scatter.html
+++ b/samples/scatter.html
@@ -15,150 +15,153 @@
     </div>
     <button id="randomizeData">Randomize Data</button>
     <script>
-    var randomScalingFactor = function() {
-        return (Math.random() > 0.5 ? 1.0 : -1.0) * Math.round(Math.random() * 100);
-    };
-    var randomColor = function(opacity) {
-        return 'rgba(' + Math.round(Math.random() * 255) + ',' + Math.round(Math.random() * 255) + ',' + Math.round(Math.random() * 255) + ',' + (opacity || '.3') + ')';
-    };
+        var randomScalingFactor = function() {
+            return (Math.random() > 0.5 ? 1.0 : -1.0) * Math.round(Math.random() * 100);
+        };
+        var randomColor = function(opacity) {
+            return 'rgba(' + Math.round(Math.random() * 255) + ',' + Math.round(Math.random() * 255) + ',' + Math.round(Math.random() * 255) + ',' + (opacity || '.3') + ')';
+        };
 
-    var scatterChartData = {
-        datasets: [{
-            label: "My First dataset",
-			data: [{
-				x: randomScalingFactor(),
-				y: randomScalingFactor(),
-			}, {
-				x: randomScalingFactor(),
-				y: randomScalingFactor(),
-			}, {
-				x: randomScalingFactor(),
-				y: randomScalingFactor(),
-			}, {
-				x: randomScalingFactor(),
-				y: randomScalingFactor(),
-			}, {
-				x: randomScalingFactor(),
-				y: randomScalingFactor(),
-			}, {
-				x: randomScalingFactor(),
-				y: randomScalingFactor(),
-			}, {
-				x: randomScalingFactor(),
-				y: randomScalingFactor(),
-			}]
-        }, {
-            label: "My Second dataset",
-            data: [{
-				x: randomScalingFactor(),
-				y: randomScalingFactor(),
-			}, {
-				x: randomScalingFactor(),
-				y: randomScalingFactor(),
-			}, {
-				x: randomScalingFactor(),
-				y: randomScalingFactor(),
-			}, {
-				x: randomScalingFactor(),
-				y: randomScalingFactor(),
-			}, {
-				x: randomScalingFactor(),
-				y: randomScalingFactor(),
-			}, {
-				x: randomScalingFactor(),
-				y: randomScalingFactor(),
-			}, {
-				x: randomScalingFactor(),
-				y: randomScalingFactor(),
-			}]
-        }]
-    };
+        var scatterChartData = {
+            datasets: [{
+                label: "My First dataset",
+                data: [{
+                    x: randomScalingFactor(),
+                    y: randomScalingFactor(),
+                }, {
+                    x: randomScalingFactor(),
+                    y: randomScalingFactor(),
+                }, {
+                    x: randomScalingFactor(),
+                    y: randomScalingFactor(),
+                }, {
+                    x: randomScalingFactor(),
+                    y: randomScalingFactor(),
+                }, {
+                    x: randomScalingFactor(),
+                    y: randomScalingFactor(),
+                }, {
+                    x: randomScalingFactor(),
+                    y: randomScalingFactor(),
+                }, {
+                    x: randomScalingFactor(),
+                    y: randomScalingFactor(),
+                }]
+            }, {
+                label: "My Second dataset",
+                data: [{
+                    x: randomScalingFactor(),
+                    y: randomScalingFactor(),
+                }, {
+                    x: randomScalingFactor(),
+                    y: randomScalingFactor(),
+                }, {
+                    x: randomScalingFactor(),
+                    y: randomScalingFactor(),
+                }, {
+                    x: randomScalingFactor(),
+                    y: randomScalingFactor(),
+                }, {
+                    x: randomScalingFactor(),
+                    y: randomScalingFactor(),
+                }, {
+                    x: randomScalingFactor(),
+                    y: randomScalingFactor(),
+                }, {
+                    x: randomScalingFactor(),
+                    y: randomScalingFactor(),
+                }]
+            }]
+        };
 
-    $.each(scatterChartData.datasets, function(i, dataset) {
-        dataset.borderColor = randomColor(0.4);
-        dataset.backgroundColor = randomColor(0.1);
-        dataset.pointBorderColor = randomColor(0.7);
-        dataset.pointBackgroundColor = randomColor(0.5);
-        dataset.pointBorderWidth = 1;
-    });
+        $.each(scatterChartData.datasets, function(i, dataset) {
+            dataset.borderColor = randomColor(0.4);
+            dataset.backgroundColor = randomColor(0.1);
+            dataset.pointBorderColor = randomColor(0.7);
+            dataset.pointBackgroundColor = randomColor(0.5);
+            dataset.pointBorderWidth = 1;
+        });
 
-    console.log(scatterChartData);
+        console.log(scatterChartData);
 
-    window.onload = function() {
-        var ctx = document.getElementById("canvas").getContext("2d");
-        window.myScatter = Chart.Scatter(ctx, {
-        	data: scatterChartData,
-        	options: {
-	            scales: {
-	            	xAxes: [{
-	            		position: 'top',
-	            		gridLines: {
-	            			zeroLineColor: "rgba(0,255,0,1)"
-	            		},
-	            		scaleLabel: {
-	            			show: true,
-	            			labelString: 'x axis'
-	            		}
-	            	}],
-	            	yAxes: [{
-	            		position: 'right',
-	            		scaleLabel: {
-	            			show: true,
-	            			labelString: 'y axis'
-	            		}
-	            	}]
-	            }
-            }
-        });
-    };
+        window.onload = function() {
+            var ctx = document.getElementById("canvas").getContext("2d");
+            window.myScatter = Chart.Scatter(ctx, {
+                data: scatterChartData,
+                options: {
+                    scales: {
+                        xAxes: [{
+                            position: 'top',
+                            gridLines: {
+                                zeroLineColor: "rgba(0,255,0,1)"
+                            },
+                            scaleLabel: {
+                                show: true,
+                                labelString: 'x axis'
+                            }
+                        }],
+                        yAxes: [{
+                            position: 'right',
+                            gridLines: {
+                                zeroLineColor: "rgba(0,255,0,1)"
+                            },
+                            scaleLabel: {
+                                show: true,
+                                labelString: 'y axis'
+                            }
+                        }]
+                    }
+                }
+            });
+        };
 
-    $('#randomizeData').click(function() {
-        scatterChartData.datasets[0].data = [{
-			x: randomScalingFactor(),
-			y: randomScalingFactor(),
-		}, {
-			x: randomScalingFactor(),
-			y: randomScalingFactor(),
-		}, {
-			x: randomScalingFactor(),
-			y: randomScalingFactor(),
-		}, {
-			x: randomScalingFactor(),
-			y: randomScalingFactor(),
-		}, {
-			x: randomScalingFactor(),
-			y: randomScalingFactor(),
-		}, {
-			x: randomScalingFactor(),
-			y: randomScalingFactor(),
-		}, {
-			x: randomScalingFactor(),
-			y: randomScalingFactor(),
-		}];
-        scatterChartData.datasets[1].data = [{
-			x: randomScalingFactor(),
-			y: randomScalingFactor(),
-		}, {
-			x: randomScalingFactor(),
-			y: randomScalingFactor(),
-		}, {
-			x: randomScalingFactor(),
-			y: randomScalingFactor(),
-		}, {
-			x: randomScalingFactor(),
-			y: randomScalingFactor(),
-		}, {
-			x: randomScalingFactor(),
-			y: randomScalingFactor(),
-		}, {
-			x: randomScalingFactor(),
-			y: randomScalingFactor(),
-		}, {
-			x: randomScalingFactor(),
-			y: randomScalingFactor(),
-		}]
-        window.myScatter.update();
-    });
+        $('#randomizeData').click(function() {
+            scatterChartData.datasets[0].data = [{
+                x: randomScalingFactor(),
+                y: randomScalingFactor(),
+            }, {
+                x: randomScalingFactor(),
+                y: randomScalingFactor(),
+            }, {
+                x: randomScalingFactor(),
+                y: randomScalingFactor(),
+            }, {
+                x: randomScalingFactor(),
+                y: randomScalingFactor(),
+            }, {
+                x: randomScalingFactor(),
+                y: randomScalingFactor(),
+            }, {
+                x: randomScalingFactor(),
+                y: randomScalingFactor(),
+            }, {
+                x: randomScalingFactor(),
+                y: randomScalingFactor(),
+            }];
+            scatterChartData.datasets[1].data = [{
+                x: randomScalingFactor(),
+                y: randomScalingFactor(),
+            }, {
+                x: randomScalingFactor(),
+                y: randomScalingFactor(),
+            }, {
+                x: randomScalingFactor(),
+                y: randomScalingFactor(),
+            }, {
+                x: randomScalingFactor(),
+                y: randomScalingFactor(),
+            }, {
+                x: randomScalingFactor(),
+                y: randomScalingFactor(),
+            }, {
+                x: randomScalingFactor(),
+                y: randomScalingFactor(),
+            }, {
+                x: randomScalingFactor(),
+                y: randomScalingFactor(),
+            }]
+            window.myScatter.update();
+        });
     </script>
 </body>
 
diff --git a/src/controllers/controller.bar.js b/src/controllers/controller.bar.js
index c9b80ddd4..bd2d5f0ee 100644
--- a/src/controllers/controller.bar.js
+++ b/src/controllers/controller.bar.js
@@ -16,8 +16,8 @@
 				type: "category",
 
 				// Specific to Bar Controller
-				categoryPercentage: 0.75,
-				barPercentage: 0.5,
+				categoryPercentage: 0.8,
+				barPercentage: 0.9,
 
 				// grid line settings
 				gridLines: {
@@ -160,8 +160,8 @@
 
 				// Desired view properties
 				_model: {
-					x: this.calculateBarX(this.index, index),
-					y: reset ? yScalePoint : this.calculateBarY(this.index, index),
+					x: this.calculateBarX(index, this.index),
+					y: reset ? yScalePoint : this.calculateBarY(index, this.index),
 
 					// Tooltip
 					label: this.chart.data.labels[index],
@@ -209,8 +209,8 @@
 			base = yScale.getPixelForValue(yScale.min);
 
 			if (yScale.beginAtZero || ((yScale.min <= 0 && yScale.max >= 0) || (yScale.min >= 0 && yScale.max <= 0))) {
-				base = yScale.getPixelForValue(0);
-				base += yScale.options.gridLines.lineWidth;
+				base = yScale.getPixelForValue(0, 0);
+				//base += yScale.options.gridLines.lineWidth;
 			} else if (yScale.min < 0 && yScale.max < 0) {
 				// All values are negative. Use the top as the base
 				base = yScale.getPixelForValue(yScale.max);
@@ -225,9 +225,10 @@
 			var xScale = this.getScaleForID(this.getDataset().xAxisID);
 			var yScale = this.getScaleForID(this.getDataset().yAxisID);
 
-			var datasetCount = this.chart.data.datasets.length;
-			var tickWidth = xScale.getSmallestDataDistance();
-			console.log(tickWidth);
+			var datasetCount = !this.chart.isCombo ? this.chart.data.datasets.length : helpers.where(this.chart.data.datasets, function(ds) {
+				return ds.type == 'bar';
+			}).length;
+			var tickWidth = xScale.getPixelForValue(null, 1) - xScale.getPixelForValue(null, 0);
 			var categoryWidth = tickWidth * xScale.options.categoryPercentage;
 			var categorySpacing = (tickWidth - (tickWidth * xScale.options.categoryPercentage)) / 2;
 			var fullBarWidth = categoryWidth / datasetCount;
@@ -259,16 +260,16 @@
 		},
 
 
-		calculateBarX: function(datasetIndex, elementIndex) {
+		calculateBarX: function(index, datasetIndex) {
 
 			var yScale = this.getScaleForID(this.getDataset().yAxisID);
 			var xScale = this.getScaleForID(this.getDataset().xAxisID);
 
-			var leftTick = xScale.getPixelFromTickIndex(elementIndex);
+			var leftTick = xScale.getPixelForValue(null, index);
 			var ruler = this.getRuler();
 
 			if (yScale.options.stacked) {
-				return ruler.leftTick + (ruler.categoryWidth / 2) + ruler.categorySpacing;
+				return leftTick + (ruler.categoryWidth / 2) + ruler.categorySpacing;
 			}
 
 			return leftTick +
@@ -279,7 +280,7 @@
 				(ruler.barSpacing * datasetIndex);
 		},
 
-		calculateBarY: function(datasetIndex, index) {
+		calculateBarY: function(index, datasetIndex) {
 
 			var xScale = this.getScaleForID(this.getDataset().xAxisID);
 			var yScale = this.getScaleForID(this.getDataset().yAxisID);
diff --git a/src/controllers/controller.line.js b/src/controllers/controller.line.js
index c56e2e2ac..f5e5640f8 100644
--- a/src/controllers/controller.line.js
+++ b/src/controllers/controller.line.js
@@ -116,7 +116,7 @@
 			// Make sure that we handle number of datapoints changing
 			if (numData < numPoints) {
 				// Remove excess bars for data points that have been removed
-				this.getDataset().metaData.splice(numData, numPoints - numData)
+				this.getDataset().metaData.splice(numData, numPoints - numData);
 			} else if (numData > numPoints) {
 				// Add new elements
 				for (var index = numPoints; index < numData; ++index) {
@@ -192,7 +192,7 @@
 
 				// Desired view properties
 				_model: {
-					x: xScale.getPixelForValue(this.getDataset().data[index], index, this.index),
+					x: xScale.getPixelForValue(this.getDataset().data[index], index, this.index, this.chart.isCombo),
 					y: reset ? scaleBase : yScale.getPixelForValue(this.getDataset().data[index], index, this.index),
 					// Appearance
 					tension: point.custom && point.custom.tension ? point.custom.tension : (this.getDataset().tension || this.chart.options.elements.line.tension),
diff --git a/src/core/core.controller.js b/src/core/core.controller.js
index b87dc5121..26db1cd10 100644
--- a/src/core/core.controller.js
+++ b/src/core/core.controller.js
@@ -209,14 +209,24 @@
 		},
 
 		buildOrUpdateControllers: function() {
+			var types = [];
 			helpers.each(this.data.datasets, function(dataset, datasetIndex) {
 				var type = dataset.type || this.config.type;
+				types.push(type);
 				if (dataset.controller) {
 					dataset.controller.updateIndex(datasetIndex);
 					return;
 				}
 				dataset.controller = new Chart.controllers[type](this, datasetIndex);
 			}, this);
+			if (types.length > 1) {
+				for (var i = 1; i < types.length; i++) {
+					if (types[i] != types[i - 1]) {
+						this.isCombo = true;
+						break;
+					}
+				}
+			}
 		},
 
 		resetElements: function resetElements() {
diff --git a/src/core/core.scale.js b/src/core/core.scale.js
index 96b96c376..3071d613d 100644
--- a/src/core/core.scale.js
+++ b/src/core/core.scale.js
@@ -46,11 +46,6 @@
 			this.beforeUpdate();
 
 			// Absorb the master measurements
-			if (!this.isHorizontal()) {
-				console.log(maxWidth);
-			}
-
-
 			this.maxWidth = maxWidth;
 			this.maxHeight = maxHeight;
 			this.margins = margins;
@@ -132,6 +127,7 @@
 
 				//Max label rotation can be set or default to 90 - also act as a loop counter
 				while (this.labelWidth > tickWidth && this.labelRotation <= this.options.ticks.maxRotation) {
+					console.log(this.labelWidth, tickWidth, ',', this.labelRotation, this.options.ticks.maxRotation);
 					cosRotation = Math.cos(helpers.toRadians(this.labelRotation));
 					sinRotation = Math.sin(helpers.toRadians(this.labelRotation));
 
@@ -145,6 +141,7 @@
 
 					this.paddingRight = this.options.ticks.fontSize / 2;
 
+					console.log(sinRotation * originalLabelWidth, this.maxHeight);
 					if (sinRotation * originalLabelWidth > this.maxHeight) {
 						// go back one step
 						this.labelRotation--;
@@ -152,7 +149,6 @@
 					}
 
 					this.labelRotation++;
-					this.labelRotation = Math.max(this.labelRotation, this.options.ticks.minRotation);
 					this.labelWidth = cosRotation * originalLabelWidth;
 
 				}
@@ -233,7 +229,6 @@
 						// Expand to max size
 						this.minSize.width = this.maxWidth;
 					}
-					this.minSize.width += 6; // extra padding
 
 					this.paddingTop = this.options.ticks.fontSize / 2;
 					this.paddingBottom = this.options.ticks.fontSize / 2;
@@ -283,7 +278,8 @@
 				}
 				return this.left + Math.round(pixel);
 			} else {
-				return this.top + (index * (this.height / this.ticks.length));
+				var innerHeight = this.height - (this.paddingTop + this.paddingBottom);
+				return this.top + (index * (innerHeight / (this.ticks.length - 1)));
 			}
 		},
 
@@ -331,7 +327,7 @@
 						var xLabelValue = this.getPixelForTick(index, this.options.gridLines.offsetGridLines); // x values for ticks (need to consider offsetLabel option)
 
 						if (this.options.gridLines.show) {
-							if (index === 0) {
+							if (index === (typeof this.zeroLineIndex !== 'undefined' ? this.zeroLineIndex : 0)) {
 								// Draw the first index specially
 								this.ctx.lineWidth = this.options.gridLines.zeroLineWidth;
 								this.ctx.strokeStyle = this.options.gridLines.zeroLineColor;
@@ -391,9 +387,10 @@
 						// }
 						var yLineValue = this.getPixelForTick(index); // xvalues for grid lines
 						var yLabelValue = this.getPixelForTick(index, this.options.gridLines.offsetGridLines); // x values for ticks (need to consider offsetLabel option)
+						var xLabelValue = this.left + (this.width / 2);
 
 						if (this.options.gridLines.show) {
-							if (index === 0) {
+							if (index === (typeof this.zeroLineIndex !== 'undefined' ? this.zeroLineIndex : 0)) {
 								// Draw the first index specially
 								this.ctx.lineWidth = this.options.gridLines.zeroLineWidth;
 								this.ctx.strokeStyle = this.options.gridLines.zeroLineColor;
@@ -426,11 +423,11 @@
 
 						if (this.options.ticks.show) {
 							this.ctx.save();
-							this.ctx.translate(this.left + (isRotated ? 10 : 5) + 3, yLabelValue - (this.options.ticks.fontSize / 2) + (isRotated ? this.options.ticks.fontSize / 1.5 : 0));
+							this.ctx.translate(xLabelValue, yLabelValue);
 							this.ctx.rotate(helpers.toRadians(this.labelRotation) * -1);
 							this.ctx.font = this.font;
-							this.ctx.textAlign = (isRotated) ? "right" : "center";
-							this.ctx.textBaseline = (isRotated) ? "middle" : "top";
+							this.ctx.textAlign = 'center';
+							this.ctx.textBaseline = "middle";
 							this.ctx.fillText(label, 0, 0);
 							this.ctx.restore();
 						}
diff --git a/src/scales/scale.category.js b/src/scales/scale.category.js
index 52334ee80..ea51cfd14 100644
--- a/src/scales/scale.category.js
+++ b/src/scales/scale.category.js
@@ -17,13 +17,11 @@
 
         // Used to get data value locations.  Value can either be an index or a numerical value
         getPixelForValue: function(value, index, datasetIndex, includeOffset) {
+
             if (this.isHorizontal()) {
                 var innerWidth = this.width - (this.paddingLeft + this.paddingRight);
                 var valueWidth = innerWidth / Math.max((this.data.labels.length - ((this.options.gridLines.offsetGridLines) ? 0 : 1)), 1);
-                var toZero = this.max - this.min;
-                var newVal = value - toZero;
-                var decimal = newVal / (this.max - toZero);
-                var valueOffset = (valueWidth * decimal) + this.paddingLeft;
+                var valueOffset = (valueWidth * index) + this.paddingLeft;
 
                 if (this.options.gridLines.offsetGridLines && includeOffset) {
                     valueOffset += (valueWidth / 2);
diff --git a/src/scales/scale.linear.js b/src/scales/scale.linear.js
index 4c2a11514..662c69e60 100644
--- a/src/scales/scale.linear.js
+++ b/src/scales/scale.linear.js
@@ -74,24 +74,8 @@
 			}
 
 
-
-			// We need to decide how many ticks we are going to have. Each tick draws a grid line.
-			// There are two possibilities. The first is that the user has manually overridden the scale
-			// calculations in which case the job is easy. The other case is that we have to do it ourselves
-			// 
-			// We assume at this point that the scale object has been updated with the following values
-			// by the chart.
-			//
-			// min: this is the minimum value of the scale
-			// max: this is the maximum value of the scale
-			// options: contains the options for the scale. This is referenced from the user settings
-			// rather than being cloned. This ensures that updates always propogate to a redraw
-
-			// Reset the ticks array. Later on, we will draw a grid line at these positions
-			// The array simply contains the numerical value of the spots where ticks will be
+			// Then calulate the ticks
 			this.ticks = [];
-			this.min = this.maxWidth;
-			this.max = this.maxHeight;
 
 			// Figure out what the max number of ticks we can support it is based on the size of
 			// the axis area. For now, we say that the minimum tick spacing in pixels must be 50
@@ -156,18 +140,17 @@
 				this.start = this.max;
 				this.end = this.min;
 			} else {
-				this.start = this.min;
-				this.end = this.max;
+				this.start = this.max;
+				this.end = this.min;
 			}
+
+			this.zeroLineIndex = this.ticks.indexOf(0);
 		},
 
 
 
 		// Utils
-		// Get the correct value. If the value type is object get the x or y based on whether we are horizontal or not
-		getRightValue: function(rawValue) {
-			return (typeof(rawValue) === "object" && rawValue !== null) ? (this.isHorizontal() ? rawValue.x : rawValue.y) : rawValue;
-		},
+
 		getPixelForValue: function(value, index, datasetIndex, includeOffset) {
 			// This must be called after fit has been run so that 
 			//      this.left, this.top, this.right, and this.bottom have been defined
@@ -176,437 +159,20 @@
 
 			if (this.isHorizontal()) {
 				var innerWidth = this.width - (this.paddingLeft + this.paddingRight);
-				pixel = this.left + (innerWidth / range * (value - this.start));
-				pixel += this.paddingLeft;
+				pixel = this.left + (innerWidth / range * (this.getRightValue(value) - this.start));
+				return Math.round(pixel + this.paddingLeft);
 			} else {
-				// Bottom - top since pixels increase downard on a screen
 				var innerHeight = this.height - (this.paddingTop + this.paddingBottom);
-				pixel = (this.bottom - this.paddingBottom) - (innerHeight / range * (value - this.start));
+				pixel = this.top + (innerHeight / range * (this.getRightValue(value) - this.start));
+				return Math.round(pixel + this.paddingTop);
 			}
-
-			return pixel;
 		},
 
-		// Functions needed for line charts
-		// calculateRange: function() {
-		// 	this.min = null;
-		// 	this.max = null;
-
-		// 	var positiveValues = [];
-		// 	var negativeValues = [];
-
-		// 	if (this.options.stacked) {
-		// 		helpers.each(this.data.datasets, function(dataset) {
-		// 			if (this.isHorizontal() ? dataset.xAxisID === this.id : dataset.yAxisID === this.id) {
-		// 				helpers.each(dataset.data, function(rawValue, index) {
-
-		// 					var value = this.getRightValue(rawValue);
-
-		// 					positiveValues[index] = positiveValues[index] || 0;
-		// 					negativeValues[index] = negativeValues[index] || 0;
-
-		// 					if (this.options.relativePoints) {
-		// 						positiveValues[index] = 100;
-		// 					} else {
-		// 						if (value < 0) {
-		// 							negativeValues[index] += value;
-		// 						} else {
-		// 							positiveValues[index] += value;
-		// 						}
-		// 					}
-		// 				}, this);
-		// 			}
-		// 		}, this);
-
-		// 		var values = positiveValues.concat(negativeValues);
-		// 		this.min = helpers.min(values);
-		// 		this.max = helpers.max(values);
-
-		// 	} else {
-		// 		helpers.each(this.data.datasets, function(dataset) {
-		// 			if (this.isHorizontal() ? dataset.xAxisID === this.id : dataset.yAxisID === this.id) {
-		// 				helpers.each(dataset.data, function(rawValue, index) {
-		// 					var value = this.getRightValue(rawValue);
-
-		// 					if (this.min === null) {
-		// 						this.min = value;
-		// 					} else if (value < this.min) {
-		// 						this.min = value;
-		// 					}
-
-		// 					if (this.max === null) {
-		// 						this.max = value;
-		// 					} else if (value > this.max) {
-		// 						this.max = value;
-		// 					}
-		// 				}, this);
-		// 			}
-		// 		}, this);
-		// 	}
-
-		// 	if (this.min === this.max) {
-		// 		this.min--;
-		// 		this.max++;
-		// 	}
-		// },
-
-		// getPointPixelForValue: function(rawValue, index, datasetIndex) {
-		// 	var value = this.getRightValue(rawValue);
-
-		// 	if (this.options.stacked) {
-		// 		var offsetPos = 0;
-		// 		var offsetNeg = 0;
-
-		// 		for (var i = this.data.datasets.length - 1; i > datasetIndex; --i) {
-		// 			if (this.data.datasets[i].data[index] < 0) {
-		// 				offsetNeg += this.data.datasets[i].data[index];
-		// 			} else {
-		// 				offsetPos += this.data.datasets[i].data[index];
-		// 			}
-		// 		}
-
-		// 		if (value < 0) {
-		// 			return this.getPixelForValue(offsetNeg + value);
-		// 		} else {
-		// 			return this.getPixelForValue(offsetPos + value);
-		// 		}
-		// 	} else {
-		// 		return this.getPixelForValue(value);
-		// 	}
-		// },
-
-		// Functions needed for bar charts
-		// calculateBarBase: function(datasetIndex, index) {
-		// 	var base = 0;
-
-		// 	if (this.options.stacked) {
-
-		// 		var value = this.data.datasets[datasetIndex].data[index];
-
-		// 		if (value < 0) {
-		// 			for (var i = 0; i < datasetIndex; i++) {
-		// 				if (this.data.datasets[i].yAxisID === this.id) {
-		// 					base += this.data.datasets[i].data[index] < 0 ? this.data.datasets[i].data[index] : 0;
-		// 				}
-		// 			}
-		// 		} else {
-		// 			for (var j = 0; j < datasetIndex; j++) {
-		// 				if (this.data.datasets[j].yAxisID === this.id) {
-		// 					base += this.data.datasets[j].data[index] > 0 ? this.data.datasets[j].data[index] : 0;
-		// 				}
-		// 			}
-		// 		}
-
-		// 		return this.getPixelForValue(base);
-		// 	}
-
-		// 	base = this.getPixelForValue(this.min);
-
-		// 	if (this.beginAtZero || ((this.min <= 0 && this.max >= 0) || (this.min >= 0 && this.max <= 0))) {
-		// 		base = this.getPixelForValue(0);
-		// 		base += this.options.gridLines.lineWidth;
-		// 	} else if (this.min < 0 && this.max < 0) {
-		// 		// All values are negative. Use the top as the base
-		// 		base = this.getPixelForValue(this.max);
-		// 	}
-
-		// 	return base;
-
-		// },
-		// calculateBarY: function(datasetIndex, index) {
-		// 	var value = this.data.datasets[datasetIndex].data[index];
-
-		// 	if (this.options.stacked) {
-
-		// 		var sumPos = 0,
-		// 			sumNeg = 0;
-
-		// 		for (var i = 0; i < datasetIndex; i++) {
-		// 			if (this.data.datasets[i].data[index] < 0) {
-		// 				sumNeg += this.data.datasets[i].data[index] || 0;
-		// 			} else {
-		// 				sumPos += this.data.datasets[i].data[index] || 0;
-		// 			}
-		// 		}
-
-		// 		if (value < 0) {
-		// 			return this.getPixelForValue(sumNeg + value);
-		// 		} else {
-		// 			return this.getPixelForValue(sumPos + value);
-		// 		}
-
-		// 		return this.getPixelForValue(value);
-		// 	}
-
-		// 	return this.getPixelForValue(value);
-		// },
-
-		// Fit this axis to the given size
-		// @param {number} maxWidth : the max width the axis can be
-		// @param {number} maxHeight: the max height the axis can be
-		// @return {object} minSize : the minimum size needed to draw the axis
-		/*fit: function() {
-
-			this.minSize = {
-				width: 0,
-				height: 0,
-			};
-
-			// In a horizontal axis, we need some room for the scale to be drawn
-			//
-			//      -----------------------------------------------------
-			//          |           |           |           |           |
-			//
-			// In a vertical axis, we need some room for the scale to be drawn.
-			// The actual grid lines will be drawn on the chart area, however, we need to show 
-			// ticks where the axis actually is.
-			// We will allocate 25px for this width
-			//      |
-			//     -|
-			//      |
-			//      |
-			//     -|
-			//      |
-			//      |
-			//     -|
-
-
-			// Width
-			if (this.isHorizontal()) {
-				this.minSize.width = this.maxWidth; // fill all the width
-			} else {
-				this.minSize.width = this.options.gridLines.show && this.options.display ? 10 : 0;
-			}
-
-			// height
-			if (this.isHorizontal()) {
-				this.minSize.height = this.options.gridLines.show && this.options.display ? 10 : 0;
-			} else {
-				this.minSize.height = this.maxHeight; // fill all the height
-			}
-
-			this.paddingLeft = 0;
-			this.paddingRight = 0;
-			this.paddingTop = 0;
-			this.paddingBottom = 0;
-
-
-			if (this.options.ticks.show && this.options.display) {
-				// Don't bother fitting the ticks if we are not showing them
-				var labelFont = helpers.fontString(this.options.ticks.fontSize,
-					this.options.ticks.fontStyle, this.options.ticks.fontFamily);
-
-				if (this.isHorizontal()) {
-					// A horizontal axis is more constrained by the height.
-					var maxLabelHeight = this.maxHeight - this.minSize.height;
-					var labelHeight = 1.5 * this.options.ticks.fontSize;
-					this.minSize.height = Math.min(this.maxHeight, this.minSize.height + labelHeight);
-
-					var labelFont = helpers.fontString(this.options.ticks.fontSize, this.options.ticks.fontStyle, this.options.ticks.fontFamily);
-					this.ctx.font = labelFont;
-
-					var firstLabelWidth = this.ctx.measureText(this.ticks[0]).width;
-					var lastLabelWidth = this.ctx.measureText(this.ticks[this.ticks.length - 1]).width;
-
-					// Ensure that our ticks are always inside the canvas
-					this.paddingLeft = firstLabelWidth / 2;
-					this.paddingRight = lastLabelWidth / 2;
-				} else {
-					// A vertical axis is more constrained by the width. Labels are the dominant factor 
-					// here, so get that length first
-					var maxLabelWidth = this.maxWidth - this.minSize.width;
-					var largestTextWidth = helpers.longestText(this.ctx, labelFont, this.ticks);
-
-					if (largestTextWidth < maxLabelWidth) {
-						// We don't need all the room
-						this.minSize.width += largestTextWidth;
-						this.minSize.width += 3; // extra padding
-					} else {
-						// Expand to max size
-						this.minSize.width = this.maxWidth;
-					}
-
-					this.paddingTop = this.options.ticks.fontSize / 2;
-					this.paddingBottom = this.options.ticks.fontSize / 2;
-				}
-			}
-
-			if (this.margins) {
-				this.paddingLeft -= this.margins.left;
-				this.paddingTop -= this.margins.top;
-				this.paddingRight -= this.margins.right;
-				this.paddingBottom -= this.margins.bottom;
-
-				this.paddingLeft = Math.max(this.paddingLeft, 0);
-				this.paddingTop = Math.max(this.paddingTop, 0);
-				this.paddingRight = Math.max(this.paddingRight, 0);
-				this.paddingBottom = Math.max(this.paddingBottom, 0);
-			}
-
-			this.width = this.minSize.width;
-			this.height = this.minSize.height;
-		},*/
-		// Actualy draw the scale on the canvas
-		// @param {rectangle} chartArea : the area of the chart to draw full grid lines on
-		_draw: function(chartArea) {
-			if (this.options.display) {
-
-				var setContextLineSettings;
-				var hasZero;
-
-				// Make sure we draw text in the correct color
-				this.ctx.fillStyle = this.options.ticks.fontColor;
-
-				if (this.isHorizontal()) {
-					if (this.options.gridLines.show) {
-						// Draw the horizontal line
-						setContextLineSettings = true;
-						hasZero = helpers.findNextWhere(this.ticks, function(tick) {
-							return tick === 0;
-						}) !== undefined;
-						var yTickStart = this.options.position == "bottom" ? this.top : this.bottom - 5;
-						var yTickEnd = this.options.position == "bottom" ? this.top + 5 : this.bottom;
-
-						helpers.each(this.ticks, function(tick, index) {
-							// Grid lines are vertical
-							var xValue = this.getPixelForValue(tick);
-
-							if (tick === 0 || (!hasZero && index === 0)) {
-								// Draw the 0 point specially or the left if there is no 0
-								this.ctx.lineWidth = this.options.gridLines.zeroLineWidth;
-								this.ctx.strokeStyle = this.options.gridLines.zeroLineColor;
-								setContextLineSettings = true; // reset next time
-							} else if (setContextLineSettings) {
-								this.ctx.lineWidth = this.options.gridLines.lineWidth;
-								this.ctx.strokeStyle = this.options.gridLines.color;
-								setContextLineSettings = false;
-							}
-
-							xValue += helpers.aliasPixel(this.ctx.lineWidth);
-
-							// Draw the label area
-							this.ctx.beginPath();
-
-							if (this.options.gridLines.drawTicks) {
-								this.ctx.moveTo(xValue, yTickStart);
-								this.ctx.lineTo(xValue, yTickEnd);
-							}
-
-							// Draw the chart area
-							if (this.options.gridLines.drawOnChartArea) {
-								this.ctx.moveTo(xValue, chartArea.top);
-								this.ctx.lineTo(xValue, chartArea.bottom);
-							}
-
-							// Need to stroke in the loop because we are potentially changing line widths & colours
-							this.ctx.stroke();
-						}, this);
-					}
-
-					if (this.options.ticks.show) {
-						// Draw the ticks
-
-						var labelStartY;
-
-						if (this.options.position == "top") {
-							labelStartY = this.bottom - 10;
-							this.ctx.textBaseline = "bottom";
-						} else {
-							// bottom side
-							labelStartY = this.top + 10;
-							this.ctx.textBaseline = "top";
-						}
-
-						this.ctx.textAlign = "center";
-						this.ctx.font = helpers.fontString(this.options.ticks.fontSize, this.options.ticks.fontStyle, this.options.ticks.fontFamily);
-
-						helpers.each(this.ticks, function(label, index) {
-							var xValue = this.getPixelForValue(this.ticks[index]);
-							this.ctx.fillText(label, xValue, labelStartY);
-						}, this);
-					}
-				} else {
-					// Vertical
-					if (this.options.gridLines.show) {
-
-						// Draw the vertical line
-						setContextLineSettings = true;
-						hasZero = helpers.findNextWhere(this.ticks, function(tick) {
-							return tick === 0;
-						}) !== undefined;
-						var xTickStart = this.options.position == "right" ? this.left : this.right - 5;
-						var xTickEnd = this.options.position == "right" ? this.left + 5 : this.right;
-
-						helpers.each(this.ticks, function(tick, index) {
-							// Grid lines are horizontal
-							var yValue = this.getPixelForValue(tick);
-
-							if (tick === 0 || (!hasZero && index === 0)) {
-								// Draw the 0 point specially or the bottom if there is no 0
-								this.ctx.lineWidth = this.options.gridLines.zeroLineWidth;
-								this.ctx.strokeStyle = this.options.gridLines.zeroLineColor;
-								setContextLineSettings = true; // reset next time
-							} else if (setContextLineSettings) {
-								this.ctx.lineWidth = this.options.gridLines.lineWidth;
-								this.ctx.strokeStyle = this.options.gridLines.color;
-								setContextLineSettings = false; // use boolean to indicate that we only want to do this once
-							}
-
-							yValue += helpers.aliasPixel(this.ctx.lineWidth);
-
-							// Draw the label area
-							this.ctx.beginPath();
-
-							if (this.options.gridLines.drawTicks) {
-								this.ctx.moveTo(xTickStart, yValue);
-								this.ctx.lineTo(xTickEnd, yValue);
-							}
-
-							// Draw the chart area
-							if (this.options.gridLines.drawOnChartArea) {
-								this.ctx.moveTo(chartArea.left, yValue);
-								this.ctx.lineTo(chartArea.right, yValue);
-							}
-
-							this.ctx.stroke();
-						}, this);
-					}
-
-					if (this.options.ticks.show) {
-						// Draw the ticks
-
-						var labelStartX;
-
-						if (this.options.position == "left") {
-							if (this.options.ticks.mirror) {
-								labelStartX = this.right + this.options.ticks.padding;
-								this.ctx.textAlign = "left";
-							} else {
-								labelStartX = this.right - this.options.ticks.padding;
-								this.ctx.textAlign = "right";
-							}
-						} else {
-							// right side
-							if (this.options.ticks.mirror) {
-								labelStartX = this.left - this.options.ticks.padding;
-								this.ctx.textAlign = "right";
-							} else {
-								labelStartX = this.left + this.options.ticks.padding;
-								this.ctx.textAlign = "left";
-							}
-						}
-
-						this.ctx.textBaseline = "middle";
-						this.ctx.font = helpers.fontString(this.options.ticks.fontSize, this.options.ticks.fontStyle, this.options.ticks.fontFamily);
+		// Get the correct value. If the value type is object get the x or y based on whether we are horizontal or not
+		getRightValue: function(rawValue) {
+			return (typeof(rawValue) === "object" && rawValue !== null) ? (this.isHorizontal() ? rawValue.x : rawValue.y) : rawValue;
+		},
 
-						helpers.each(this.ticks, function(label, index) {
-							var yValue = this.getPixelForValue(this.ticks[index]);
-							this.ctx.fillText(label, labelStartX, yValue);
-						}, this);
-					}
-				}
-			}
-		}
 	});
 	Chart.scaleService.registerScaleType("linear", LinearScale, defaultConfig);