Hey @andreaferretti, I think it would be really nice if users could define a circular arc with a slightly simplified api:

.arcCircular(xCenter, yCenter, r, sAngle, eAngle, counterclockwise)

This api mirrors the canvas arc api and I think it is a lot more straightforward for this particular use case.
http://www.w3schools.com/tags/canvas_arc.asp

What do you think?

I'd be happy to try to implement it myself, but am a little confused as to whether I should be modifying the path.coffee file or the one under the node dir?

Thanks for the great library!

When dragging nodes in the graph, after a while it produces this error in barnes_hut.coffee at line 36 where root is undefined.

path-js works great, most of the time, for me. But when I end up with data for only one slice (i.e. 100% of the data), the slice is not drawn.

If I set a stroke color I can see that only the line from center to perimeter (radius) is drawn. Is there any properties I have forgot to set? Otherwise it seems like some kind of bug where a full circle (360 degrees) become a null circle (0 degrees).

This is in reference to this issue with react-native-pathjs-charts.

For I've only tested the example Bar chart but was able to trace it back to the Bar object from the paths-js library.

The example Bar chart located here. The values in the data array were all changed to 0, resulting in a similar error to the one provided in the issue above.

Hi Andrea,
how about allowing to have a third accessor? like zaccessor, so when we do line.path.points(), we have arrays of 3 coordinates (x,y and z) and z can be assigned to the r parameter, so from a scatter plot charts we can also do bubble charts?

or change accessors to be an object, so it can be extended to more than 2 accessors? but i can guess that would be a breaking change.
Cheers

What would be the best way to offset the bar chart before printing it?

var offset = 100;

var chart = Bar({
	data: [...],
	width: 400,
	height: 400,
	// --> offset: [100, 100]
});

chart.curves.forEach( function(curve, index) {
	console.log( curve.line.path.print() )
});

// The log outputs something like this
// M 46 84...
// M 93 56...

// but what I need is the offset (100) added to M:
// M 146 184...
// M 193 156...

I used center for Pie charts which seemed to work fine but I'm not sure how this would be done with Bar.

I have two question:

• What polyfills are required for this script to run? Would my minifill cover the needs for paths.js?
• Does this script generate path for given SVG elements that don't have it? Like below?

<path d="M 100 100 L 300 100 L 200 300 z" fill="red" stroke="blue" stroke-width="3" />

Thanks so much.

Is there a way to connect multiple Paths without drawing a line between them, using the low-level API? I want to draw a hole within the bounding shape. I can do this by simply drawing the first shape, than using .moveto() to move to a different location and drawing the second path. But I can't seem to draw two separate Paths and then connect them, without the low-level API drawing a line between the shapes.

Hi,

Just wonder if it's possible to use Paths JS Shape API to draw a couter-clockwise Sector? Something like this

I'm working in a application on angularjs. and when I type this code var Pie = require('paths/pie'); I get the javascript error. "ReferenceError: require is not defined", Why?

Hey there, I'm trying to draw a Sector (represented by the blue highlight here) with

startAngle: 2.2244817547157543
endAngle: 1.6781178149610074

in a clockwise direction. Unfortunately this is what I'm ending up with currently when passing in those angles to the command:

Ideally the blue highlight would loop around the whole circle, but it seems like I can't draw a sector that passes through the 0-angle right now?

Is there a way to achieve this? If not, maybe a clockwise flag could be added to allow for it?

Desired output:

Thank you

Steps to reproduce:

var path = Path()
  .moveto(10, 20)
  .vlineto(30, 50)
  .hlineto(25, 28)
  .qcurveto(27, 30, 32, 27)
  .translate(10, 10)
  .closepath();

Exception:

      x: point.x * matrix[0] + point.y * matrix[2] + matrix[4],
                         ^

TypeError: Cannot read property '0' of undefined
    at C:\dev\sandbox\paths-js\dist\node\geom.js:73:26

Heya. Firstly, rad library, I'm really enjoying it. Is there an easy way to supply a max-width for individual columns in the waterfall and bar charts? My problem is if I have only 2 data points for a waterfall, but the graph is the width of 1200px, those columns are really wide. I could reduce the size of the graph - but it's a dynamic graph that could have over 20 columns.

For example, it currently might look like this:

If i could supply it a max column width, to look like this:

Any ideas? Thanks!

Hi there I'm using paths-js version 0.3.5 and I'm having issues with Bezier curves. Anytime I try to generate a curve either though a SmothCurve graph or directly using the Bezier function, I get an error. Here is a way to reproduce the error.

> var Bezier = require('paths-js/bezier');
undefined
> Bezier({points: [[97,219],[119.69932031054931,198.5]]})
TypeError: Cannot read property '0' of undefined
    at Object.module.exports.minus (node_modules/paths-js/ops.js:38:13)
    at module.exports.reflect (node_modules/paths-js/bezier.js:14:14)
    at node_modules/paths-js/bezier.js:27:41
> Bezier({points: [[0,0],[1,1]]})
TypeError: Cannot read property '0' of undefined
  [snip]

As you can see, even the simple example going from (0,0) to (1,1) errors out. Is there something I'm doing wrong here?

It seems that the global build using require.js and concatenating almond.js at the beginning creates incompatibilities with other libraries.

For instance the following gives an error in the console and fails to load Ractive globally

<!doctype html>
<html>
  <head>
    <title>Pathjs</title>  </head>
  <body>
    <script src='js/paths.js'></script>
    <script src='js/Ractive.js'></script>
  </body>
</html>

athough inverting the order of dependencies does work

The documentation could really use some minimal working code snippets. How do you convert the Path() object into an actual svg element?

Edit: never mind, I just somehow scrolled past that part of the docs. Still, it would be nice to emphasize it more (e.g. with a "Getting started" header).

I was wondering the "dual tree" described in this video can be achieved with paths-js? The challenge I believe in this graph is the placement of various nodes (person) to represent a tree. Is the Forced Directed Graph aimed for this type of drawing?

This library doesn't have support for Typescript's type definitions, right?

Is it planned to add those?

I don't see any community-provided typings on DefinitelyTyped

Hi, Is there a way to make a tree chart populate vertically rather than horizontally?

I want to pass offsets to the bar graph constructor (xOffset for placing Y-axis, yOffset for placing text on top of the bar), but don't see anything in bar.coffee for doing so.

Hi, i'm wondering if you're thought about porting to Vue.js.

• very similar to Ractive.
• well supported, low issue count.
• very popular:
  • Vuejs: 28,000+ stars on github
  • Ractive: around 5,000
  • Angular: around 16,000
  • React: around 49,000

Dave

I do have a requirement of sending an email based on a template (using handlebars) which should show a chart in it. I am planning to use Path.js as the main README says that I can use this library on server side too. But I am clueless about how can I use it on server side. Can you provide some guidance or route to get it done?

I like the fact that it is pretty lightweight and can go low-level. Have you tried using it with the Mithril MVC framework? (http://lhorie.github.io/mithril/index.html) It is pretty lightweight too, I believe the two would combine well.

So, according to the documentation, Stock.curves returns a collection of curves, "each having the properties line, area, item and index. [...] Under item one finds the original element in the data."

The problem is that this implies that each curve is associated with a singular item, despite the fact that the curve is dependent on a series of items. This is formalized in the explicitly typed scala.js documentation. Where the type of StockCurve[A].item is A rather than Array[A]

This is inspite of the fact the .item actually returns an array, leading to a runtime error when treating item like an A.

Would you support horizontal bar chart? This chart is good for anything related to progress tracking.

I have included path-js on slant to raise awareness of your library:
http://www.slant.co/topics/28/~what-are-the-best-javascript-drawing-libraries

The Stock API calculates NaN for the line.centroid[1]

I pass in the following to pathsjs.Stock({
data: [
{
"date": new Date("2015-01-09T07:00:00.000Z"),
"netPay": 200.45
},
{
"date": new Date("2015-01-23T07:00:00.000Z"),
"netPay": 200.45
},
{
"date": new Date("2015-02-06T07:00:00.000Z"),
"netPay": 200.45
},
{
"date": new Date("2015-02-20T07:00:00.000Z"),
"netPay": 200.45
},
{
"date": new Date("2015-03-06T07:00:00.000Z"),
"netPay": 200.45
}
],
xaccessor: function(x) {return x.date.valueOf();},
yaccessor: function(x){x.netPay;),
width: 414,
height: 80
})

The resulting paths.curves[0].line.centroid[0] is 207 and paths.curves[0].line.centroid[0] is NaN

Hi,

thanks for the awesome lib, I'm using scala version path.js. I was wondering if there is a way to put graph layout algorithms into path.js highlevel api. something like dager.js or so. I would appreciate your idea about the best way to this using path-scala-js.

thanks

Using paths.js global version (hence without require.js) together with Ractive, it appears to happen a race condition causing a ReferenceError.

<script src='js/paths.js'></script>
<script src='js/Ractive.js'></script>
<script src='js/test.js'></script>

Then in test.js

var ractive = new Ractive({
      el: 'pie',
      template: '#myTemplate',
      data: {
          Pie: paths.Pie,
      }
...
});

causes a ReferenceError on paths in the expression paths.Pie

Tested on both Chrome and Safari.
Checking in the developer console, after loading paths appears correctly defined

Babel changed quite a bit from 5 to 6 (babel-cli, transform-plugins-modules, just to mention a few of the changes).

We should probably find the time to upgrade the build and possibly remove browserify.

When i try to use the dist/global/paths.js i get Uncaught ReferenceError: path is not defined.
You can see a simple demo going to https://jsfiddle.net/aqmh3eax/ and opening developer tools.

It uses a script that is loaded using rawgit. More info about linkning raw github files from jsfiddle

I noticed there's an offset for Bar but not for the rest of the charts. It would be nice to have an offset for Pie, Smooth Line, etc as well.

Hi,

I'm trying to make React Isomorphic app with charts rendering using Paths. However there is diffrent output from calculations done by browser and server side. The only reason I can think of it is that server side and browser side are using diffrent Number bit resolution (32bit vs 64bit). React tells me about diffrence between serverside markup and browser markup.

This one is using smoothline source code from http://andreaferretti.github.io/paths-js-react-demo/

(client) 556554 C 1.2368633799195998 317.72517853
(server) 556554 C 1.2368633791238002 317.72517853

However even with simpler one (using Stock example from wiki) I have diffrent results

(client) ath d="M 0 180 L 155 200 L 300 140" fill
(server) ath d="M 0 180 L 155.00000002797069 200

Server is on IOJS 1.7.2 and Browser is Chrome 41

Maybe it would be enough to add some number rounding somewhere where you do calculations?

Hi, let's say I have the following set of data:

var data = [{year: 2008, val: 7.2},
{year: 2009, val: 8.1},
{year: 2010, val: 7.7},
{year: 2011, val: 6.8},
{year: 2012, val: 6.7}]

If I use data as parameter for a Stock chart for instance, with year on the x-axis and val on the y-axis, by default when using the Stock chart, paths-js scales automatically using the maximum value of val for y.
Is there a way to use a different scale, for instance [0,15] so the values appear more in the middle of the chart instead of the top? Is there a method for it? Thx

The stock graph function is written in a way which prevents the drawing of a step chart.

I've been fiddling with drawing a step chart for the better part of the evening, and I finally found why it wouldn't render correctly.

In src/line-chart-comp.js on line 8
let sorted = points.sort(([a, b], [c, d]) => a - c)
This sorts the data by x (presumably so that if unsorted data gets passed in, it renders as expected). If I want to draw a step chart, I'm going to have to add in multiple points with the same x, which might change index after an unstable sort. As a result, the points of a step in the step chart would be connected out of order.

For example, these are the points the library generates.

1. [0, 200]

2. [34.1747572815534, 200]

3. [34.1747572815534, 0]

4. [43.49514563106796, 200]

5. [43.49514563106796, 0]

6. and 5. were swapped by the unstable sort. In my original data they were in the reversed position. If you chart these points you wouldn't get a step chart, but if you swapped 4. and 5., you would.

I suppose removing the sort at this point would be a breaking change, but how about adding an option?

dist/global/paths.js is broken for the last couple of releases (at least until 0.3.3 -- didn't check earlier). Latest commit fixes the issue but there's been no release incorporating it so far. It'd be wonderful if you released a new version with the fix.

Hey, I just noticed that the npm package still has the old package.json without the main entry.

Originally posted by @HarunOr in #57 (comment)

We're currently using a library that depends on paths-js and transpiling to ES5 (don't ask) using Babel and webpack. This gives an error in npm reporting "Module not found, can't resolve paths-js." This is because webpack expects the default entry to be index.js, but the entry to paths-js is all.js.

This can be solved by adding a line to the package.json "main": "./all.js". I'm unsure if this will break a more typical use case, but I can't see why it would.