Graphs and Charts

Feature Suggestions
1

Hey,

I’d really like to be able to have some graphs in my app, even if it’s just the main ones, i.e: Bar, line, pie.

Right now making any graph in Fuse is really difficult, aside from pie because it’s just percentages of angles. Bar graphs can be done by using rectangles, and if you’re really patient, you can make a line graph by plotting rectangles and rotating them.

But these solutions are pretty bad it takes a lot of work to make a decent looking graph.

Are there any solutions (and hopefully examples) of using somethins like chartjs.org or some actual pure-ux graph?

It’d be really nice to have built-in Fuse graphs, I realise graphs aren’t an integral part of UI, they’re not even part of vanilla Android or iOS, but they’re so important in so many apps that I think it makes sense to have them.

Thanks

2

At this point we do not have capacity to write and maintain a charting library. But we will try to help the community to get the components they need to build such a thing. See this post https://www.fusetools.com/community/forums/feature_requests/linestrip_and_line_primitives_for_line_charts?page=1

3

Hi,

Instead of creating a few rigid, high level charting controls directly, Fuse’s approach to charting will be based on gradually adding more primitives that can be used to build highly customizeable charts. Circles (including pie segments) and rectangles is what’s supported currently. We have several other primitives planned (line, line strip).

Once the primtives are in place, we imagine the fuse package manager will be filled by community packages that provide more complete, ready to use charting components, based on the primtitives.

Providing ready to use charts implies making a lot of design choices, freezing a lot of stuff you’d might want to customize, animate etc. This is why we think a one size fits all charting library built into Fuse is a bad idea. Instead, general purpose building blocks + community driven high level component gallery that can be reused or forked and tweaked is a good idea. Unfortuntately it will take some time before we get there, though :slight_smile:

4

Sounds great, thanks for the input

5

For the time you could use the Fuse-Example: Attractor as a base and modify it a bit:

file
n0eLiaTC8jNo-legacy-files-IJk8mY0eMNgtWVGV-X_scnwjLbzffUUmzPW3PDKMq.gif448×795

You might want to set the horizontal (xdist) and vertical (ydist) distance between the two points as variable to calculate the proper degree of rotation (rotDeg):

rotDeg = tan-1 (xdist/ydist)

EDIT: -.- <sup>does work in post-preview but not in real post xD:

rotDeg = tan^(-1)(xdist/ydist)

Perhaps you also want to adjust the length of the line (lenlin):

lenlin = √(xdist2 + ydist2)

EDIT: -.- <sup>does work in post-preview but not in real post xD:

lenlin = √(xdist^2 + ydist^2)

And last but not least, you might want to set the proper easing.

Alltogether inside an <Each> (for each gap between 2 points) and you could use it as a Class or Component, which reads point-datas and create a Chart for you :wink:

Hope it help a bit

Cheers Blade

6

Is Charts.js an option at all? If so, how would one go about and getting it displayed in a panel?

7

We know of people who have used some standard charting libraries and used them in a WebView.