Charts with Pixi.js

[psumstr]

Hello,

 

I'm in the data visualization field and I'm trying to see if I can leverage Pixi.js to create various charts that I've typically be created with SVG. 

Right now, I'm trying to create a bar chart with position and height changes as the data updates. I've been creating one PIXI.Graphics per bar and I'm updating the graphics width, height, and y positions when the data changes.

 

// This runs ones per bar

var rect = new PIXI.Graphics();

rect.beginFill(0x4682B4);

rect.drawRect(0, y, width, height);

doc.addChild(rect);

 

// When updating bars

rect.clear();

rect.beginFill(0x4682B4);

rect.drawRect(0, y, width, height);

 

My questions are:

1. If I'm planning to draw hundreds of bars, is Graphics the right object to use?

2. Can I use sprites if I'm going to have different fills, width, and heights for each bar?

 

I'm very new to PIXI, so I'm still trying to learn the API and figure what's the right set of objects to use for the job.

 

[Sebi]

For convenience reasons I would use a smal white texture on a sprite.

Then just set the width/height of that sprite and tint it in the color you want to use.

An Graphics objects is dead slow.

[psumstr]

For convenience reasons I would use a smal white texture on a sprite.

Then just set the width/height of that sprite and tint it in the color you want to use.

An Graphics objects is dead slow.

Thanks Sebastian, that makes sense. Any idea if I can apply the same concept but to circles, where I need to change the radius of the circle instead of the width/height? Not sure how to do that with Sprites.

[krishna]

Hi, are u successful with making charts using pixi ? i also have similar problem. i want to make a line plot. any hints on drawing axis with points like this d3 example: https://bl.ocks.org/mbostock/3883245 ?

Thank u,