]> 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: 6ad533c)
improve bubble chart sample
authorVille Hämäläinen <hamalainen.ville.p@gmail.com>
Sun, 28 Feb 2016 05:13:09 +0000 (07:13 +0200)
committerVille Hämäläinen <hamalainen.ville.p@gmail.com>
Sun, 28 Feb 2016 05:13:09 +0000 (07:13 +0200)
- fix add dataset when all datasets have been removed
- set title for chart
- remove html legend
- set same size canvas as other samples
- remove user select from canvas
- set name for added datasets

samples/bubble.html patch | blob | blame | history

diff --git a/samples/bubble.html b/samples/bubble.html
index b2d057e9397414bb6fd0e64da09c3044a7dd00d9..0631683424171b6ac6001f3fd0db20a4ac4a89c5 100644 (file)
--- a/samples/bubble.html
+++ b/samples/bubble.html
@@ -6,14 +6,16 @@
     <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
     <script src="../dist/Chart.bundle.js"></script>
     <style type="text/css">
-        canvas {
-            border: 1px solid red;
-        }
+    #canvas{
+        -moz-user-select: none;
+        -webkit-user-select: none;
+        -ms-user-select: none;
+    }
     </style>
 </head>
 
 <body>
-    <div id="container" style="width: 100%; height: 25%;">
+    <div id="container" style="width: 75%;">
         <canvas id="canvas"></canvas>
     </div>
     <button id="randomizeData">Randomize Data</button>
@@ -21,13 +23,11 @@
     <button id="removeDataset">Remove Dataset</button>
     <button id="addData">Add Data</button>
     <button id="removeData">Remove Data</button>
-    <button id="show">Show</button>
-    <div>
-        <h3>Legend</h3>
-        <div id="legendContainer">
-        </div>
-    </div>
     <script>
+        var DEFAULT_DATASET_SIZE = 7;
+
+        var addedCount = 0;
+
         var randomScalingFactor = function() {
             return (Math.random() > 0.5 ? 1.0 : -1.0) * Math.round(Math.random() * 100);
         };
@@ -45,75 +45,23 @@
             datasets: [{
                 label: "My First dataset",
                 backgroundColor: randomColor(),
-                data: [{
-                    x: randomScalingFactor(),
-                    y: randomScalingFactor(),
-                    r: Math.abs(randomScalingFactor()) / 5,
-                }, {
-                    x: randomScalingFactor(),
-                    y: randomScalingFactor(),
-                    r: Math.abs(randomScalingFactor()) / 5,
-                }, {
-                    x: randomScalingFactor(),
-                    y: randomScalingFactor(),
-                    r: Math.abs(randomScalingFactor()) / 5,
-                }, {
-                    x: randomScalingFactor(),
-                    y: randomScalingFactor(),
-                    r: Math.abs(randomScalingFactor()) / 5,
-                }, {
-                    x: randomScalingFactor(),
-                    y: randomScalingFactor(),
-                    r: Math.abs(randomScalingFactor()) / 5,
-                }, {
-                    x: randomScalingFactor(),
-                    y: randomScalingFactor(),
-                    r: Math.abs(randomScalingFactor()) / 5,
-                }, {
-                    x: randomScalingFactor(),
-                    y: randomScalingFactor(),
-                    r: Math.abs(randomScalingFactor()) / 5,
-                }]
+                data: []
             }, {
                 label: "My Second dataset",
                 backgroundColor: randomColor(),
-                data: [{
-                    x: randomScalingFactor(),
-                    y: randomScalingFactor(),
-                    r: Math.abs(randomScalingFactor()) / 5,
-                }, {
-                    x: randomScalingFactor(),
-                    y: randomScalingFactor(),
-                    r: Math.abs(randomScalingFactor()) / 5,
-                }, {
-                    x: randomScalingFactor(),
-                    y: randomScalingFactor(),
-                    r: Math.abs(randomScalingFactor()) / 5,
-                }, {
-                    x: randomScalingFactor(),
-                    y: randomScalingFactor(),
-                    r: Math.abs(randomScalingFactor()) / 5,
-                }, {
-                    x: randomScalingFactor(),
-                    y: randomScalingFactor(),
-                    r: Math.abs(randomScalingFactor()) / 5,
-                }, {
-                    x: randomScalingFactor(),
-                    y: randomScalingFactor(),
-                    r: Math.abs(randomScalingFactor()) / 5,
-                }, {
-                    x: randomScalingFactor(),
-                    y: randomScalingFactor(),
-                    r: Math.abs(randomScalingFactor()) / 5,
-                }]
+                data: []
             }]
-
         };
 
-        function updateLegend() {
-            $legendContainer = $('#legendContainer');
-            $legendContainer.empty();
-            $legendContainer.append(window.myChart.generateLegend());
+        // add random data to initial datasets
+        for(var i in bubbleChartData.datasets){
+            for(var j=0; j<DEFAULT_DATASET_SIZE; ++j){
+                bubbleChartData.datasets[i].data.push({
+                    x: randomScalingFactor(),
+                    y: randomScalingFactor(),
+                    r: Math.abs(randomScalingFactor()) / 5
+                });
+            }
         }
 
         window.onload = function() {
@@ -123,10 +71,12 @@
                 data: bubbleChartData,
                 options: {
                     responsive: true,
+                    title:{
+                        display:true,
+                        text:'Chart.js Bubble Chart'
+                    },
                 }
             });
-
-            updateLegend();
         };
 
         $('#randomizeData').click(function() {
@@ -142,16 +92,17 @@
                 });
             });
             window.myChart.update();
-            updateLegend();
         });
 
         $('#addDataset').click(function() {
+            ++addedCount;
             var newDataset = {
+                label: "My added dataset " + addedCount,
                 backgroundColor: randomColor(),
                 data: []
             };
 
-            for (var index = 0; index < bubbleChartData.datasets[0].data.length; ++index) {
+            for (var index = 0; index < DEFAULT_DATASET_SIZE; ++index) {
                 newDataset.data.push({
                     x: randomScalingFactor(),
                     y: randomScalingFactor(),
@@ -161,14 +112,11 @@
 
             bubbleChartData.datasets.push(newDataset);
             window.myChart.update();
-            updateLegend();
         });
 
         $('#addData').click(function() {
             if (bubbleChartData.datasets.length > 0) {
-
                 for (var index = 0; index < bubbleChartData.datasets.length; ++index) {
-                    //window.myChart.addData(randomScalingFactor(), index);
                     bubbleChartData.datasets[index].data.push({
                         x: randomScalingFactor(),
                         y: randomScalingFactor(),
@@ -177,14 +125,12 @@
                 }
 
                 window.myChart.update();
-                updateLegend();
             }
         });
 
         $('#removeDataset').click(function() {
             bubbleChartData.datasets.splice(0, 1);
             window.myChart.update();
-            updateLegend();
         });
 
         $('#removeData').click(function() {
@@ -194,11 +140,6 @@
             });
 
             window.myChart.update();
-            updateLegend();
-        });
-
-        $('#show').click(function() {
-            document.getElementById('container').style.display = '';
         });
     </script>
 </body>
Mirror of https://github.com/chartjs/Chart.js.git