Raphael Radar is a JavaScript library to draw a controlable radar chart using Raphael.js, a JavaScript library to draw SVG
Switch branches/tags
Nothing to show
Clone or download
Pull request Compare This branch is 14 commits ahead of jsoma:master.



hakobera/raphael-radar is a refactored version of Raphael-Radar

Screen Shot

The objectives of refactoring are...

  • Work with the latest version of Raphaël 2.1.0 and jQuery 1.7.2.
  • Fix some bugs.
  • Remove unnessesary code from the library and put the idea into example.
  • Make the code simpler.
  • Add ruler label
  • Add event example.

Please note that there is no compatibility with the original version.


Live Demo

Raphael-Radar now has the option to maintain all content & style options through the objects passed to radarchart, instead of using a separate 'scores' array or manually manipulating the Raphaël chart.

Style options are maintained through the draw_options object. See default_draw_options in raphael-radar.js for defaults. All attributes are passed directly to Raphaël via attr() so you can set pretty much whatever attributes you'd like on lines, points and text.

The following chart can be created using the code below it, and you no longer need to edit the lines and points manually.

Screen Shot

var objects = [
    { title: "Real Madrid C.F.", 
      offense: 80,
      defense: 90,
      technique: 70,
      strategy: 90,
      physicality: 70,
      mentality: 60,
      draw_options: {
        lines: {'stroke-width':'2', 'stroke':'#39b549','stroke-dasharray':'- '},
        points: {'fill':'#39b549','stroke-width':'0'},
        text: {}
    { title: "FC Barcelona", 
      offense: 100,
      defense: 70,
      technique: 100,
      strategy: 70,
      physicality: 60,
      mentality: 80,
      draw_options: {
        lines: {'stroke-width':'4','stroke':'#0070bb','stroke-opacity':0.7,'fill':'#f7d2a8','fill-opacity':0.6},
        points: {'fill':'#f05a23','stroke-width':'1.5','stroke':'#333', 'size': 6},
        text: {}

var paper = Raphael( "id_of_some_div", 460, 360);
paper.radarchart(221, 160, 120, labels, 50, 100, objects);

Seeing example is always the best way to understand how it works.