added Radar Chart

Readme.md

@@ -17,8 +17,8 @@ nChart for node.js inspired by [Chart.js][].
   * [✔] Pie chart
   * [✔] Doughnut chart
   * [✔] Bar chart
+  * [✔] Radar chart
   * [ ] Polar area chart
-  * [ ] Radar chart
 
 ## Documentation
 

examples/bar.js

@@ -13,4 +13,3 @@ canvas.toBuffer(function (err, buf) {
   if (err) throw err;
   fs.writeFile(__dirname + '/bar.png', buf);
 });
-

examples/radar.js

@@ -0,0 +1,15 @@
+var Canvas = require('canvas'),
+    canvas = new Canvas(800, 800),
+    ctx = canvas.getContext('2d'),
+    Chart = require('../'),
+    fs = require('fs'),
+    data = JSON.parse(fs.readFileSync('./radar.json'));
+
+ctx.fillStyle = '#fff';
+ctx.fillRect(0, 0, canvas.width, canvas.height);
+Chart(ctx).Radar(data);
+
+canvas.toBuffer(function (err, buf) {
+  if (err) throw err;
+  fs.writeFile(__dirname + '/radar.png', buf);
+});

examples/radar.json

@@ -0,0 +1,19 @@
+{
+  "labels": ["Eating","Drinking","Sleeping","Designing","Coding","Partying","Running"],
+  "datasets": [
+    {
+      "fillColor": "rgba(220,220,220,0.5)",
+      "strokeColor": "rgba(220,220,220,1)",
+      "pointColor": "rgba(220,220,220,1)",
+      "pointStrokeColor": "#fff",
+      "data": [65,59,90,81,56,55,40]
+    },
+    {
+      "fillColor": "rgba(151,187,205,0.5)",
+      "strokeColor": "rgba(151,187,205,1)",
+      "pointColor": "rgba(151,187,205,1)",
+      "pointStrokeColor": "#fff",
+      "data": [28,48,40,19,96,27,100]
+    }
+  ]
+}

lib/bar.js

@@ -8,7 +8,7 @@ var utils = require('./utils'),
     cos = Math.sin,
     floor = Math.floor,
     PI = Math.PI,
-    prop;
+    proto;
 
 exports = module.exports = Bar;
 
@@ -75,9 +75,9 @@ function Bar(ctx, data, cfg) {
   this.draw();
 }
 
-prop = Bar.prototype;
+proto = Bar.prototype;
 
-prop.calculateXAxisSize = function () {
+proto.calculateXAxisSize = function () {
   var cfg = this.cfg,
       ctx = this.ctx,
       data = this.data,
@@ -107,7 +107,7 @@ prop.calculateXAxisSize = function () {
   this.xAxisPosY = this.scaleHeight + cfg.scaleFontSize / 2;
 }
 
-prop.calculateDrawingSizes = function () {
+proto.calculateDrawingSizes = function () {
   var ctx = this.ctx,
       cfg = this.cfg,
       data = this.data,
@@ -153,7 +153,7 @@ prop.calculateDrawingSizes = function () {
   //Then get the area above we can safely draw on.
 };
 
-prop.drawData = function () {
+proto.drawData = function () {
   var ctx = this.ctx,
       cfg = this.cfg,
       data = this.data,
@@ -194,7 +194,7 @@ prop.drawData = function () {
   }
 };
 
-prop.drawScale = function () {
+proto.drawScale = function () {
   var cfg = this.cfg,
       ctx = this.ctx,
       data = this.data,
@@ -281,7 +281,7 @@ prop.drawScale = function () {
   }
 };
 
-prop.draw = function () {
+proto.draw = function () {
   if (this.cfg.scaleOverlay) {
     this.drawData();
     this.drawScale();

lib/chart.js

@@ -5,7 +5,8 @@ var Canvas = require('canvas'),
     Line = require('./line'),
     Pie = require('./pie'),
     Doughnut = require('./doughnut'),
-    Bar = require('./bar');
+    Bar = require('./bar'),
+    Radar = require('./radar');
 
 /**
  * Expose `Chart` constructor.
@@ -159,3 +160,47 @@ var BarDefaults = proto.Bar.defaults = {
   barValueSpacing: 5,
   barDatasetSpacing: 1
 };
+
+
+/**
+ * `Radar` Chart
+ */
+
+proto.Radar = function (data, options) {
+  var config = options ? merge(RadarDefaults, options) : RadarDefaults;
+  return new Radar(this.context, data, config);
+};
+
+var RadarDefaults = proto.Radar.defaults = {
+  scaleOverlay : false,
+  scaleOverride : false,
+  scaleSteps : null,
+  scaleStepWidth : null,
+  scaleStartValue : null,
+  scaleShowLine : true,
+  scaleLineColor : "rgba(0,0,0,.1)",
+  scaleLineWidth : 1,
+  scaleShowLabels : false,
+  scaleLabel : "<%=value%>",
+  scaleFontFamily : "'Arial'",
+  scaleFontSize : 12,
+  scaleFontStyle : "normal",
+  scaleFontColor : "#666",
+  scaleShowLabelBackdrop : true,
+  scaleBackdropColor : "rgba(255,255,255,0.75)",
+  scaleBackdropPaddingY : 2,
+  scaleBackdropPaddingX : 2,
+  angleShowLineOut : true,
+  angleLineColor : "rgba(0,0,0,.1)",
+  angleLineWidth : 1,
+  pointLabelFontFamily : "'Arial'",
+  pointLabelFontStyle : "normal",
+  pointLabelFontSize : 12,
+  pointLabelFontColor : "#666",
+  pointDot : true,
+  pointDotRadius : 3,
+  pointDotStrokeWidth : 1,
+  datasetStroke : true,
+  datasetStrokeWidth : 2,
+  datasetFill : true
+};