alangrafu / radar-chart-d3 Goto Github PK

Is there an existing method for updating data, and transitioning the SVG polygon to the new position? Thanks!

you do nice job!
In my opinion , I would add svg margin config so that the text wouldn't be hidden when overflow.
radar-chart.js line 69: return (p < 0.4) ? "start" : ((p > 0.6) ? "end" : "middle");
should be: return (p < 0.4) ? "end" : ((p > 0.6) ? "start" : "middle");
forgive my poor english and doesn't express my thounght clearly.

Great code!

Do you have any plans to add a "range" function into the Radar charts like the screenshot below?

Cheers
Tim

After last commit I have that error in console. I using that as a bower dependancy so I thing that will be nice to check if module exists.

Can you please tell me how to import it in angular 4 project, inside any .ts file ?

also, its not suppoting latest D3 js i.e. d3.v4.min.js, its throws lots of error with this d3 version !! could you please help ?

I noticed this chart did not support the dynamically redraw. Can you give some suggestion about how to implement this?

First of all, thanks, your lib is great.
I'd like to know if it is possible to add a custom label on mouseover.

Taking an example, it would be :

d = [
     [
           {axis: "strength", value: 13, mylabel: "Congratulations"}, 
           {axis: "intelligence", value: 1, mylabel: "So bad"}, 
           {axis: "charisma", value: 8, mylabel: "Not that bad"},  
           {axis: "dexterity", value: 4, mylabel: "Some efforts are needed"},  
           {axis: "luck", value: 9, mylabel: "Not that bad"}
          ]
];

Is that possible? On the roadmap ? Easy to implement ?

Thanks for your reply

Hi, i found a little issue:
if all data points are = 0 , the points are misplaced (top left corner instead of the center of the chart

you can take a look here:
http://jsfiddle.net/Max_S/uEJh3/

if at least 1 point is !=0 then everything works.

Thank you!

If the order of elements in data.axes differs (i.e. strength and luck are swapped in data[0] relative to data[1]), the rendered radar chart is inaccurate (order is taken into account over the axis specification, and the order that is used is that of the first element, data[0] in this case). Either the documentation should change to say that you must consistently sort your axes, or this is a bug. I can submit a reproduced bug, but this description should suffice as its pretty straightforward.

var data = [
  {
    className: 'germany', // optional can be used for styling
    axes: [
      {axis: "luck", value: 2}
      {axis: "intelligence", value: 6}, 
      {axis: "charisma", value: 5},  
      {axis: "dexterity", value: 9},  
      {axis: "strength", value: 13}, 
    ]
  },
  {
    className: 'argentina',
    axes: [
      {axis: "strength", value: 6}, 
      {axis: "intelligence", value: 7}, 
      {axis: "charisma", value: 10},  
      {axis: "dexterity", value: 13},  
      {axis: "luck", value: 9}
    ]
  }
];

Thanks for an excellent library! I really appreciate it. Hope my comment is able to help you improve it.

Hi -
The current code causes new tooltip elements to be added each time radar is called. You can see in this plunkr:
http://plnkr.co/edit/wDoj5doV6pf5ic1GaKYg?p=preview

Additionally, the tooltip positions do not take into account the svg page offset. I'm going to try and fix this - if I do, I'll make a PR. Any guidance would be appreciated.

Thanks!

Is there the possibility to make it run also on IE (9) ?

With ie9 the example page don't work at all, and on my website my chart (just 1 series of 5 points) has only the dots and not the filled line.... while in chrome it's ok

with the developer tools the console error message on my website is
SVG4602: SVG Path data has incorrect format and could not be completely parsed (i translated it in english,it was " SVG4602: Impossibile analizzare completamente l'elenco di punti SVG perché ha un formato non corretto." , but searching the original italian language message or its error code in google doesn't find anything)

for information, my code is:

<div id="level">

  <div id="chart" style="width:200px;height:200px;"></div>
<script src="{T_THEME_PATH}/d3/d3.min.js"></script>
<script src="{T_THEME_PATH}/radar/radar-chart-min.js"></script>
</div>
<script>
var d = [
          [
           {axis: "strength", value: 5}, 
           {axis: "intelligence", value: 4}, 
           {axis: "charisma", value: 3},  
           {axis: "dexterity", value: 2},  
           {axis: "luck", value: 1}
          ]
        ];

var options = { w:200, h:200};

RadarChart.draw("#chart", d, options);
</script>

However, good job!

More info: if you put the document in "ie9 standard mode", from the ie9 shift-F12 dev console , also the example page http://graves.cl/radar-chart-d3/ behaves like my web page, in both errors and visualization).

http://jsfiddle.net/fusioncharts/64v13yyy/

By using this created rader chart but need to drag and if used draggble but after drage it is going to minus x and y axis need restrict to minus axis and after node click it should link to left and right node

Is it possible to create tags for every version release? Without tags it is not possible to define a specific version in bower when trying to install this repo.

I reuse this radar chart implementation in one of my projects, but every time I update/install the bower dependencies, the latest changes of this repo are fetched and I must (eventually) adopt my code to those changes. With tags and releases I could implement against a strict version and can decide on myself when to upgrade to the next version.

Is it possible to change the data by click the point , so that I can change the shape of the polygon.

Would you consider adding labels to indicate the levels as a feature to radar-chart?
The example is seen here: http://bl.ocks.org/nbremer/6506614

I find this a big visual improvement for radar chart.

Thanks for this awesome lib,
I'd like to show all the point values by default instead of only showing them when hovering.
I've been searching through the code and looked online for suggestions but cannot find anything.

Can you just point me towards the location of where this would be modified for my use?

Thanks in advance!

Is there a way to custom the hoverover event for the nodes?
e.g. hover a node to show html tooltip with clickable links

thanks,
Lucy

Hi,
In console(Only in IE 9 ),
here is the error infomation :

SCRIPT87: Invalid argument.
d3.v3.min.js, line 2 character 28443

More detail :
wa.setProperty=function(n,t,e){Sa.call(this,n,t+"",e)}}

this funcition throws this error.

Could you help me to check this problem ?

Thank you very much for your time!

Steven Lee

Hey, maintainer(s) of alangrafu/radar-chart-d3!

We at VersionEye are working hard to keep up the quality of the bower's registry.

We just finished our initial analysis of the quality of the Bower.io registry:

7530 - registered packages, 224 of them doesnt exists anymore;

We analysed 7306 existing packages and 1070 of them don't have bower.json on the master branch ( that's where a Bower client pulls a data ).

Sadly, your library alangrafu/radar-chart-d3 is one of them.

Can you spare 15 minutes to help us to make Bower better?

Just add a new file bower.json and change attributes.

{
  "name": "alangrafu/radar-chart-d3",
  "version": "1.0.0",
  "main": "path/to/main.css",
  "description": "please add it",
  "license": "Eclipse",
  "ignore": [
    ".jshintrc",
    "**/*.txt"
  ],
  "dependencies": {
    "<dependency_name>": "<semantic_version>",
    "<dependency_name>": "<Local_folder>",
    "<dependency_name>": "<package>"
  },
  "devDependencies": {
    "<test-framework-name>": "<version>"
  }
}

Read more about bower.json on the official spefication and nodejs semver library has great examples of proper versioning.

NB! Please validate your bower.json with jsonlint before commiting your updates.

Thank you!

Timo,
twitter: @versioneye
email: [email protected]
VersionEye - no more legacy software!

page at https://graves.cl/radar-chart-d3/ doesn't work.. missing d3 dependency.

I adjust the size of radar chart when the label text hideen by the svg edge.How to custermize each point (dx ,dy)? Could you give me a sample code list?Thanks a lot.