jagracar/grafica.js

A simple and configurable plotting library for p5.js

grafica.js

grafica.js is a simple and configurable plotting library for p5.js. It's the javaScript version of the grafica Processing library. With it you can easily create 2D plots that will enjoy the full interactive capabilities of Processing in the web.

Main features

• Make fancy scatter and linear plots that update in real time.
• Display histograms in the vertical and horizontal directions.
• Add several layers with different properties to the same plot.
• It works both with linear and logarithmic scales.
• Automatic axis tick determination.
• Interactive zooming and panning. Make your data move!
• Add labels to your points and display them with one click.
• You can use images to represent your points.
• Highly customizable. Defaults are nice, but you can tweak almost everything.
• Processing coding style. If you are used to work with Processing (or p5.js), grafica.js will be very easy.
• It comes with a good set of examples. Check them live at openprocessing and JSFiddle.
• It's open source. grafica.js is under the GNU Lesser General Public License. You can find the complete source code here.

Installation

Download the latest minified library release and follow the steps described here.

grafica.js's Issues

Any way to know which point the mouse is over?

As far as I can tell, there is no equivalent of GPlot.isOverBox that can tell me which point the user has moused over. I'd like to be able to update another plot depending on which point the mouse has hovered over last.

Uncaught TypeError: Cannot read property 'elt' of undefined

Hey, Jagracar :)

Thanks for the epic library, recently stumbled across it and I'm loving it!

I'm getting the following error when trying to run my script:
Uncaught TypeError: Cannot read property 'elt' of undefined at new GPlot (grafica.min.js:1)

I saw that it has come up in the past, and have updated my version of p5 and grafica, as it seemed to resolve the issue for others, but it hasn't helped.

Thanks for the help!

Typo in GPlot font properties

The font property setters have a typo that causes an exception when setting font properties.

GPlot.prototype.setFontName, GPlot.prototype.setFontColor, GPlot.prototype.setFontSize and GPlot.prototype.setFontProperties all reference a variable named maniLayer when they probably should reference mainLayer

Uncaught TypeError: Cannot read property of 'elt' of undefined

When I try to run one of the graphing example I get the following error in the console:

Uncaught TypeError: Cannot read property 'elt' of undefined
    at new GPlot (grafica.js:3462)
    at p5.p.setup (script.js:84)

Point labels at X axis

Hello there,

I'm trying to create a simple time serie plot, but I couldn't find how to show the datetimes in the X axis. I was wondering if I set the datetime to the label property would work, but it didn't work, the drawLabels() method only works to show the label when you click over the point.

is this possible?
I attached an example image.

Best regards.

Typo in GPlot setOuterDim function

this.layerList.lenght should be this.layerList.length

Due to this problem, the function does not pass the new dimensions to the layers. As a result, the plot does not update the layers correctly if it is resized after creation.

some suggestions for improvement

Hello jagracar,

first of all, thank you for this wonderful library. I really appreciate your work and hope that you will continue to develop it. I have often used it for my p5.js-projects and would like to continue doing so in the future. If you want, I can also show you some of my work.

While working with the library I noticed some weak spots and I mainly wanted to ask if you still support grafica.js. If so, I would give you all the details and if not, then excuse the disturbance.

I would be very happy to hear from you.
Regards,
Jaro

Bad link to OpenProcessing examples

This link in the README is dead:
http://www.openprocessing.org/collection/4807

Error with new version from 2018-1-27

I get error for 2d-plot:

Uncaught TypeError: Cannot read property 'elt' of undefined
at new GPlot (grafica.min.js:1)
at e.p.setup ((index):49)
at e. (p5.min.js:5)
at e. (p5.min.js:5)
at new e (p5.min.js:5)
at setup ((index):124)
at e. (p5.min.js:5)
at e. (p5.min.js:5)
at new e (p5.min.js:5)
at e (p5.min.js:4)

I rollback to version grafica-0.1.0.min.js