]> git.ipfire.org Git - thirdparty/Chart.js.git/commitdiff
projects / thirdparty / Chart.js.git / commitdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | patch | inline | side by side (parent: 676765e)
Created a multi axis sample file. Added an option to draw ticks for the axes. This...
authoretimberg <evert.timberg@gmail.com>
Tue, 19 May 2015 00:39:59 +0000 (20:39 -0400)
committeretimberg <evert.timberg@gmail.com>
Tue, 19 May 2015 00:39:59 +0000 (20:39 -0400)
samples/scatter-multi-axis.html [new file with mode: 0644] patch | blob
src/Chart.Scale.js patch | blob | blame | history
src/Chart.Scatter.js patch | blob | blame | history

diff --git a/samples/scatter-multi-axis.html b/samples/scatter-multi-axis.html
new file mode 100644 (file)
index 0000000..8d46584
--- /dev/null
+++ b/samples/scatter-multi-axis.html
@@ -0,0 +1,221 @@
+<!doctype html>
+<html>
+
+<head>
+    <title>Scatter Chart Multi Axis</title>
+    <script src="../Chart.js"></script>
+    <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
+</head>
+
+<body>
+    <div style="width:50%">
+        <div>
+            <canvas id="canvas" height="450" width="600"></canvas>
+        </div>
+    </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 scatterChartData = {
+        datasets: [{
+            label: "My First dataset",
+            xAxisID: "x-axis-1",
+            yAxisID: "y-axis-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(),
+                       }]
+        }, {
+            label: "My Second dataset",
+            xAxisID: "x-axis-1",
+            yAxisID: "y-axis-2",
+            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;
+    });
+
+    console.log(scatterChartData);
+
+    window.onload = function() {
+        var ctx = document.getElementById("canvas").getContext("2d");
+        window.myScatter = new Chart(ctx).Scatter(scatterChartData, {
+            responsive: true,
+            hoverMode: 'single',
+            scales: {
+               xAxes: [{
+                       gridLines: {
+                               zeroLineColor: "rgba(0,0,0,1)"
+                       }
+               }],
+               yAxes: [{
+                       scaleType: "linear", // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance
+                       show: true,
+                       position: "left",
+                       horizontal: false, 
+                       id: "y-axis-1",
+               
+                       // grid line settings
+                       gridLines: {
+                           show: true,
+                           color: "rgba(0, 0, 0, 0.05)",
+                           lineWidth: 1,
+                           drawOnChartArea: true,
+                           drawTicks: true,
+                           zeroLineWidth: 1,
+                           zeroLineColor: "rgba(0,0,0,0.25)",
+                       },
+
+                       // scale numbers
+                       beginAtZero: false,
+                       integersOnly: false,
+                       override: null,
+
+                       // label settings
+                       labels: {
+                           show: true,
+                           template: "<%=value%>",
+                           fontSize: 12,
+                           fontStyle: "normal",
+                           fontColor: "#666",
+                           fontFamily: "Helvetica Neue",
+                       }
+                   }, {
+                       scaleType: "linear", // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance
+                       show: true,
+                       position: "right",
+                       horizontal: false, 
+                       id: "y-axis-2",
+               
+                       // grid line settings
+                       gridLines: {
+                           show: true,
+                           color: "rgba(0, 0, 0, 0.05)",
+                           lineWidth: 1,
+                           drawOnChartArea: false, // only want the grid lines for one axis to show up
+                           drawTicks: false,
+                           zeroLineWidth: 1,
+                           zeroLineColor: "rgba(0,0,0,0.25)",
+                       },
+
+                       // scale numbers
+                       beginAtZero: false,
+                       integersOnly: false,
+                       override: null,
+
+                       // label settings
+                       labels: {
+                           show: true,
+                           template: "<%=value%>",
+                           fontSize: 12,
+                           fontStyle: "normal",
+                           fontColor: "#666",
+                           fontFamily: "Helvetica Neue",
+                       }
+                   }],
+            }
+        });
+    };
+
+    $('#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>
+
+</html>
diff --git a/src/Chart.Scale.js b/src/Chart.Scale.js
index e07aacb036344e717ac8e50663e7088a953fba56..3707597b6944925630e599fcd49267ad41b2b8d8 100644 (file)
--- a/src/Chart.Scale.js
+++ b/src/Chart.Scale.js
@@ -538,9 +538,11 @@
                                                        xValue += helpers.aliasPixel(this.ctx.lineWidth);
                                                        
                                                        // Draw the label area
-                                                       this.ctx.beginPath();
-                                                       this.ctx.moveTo(xValue, yTickStart);
-                                                       this.ctx.lineTo(xValue, yTickEnd);
+                                                       if (this.options.gridLines.drawTicks) {
+                                                               this.ctx.beginPath();
+                                                               this.ctx.moveTo(xValue, yTickStart);
+                                                               this.ctx.lineTo(xValue, yTickEnd);
+                                                       }
                                                        
                                                        // Draw the chart area
                                                        if (this.options.gridLines.drawOnChartArea) {
@@ -602,9 +604,11 @@
                                                        yValue += helpers.aliasPixel(this.ctx.lineWidth);
 
                                                        // Draw the label area
-                                                       this.ctx.beginPath();
-                                                       this.ctx.moveTo(xTickStart, yValue);
-                                                       this.ctx.lineTo(xTickEnd, yValue);
+                                                       if (this.options.gridLines.drawTicks) {
+                                                               this.ctx.beginPath();
+                                                               this.ctx.moveTo(xTickStart, yValue);
+                                                               this.ctx.lineTo(xTickEnd, yValue);
+                                                       }
                                                        
                                                        // Draw the chart area
                                                        if (this.options.gridLines.drawOnChartArea) {
diff --git a/src/Chart.Scatter.js b/src/Chart.Scatter.js
index 10aa6757ce55f6f00ce78898a7416ecd030330c9..8267f2a8bc268028f9b967bcaa60dbb48c663513 100644 (file)
--- a/src/Chart.Scatter.js
+++ b/src/Chart.Scatter.js
@@ -21,6 +21,7 @@
                     color: "rgba(0, 0, 0, 0.05)",
                     lineWidth: 1,
                     drawOnChartArea: true,
+                    drawTicks: true,
                     zeroLineWidth: 1,
                     zeroLineColor: "rgba(0,0,0,0.25)",
                 },
@@ -53,6 +54,7 @@
                     color: "rgba(0, 0, 0, 0.05)",
                     lineWidth: 1,
                     drawOnChartArea: true,
+                    drawTicks: true, // draw ticks extending towards the label
                     zeroLineWidth: 1,
                     zeroLineColor: "rgba(0,0,0,0.25)",
                 },
Mirror of https://github.com/chartjs/Chart.js.git