]> 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: 359e941)
Updated Samples 856/head
authorTanner Linsley <tannerlinsley@gmail.com>
Thu, 8 Jan 2015 17:13:14 +0000 (10:13 -0700)
committerTanner Linsley <tannerlinsley@gmail.com>
Thu, 8 Jan 2015 17:13:14 +0000 (10:13 -0700)
Samples now include a “Randomize Data” button which utilizes the latest
changes.

samples/bar.html patch | blob | blame | history
samples/doughnut.html patch | blob | blame | history
samples/line.html patch | blob | blame | history
samples/pie.html patch | blob | blame | history
samples/polar-area.html patch | blob | blame | history
samples/radar.html patch | blob | blame | history
src/Chart.Doughnut.js patch | blob | blame | history
src/Chart.PolarArea.js patch | blob | blame | history

diff --git a/samples/bar.html b/samples/bar.html
index 5bf4b5bae3661b26f403b9a50503f995075a4761..c386c50fa387eca2a6614a33a1369e854db84046 100644 (file)
--- a/samples/bar.html
+++ b/samples/bar.html
@@ -3,15 +3,17 @@
        <head>
                <title>Bar Chart</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%">
                        <canvas id="canvas" height="450" width="600"></canvas>
                </div>
-
+               <button id="randomizeData">Randomize Data</button>
 
        <script>
        var randomScalingFactor = function(){ return Math.round(Math.random()*100)};
+       var randomColorFactor = function(){ return Math.round(Math.random()*255)};
 
        var barChartData = {
                labels : ["January","February","March","April","May","June","July"],
@@ -40,6 +42,16 @@
                });
        }
 
+       $('#randomizeData').click(function(){
+       barChartData.datasets[0].fillColor = 'rgba(' + randomColorFactor() + ',' + randomColorFactor() + ',' + randomColorFactor() + ',.7)';
+       barChartData.datasets[0].data = [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()];
+
+       barChartData.datasets[1].fillColor = 'rgba(' + randomColorFactor() + ',' + randomColorFactor() + ',' + randomColorFactor() + ',.7)';
+       barChartData.datasets[1].data = [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()];
+
+       window.myBar.update();
+    });
+
        </script>
        </body>
 </html>
diff --git a/samples/doughnut.html b/samples/doughnut.html
index fdf7539a893801e6aacc39bd8fe7e5bc06cb3258..879f72f6894311a640412bd58d8b896bf8b1a02e 100644 (file)
--- a/samples/doughnut.html
+++ b/samples/doughnut.html
@@ -3,6 +3,7 @@
        <head>
                <title>Doughnut Chart</title>
                <script src="../Chart.js"></script>
+               <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
                <style>
                        body{
                                padding: 0;
@@ -17,37 +18,41 @@
                <div id="canvas-holder">
                        <canvas id="chart-area" width="500" height="500"/>
                </div>
+               <button id="randomizeData">Randomize Data</button>
 
 
        <script>
 
+               var randomScalingFactor = function(){ return Math.round(Math.random()*100)};
+               var randomColorFactor = function(){ return Math.round(Math.random()*255)};
+
                var doughnutData = [
                                {
-                                       value: 300,
+                                       value: randomScalingFactor(),
                                        color:"#F7464A",
                                        highlight: "#FF5A5E",
                                        label: "Red"
                                },
                                {
-                                       value: 50,
+                                       value: randomScalingFactor(),
                                        color: "#46BFBD",
                                        highlight: "#5AD3D1",
                                        label: "Green"
                                },
                                {
-                                       value: 100,
+                                       value: randomScalingFactor(),
                                        color: "#FDB45C",
                                        highlight: "#FFC870",
                                        label: "Yellow"
                                },
                                {
-                                       value: 40,
+                                       value: randomScalingFactor(),
                                        color: "#949FB1",
                                        highlight: "#A8B3C5",
                                        label: "Grey"
                                },
                                {
-                                       value: 120,
+                                       value: randomScalingFactor(),
                                        color: "#4D5360",
                                        highlight: "#616774",
                                        label: "Dark Grey"
@@ -60,6 +65,14 @@
                                window.myDoughnut = new Chart(ctx).Doughnut(doughnutData, {responsive : true});
                        };
 
+                       $('#randomizeData').click(function(){
+                               $.each(doughnutData, function(i, piece){
+                                       doughnutData[i].value = randomScalingFactor();
+                               doughnutData[i].color = 'rgba(' + randomColorFactor() + ',' + randomColorFactor() + ',' + randomColorFactor() + ',.7)';
+                               });
+                       window.myDoughnut.update();
+                   });
+
 
 
        </script>
diff --git a/samples/line.html b/samples/line.html
index ccd0dad9653bef4b0a35cc222b7bd18274900381..32ce412418540e0a201e9d4fa6bddbb1c3239606 100644 (file)
--- a/samples/line.html
+++ b/samples/line.html
@@ -3,6 +3,7 @@
        <head>
                <title>Line Chart</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:30%">
@@ -10,10 +11,13 @@
                                <canvas id="canvas" height="450" width="600"></canvas>
                        </div>
                </div>
+               <button id="randomizeData">Randomize Data</button>
 
 
        <script>
                var randomScalingFactor = function(){ return Math.round(Math.random()*100)};
+               var randomColorFactor = function(){ return Math.round(Math.random()*255)};
+
                var lineChartData = {
                        labels : ["January","February","March","April","May","June","July"],
                        datasets : [
@@ -48,6 +52,16 @@
                });
        }
 
+       $('#randomizeData').click(function(){
+       lineChartData.datasets[0].fillColor = 'rgba(' + randomColorFactor() + ',' + randomColorFactor() + ',' + randomColorFactor() + ',.3)';
+       lineChartData.datasets[0].data = [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()];
+
+       lineChartData.datasets[1].fillColor = 'rgba(' + randomColorFactor() + ',' + randomColorFactor() + ',' + randomColorFactor() + ',.3)';
+       lineChartData.datasets[1].data = [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()];
+
+       window.myLine.update();
+    });
+
 
        </script>
        </body>
diff --git a/samples/pie.html b/samples/pie.html
index 255a499761889567d7dcaeec0aee987f86a95355..ca5aecde03ab3f5f439013f9ec5075a15dec29bf 100644 (file)
--- a/samples/pie.html
+++ b/samples/pie.html
@@ -3,42 +3,46 @@
        <head>
                <title>Pie Chart</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 id="canvas-holder">
                        <canvas id="chart-area" width="300" height="300"/>
                </div>
-
+               <button id="randomizeData">Randomize Data</button>
 
        <script>
 
+               var randomScalingFactor = function(){ return Math.round(Math.random()*100)};
+               var randomColorFactor = function(){ return Math.round(Math.random()*255)};
+
                var pieData = [
                                {
-                                       value: 300,
+                                       value: randomScalingFactor(),
                                        color:"#F7464A",
                                        highlight: "#FF5A5E",
                                        label: "Red"
                                },
                                {
-                                       value: 50,
+                                       value: randomScalingFactor(),
                                        color: "#46BFBD",
                                        highlight: "#5AD3D1",
                                        label: "Green"
                                },
                                {
-                                       value: 100,
+                                       value: randomScalingFactor(),
                                        color: "#FDB45C",
                                        highlight: "#FFC870",
                                        label: "Yellow"
                                },
                                {
-                                       value: 40,
+                                       value: randomScalingFactor(),
                                        color: "#949FB1",
                                        highlight: "#A8B3C5",
                                        label: "Grey"
                                },
                                {
-                                       value: 120,
+                                       value: randomScalingFactor(),
                                        color: "#4D5360",
                                        highlight: "#616774",
                                        label: "Dark Grey"
@@ -51,6 +55,14 @@
                                window.myPie = new Chart(ctx).Pie(pieData);
                        };
 
+                       $('#randomizeData').click(function(){
+                               $.each(pieData, function(i, piece){
+                                       pieData[i].value = randomScalingFactor();
+                               pieData[i].color = 'rgba(' + randomColorFactor() + ',' + randomColorFactor() + ',' + randomColorFactor() + ',.7)';
+                               });
+                       window.myPie.update();
+                   });
+
 
 
        </script>
diff --git a/samples/polar-area.html b/samples/polar-area.html
index d3d3f01b47e0c8751a309a848a52e7661cef22eb..0828c1020344ee87fd3303e7f3be6130aec6087c 100644 (file)
--- a/samples/polar-area.html
+++ b/samples/polar-area.html
@@ -3,42 +3,47 @@
        <head>
                <title>Polar Area Chart</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 id="canvas-holder" style="width:30%">
                        <canvas id="chart-area" width="300" height="300"/>
                </div>
+               <button id="randomizeData">Randomize Data</button>
 
 
        <script>
 
+               var randomScalingFactor = function(){ return Math.round(Math.random()*100)};
+               var randomColorFactor = function(){ return Math.round(Math.random()*255)};
+
                var polarData = [
                                {
-                                       value: 300,
+                                       value: randomScalingFactor(),
                                        color:"#F7464A",
                                        highlight: "#FF5A5E",
                                        label: "Red"
                                },
                                {
-                                       value: 50,
+                                       value: randomScalingFactor(),
                                        color: "#46BFBD",
                                        highlight: "#5AD3D1",
                                        label: "Green"
                                },
                                {
-                                       value: 100,
+                                       value: randomScalingFactor(),
                                        color: "#FDB45C",
                                        highlight: "#FFC870",
                                        label: "Yellow"
                                },
                                {
-                                       value: 40,
+                                       value: randomScalingFactor(),
                                        color: "#949FB1",
                                        highlight: "#A8B3C5",
                                        label: "Grey"
                                },
                                {
-                                       value: 120,
+                                       value: randomScalingFactor(),
                                        color: "#4D5360",
                                        highlight: "#616774",
                                        label: "Dark Grey"
@@ -53,6 +58,14 @@
                                });
                        };
 
+                       $('#randomizeData').click(function(){
+                               $.each(polarData, function(i, piece){
+                                       polarData[i].value = randomScalingFactor();
+                               polarData[i].color = 'rgba(' + randomColorFactor() + ',' + randomColorFactor() + ',' + randomColorFactor() + ',.7)';
+                               });
+                       window.myPolarArea.update();
+                   });
+
 
 
        </script>
diff --git a/samples/radar.html b/samples/radar.html
index 6a04f879c09089bd325f8f138f347d73471f7ed5..d260797847aa3060a61d50bdb453746c59f29974 100644 (file)
--- a/samples/radar.html
+++ b/samples/radar.html
@@ -3,19 +3,20 @@
        <head>
                <title>Radar Chart</title>
                <script src="../Chart.js"></script>
-               <meta name = "viewport" content = "initial-scale = 1, user-scalable = no">
-               <style>
-                       canvas{
-                       }
-               </style>
+               <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
        </head>
        <body>
                <div style="width:30%">
                        <canvas id="canvas" height="450" width="450"></canvas>
                </div>
+               <button id="randomizeData">Randomize Data</button>
 
 
        <script>
+
+       var randomScalingFactor = function(){ return Math.round(Math.random()*100)};
+       var randomColorFactor = function(){ return Math.round(Math.random()*255)};
+
        var radarChartData = {
                labels: ["Eating", "Drinking", "Sleeping", "Designing", "Coding", "Cycling", "Running"],
                datasets: [
@@ -27,7 +28,7 @@
                                pointStrokeColor: "#fff",
                                pointHighlightFill: "#fff",
                                pointHighlightStroke: "rgba(220,220,220,1)",
-                               data: [65,59,90,81,56,55,40]
+                               data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
                        },
                        {
                                label: "My Second dataset",
@@ -37,7 +38,7 @@
                                pointStrokeColor: "#fff",
                                pointHighlightFill: "#fff",
                                pointHighlightStroke: "rgba(151,187,205,1)",
-                               data: [28,48,40,19,96,27,100]
+                               data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
                        }
                ]
        };
@@ -48,6 +49,16 @@
                });
        }
 
+       $('#randomizeData').click(function(){
+       radarChartData.datasets[0].fillColor = 'rgba(' + randomColorFactor() + ',' + randomColorFactor() + ',' + randomColorFactor() + ',.3)';
+       radarChartData.datasets[0].data = [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()];
+
+       radarChartData.datasets[1].fillColor = 'rgba(' + randomColorFactor() + ',' + randomColorFactor() + ',' + randomColorFactor() + ',.3)';
+       radarChartData.datasets[1].data = [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()];
+
+       window.myRadar.update();
+    });
+
        </script>
        </body>
 </html>
diff --git a/src/Chart.Doughnut.js b/src/Chart.Doughnut.js
index d3786f3fbe812242983ec465093080892dd45082..7b819f3299db4b413070be30d6895e4240d16e02 100644 (file)
--- a/src/Chart.Doughnut.js
+++ b/src/Chart.Doughnut.js
@@ -135,7 +135,6 @@
                                                label : segment.label
                                        });
                                }, this);
-                               console.log(this.data, this.segments);
                        } else{
                                // Data size changed without properly inserting, just redraw the chart
                                this.initialize(this.data);
diff --git a/src/Chart.PolarArea.js b/src/Chart.PolarArea.js
index 326b5a373fd292e4b70351d832891ce19320404b..bd40486c3204687c3b296bd8fd52f3cd9f5394a4 100644 (file)
--- a/src/Chart.PolarArea.js
+++ b/src/Chart.PolarArea.js
@@ -204,7 +204,6 @@
                                                value: segment.value,
                                        });
                                },this);
-                               console.log(this.data, this.segments);
                        } else{
                                // Data size changed without properly inserting, just redraw the chart
                                this.initialize(this.data);
Mirror of https://github.com/chartjs/Chart.js.git