Merge pull request #1219 from etimberg/feature/controllers

Controller Driven Charts
chartjs · Jun 16, 2015 · 0d5f282 · 0d5f282
2 parents 15d9a04 + db98180
commit 0d5f282
Show file tree

Hide file tree

Showing 36 changed files with 7,937 additions and 9,594 deletions.
diff --git a/Chart.js b/Chart.js
diff --git a/Chart.min.js b/Chart.min.js
diff --git a/gulpfile.js b/gulpfile.js
@@ -16,20 +16,23 @@ var gulp = require('gulp'),
 
 var srcDir = './src/';
 /*
- *	Usage : gulp build --types=Bar,Line,Doughnut
- *	Output: - A built Chart.js file with Core and types Bar, Line and Doughnut concatenated together
- *			- A minified version of this code, in Chart.min.js
+ *  Usage : gulp build --types=Bar,Line,Doughnut
+ *  Output: - A built Chart.js file with Core and types Bar, Line and Doughnut concatenated together
+ *          - A minified version of this code, in Chart.min.js
  */
 
 gulp.task('build', function() {
 
     var srcFiles = [
             './src/core/core.js',
+            './src/core/core.helpers.js',
+            './src/core/core.chart.js',
+            './src/core/core.element.js',
             './src/core/**',
+            './src/controllers/**',
             './src/scales/**',
             './src/elements/**',
-            './src/charts/**',
-            './src/**',
+            './src/charts/chart.bar.js',
             './node_modules/color/dist/color.min.js'
         ],
         isCustom = !!(util.env.types),
@@ -48,9 +51,9 @@ gulp.task('build', function() {
 });
 
 /*
- *	Usage : gulp bump
- *	Prompts: Version increment to bump
- *	Output: - New version number written into package.json & bower.json
+ *  Usage : gulp bump
+ *  Prompts: Version increment to bump
+ *  Output: - New version number written into package.json & bower.json
  */
 
 gulp.task('bump', function(complete) {

diff --git a/samples/bar-multi-axis.html b/samples/bar-multi-axis.html
@@ -45,7 +45,8 @@
     };
     window.onload = function() {
         var ctx = document.getElementById("canvas").getContext("2d");
-        window.myBar = new Chart(ctx).Bar({
+        window.myBar = new Chart(ctx, {
+            type: 'bar',
             data: barChartData, 
             options: {
                 responsive: true,

diff --git a/samples/bar-stacked.html b/samples/bar-stacked.html
@@ -39,7 +39,8 @@
     };
     window.onload = function() {
         var ctx = document.getElementById("canvas").getContext("2d");
-        window.myBar = new Chart(ctx).Bar({
+        window.myBar = new Chart(ctx, {
+            type: 'bar',
             data: barChartData,
             options: {
                 responsive: true,

diff --git a/samples/bar.html b/samples/bar.html
@@ -39,7 +39,8 @@
     };
     window.onload = function() {
         var ctx = document.getElementById("canvas").getContext("2d");
-        window.myBar = new Chart(ctx).Bar({
+        window.myBar = new Chart(ctx, {
+            type: 'bar',
             data: barChartData,
             options: {
                 responsive: true,

diff --git a/samples/combo-bar-line.html b/samples/combo-bar-line.html
@@ -0,0 +1,63 @@
+<!doctype html>
+<html>
+
+<head>
+    <title>Bar Chart</title>
+    <script src="../node_modules/jquery/dist/jquery.min.js"></script>
+    <script src="../Chart.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.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: [{
+            type: 'line',
+            label: 'Dataset 1',
+            backgroundColor: "rgba(220,220,220,0.5)",
+            data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]
+        }, {
+            label: 'Dataset 2',
+            backgroundColor: "rgba(151,187,205,0.5)",
+            data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]
+        }, {
+            label: 'Dataset 3',
+            backgroundColor: "rgba(151,187,205,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,
+            }
+        });
+    };
+
+    $('#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();
+    });
+    </script>
+</body>
+
+</html>
diff --git a/samples/doughnut.html b/samples/doughnut.html
@@ -31,6 +31,7 @@
     };
 
     var config = {
+        type: 'doughnut',
         data: {
             datasets: [{
                 data: [
@@ -93,7 +94,8 @@
 
     window.onload = function() {
         var ctx = document.getElementById("chart-area").getContext("2d");
-        window.myDoughnut = new Chart(ctx).Doughnut(config);
+        window.myDoughnut = new Chart(ctx, config);
+        console.log(window.myDoughnut);
     };
 
     $('#randomizeData').click(function() {

diff --git a/samples/line.html b/samples/line.html
@@ -28,6 +28,7 @@
     };
 
     var config = {
+        type: 'line',
         data: {
             labels: ["January", "February", "March", "April", "May", "June", "July"],
             datasets: [{
@@ -64,7 +65,7 @@
 
     window.onload = function() {
         var ctx = document.getElementById("canvas").getContext("2d");
-        window.myLine = new Chart(ctx).Line(config);
+        window.myLine = new Chart(ctx, config);
     };
 
     $('#randomizeData').click(function() {

diff --git a/samples/pie.html b/samples/pie.html
@@ -21,6 +21,7 @@
     };
 
     var config = {
+        type: 'pie',
         data: {
             datasets: [{
                 data: [
@@ -83,7 +84,7 @@
 
     window.onload = function() {
         var ctx = document.getElementById("chart-area").getContext("2d");
-        window.myPie = new Chart(ctx).Pie(config);
+        window.myPie = new Chart(ctx, config);
     };
 
     $('#randomizeData').click(function() {

diff --git a/samples/polar-area.html b/samples/polar-area.html
@@ -21,6 +21,7 @@
     };
 
     var config = {
+        type: 'polarArea',
         data: {
             datasets: [{
                 data: [
@@ -37,23 +38,23 @@
                     "#949FB1",
                     "#4D5360",
                 ],
-                labels: [
-                    "Red",
-                    "Green",
-                    "Yellow",
-                    "Grey",
-                    "Dark Grey"
-                ]
             }],
+            labels: [
+                "Red",
+                "Green",
+                "Yellow",
+                "Grey",
+                "Dark Grey"
+            ]
         },
         options: {
             responsive: true
         }
     };
 
     window.onload = function() {
-        var ctx = document.getElementById("chart-area").getContext("2d");
-        window.myPolarArea = new Chart(ctx).PolarArea(config);
+        var ctx = document.getElementById("chart-area");
+        window.myPolarArea = new Chart(ctx, config);
     };
 
     $('#randomizeData').click(function() {

diff --git a/samples/radar.html b/samples/radar.html
@@ -21,6 +21,7 @@
     };
 
     var config = {
+        type: 'radar',
         data: {
             labels: ["Eating", "Drinking", "Sleeping", "Designing", "Coding", "Cycling", "Running"],
             datasets: [{
@@ -36,14 +37,11 @@
                 pointHighlightStroke: "rgba(151,187,205,1)",
                 data: [null, randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]
             }]
-        },
-        options: {
-            responsive: true
         }
     };
 
     window.onload = function() {
-        window.myRadar = new Chart(document.getElementById("canvas").getContext("2d")).Radar(config);
+        window.myRadar = new Chart(document.getElementById("canvas"), config);
     };
 
     $('#randomizeData').click(function() {