GDevelop-extensions New extension: <Chart>

Description

Chart provides a set of frequently used chart types, and customization options.

Create the following chart with shape painter:

Radar chart
Pie chart
Line chart
Bar chart vertical
Bar chart horizontal

example:

Prepare dataset

Dataset is a structure which contain 3 arrays. [name] array and [value] array is a must for all types of charts. [color] array is not necessary for radar chart and line chart.

[dataset] : type: structure (e.g. colorset) [name] : type: array ("name" is required) [0] : type: string (e.g. item1) [1] : type: string (e.g. item2)

[value] :  type: array
    [0] : type: number (e.g. 6)
    [1] : type: number (e.g. 10)
    
[color] :  type: array
    [0] : type: string (e.g. 0;63;92)
    [1] : type: string (e.g. 47;75;124)

*ShapePainter is set to NOT "clear the rendered image between each frame" to reduce lag. So not suggest to redraw every frame.

*Text object for label is linked to ShapePainter. "Take into account" when delete both object.

How to use the extension

add a shape painter object and text object. prepare a scene variable. (please copy from example scene as specitic structure is required)

put the shape painter in the scene in event, add action > general > Chart > Radar Chart assign all objects and dataset

other parameters are color, opacity, line width.

Checklist

[X] I've followed all of the best practices.
[X] I confirm that this extension can be integrated to this GitHub repository, distributed and MIT licensed.
[X] I am aware that the extension may be updated by anyone, and do not need my explicit consent to do so.

What tier of review do you aim for your extension?

Community (Unreviewed)

Example file

ChartExample.zip

Extension file

ChartExtension.zip

Mar 19 '24 20:03 github-actions[bot]

Hello @z900625 👋 Thank you for submitting this extension, I took a look at it, and it's really amazing and useful to make charts in GDevelop easily ! I noticed few things that require a fix: 1- All events/group events, in the extension must be expanded so the user who might take a look at the events won't get lost. 2- In each chart style (Beginning setup) group events, you are using the action (clear the rendered images between each frame) in every single frame (no condition), that is not required, you can set it once at the beginning of the scene, and that's it, no need to make it run every frame. 3- I know clearing the last render images is better for performance, but it's better to leave this option open for the user to choose from, I suggest making a Boolean parameter (Clear the rendered image between each frame), and set to YES by default, and like that, if the user wants to stop it, he can simply select No. 4- Please follow the extension best practices when naming your variables, for example: the variable __BarChartHorizontalNextBarY must be __Chart.BarChartHorizontalNextBarY same apply for all other variables.

Fix this issues and let me know, so I can merge this amazing extension ❤️

Mar 22 '24 12:03 VegeTato

Thank you for your submission.

A few things I notice from a quick check:

You can get the layer with BarChartHorizontalShapeObject.Layer() to avoid a parameter.
Have you considered to do a behavior?
- It would allow users to setup the style with properties which can have default values
- and only give data to be drawn through the action

3- I know clearing the last render images is better for performance, but it's better to leave this option open for the user to choose from, I suggest making a Boolean parameter (Clear the rendered image between each frame), and set to YES by default, and like that, if the user wants to stop it, he can simply select No.

I wouldn't add a parameter for it. Either:

you think users usually don't need to draw something else before the chart, it's fine to clear it
or they would have to call the clear action themselves.

2- In each chart style (Beginning setup) group events, you are using the action (clear the rendered images between each frame) in every single frame (no condition), that is not required, you can set it once at the beginning of the scene, and that's it, no need to make it run every frame.

Also, definitely keep the action that disables automatic clearing. What VegeTato suggested wouldn't work as nothing tell us the instance exists at the beginning of the scene.

Mar 22 '24 13:03 D8H

Hi VegeTato & D8H Thanks for the comment. Before i modify the code, I want to show my concept of how the chart is built.

1. Both shape and text should be unique for creating chart only. (So I am surprised that users may draw something else.) as I delete all related text objects and clear the image before update. When users add new data (e.g., from 5 items to 13 items) or update settings (like chart height), not just the chart graphic require clear and redraw. It may need more text objects to be create and reposition. The only way is to delete old stuff and recreate it based on new data and settings.

Clearing the last render images is not for performance. but old drawings may stay.

(My main concern is those text objects; I don't think deleting and creating them every frame is a good idea.)

So my thought is to suggest users. only run the extension once. In one frame. Everything created stays in place as the last frame is not cleared, and text stays in the same place.

The example scene does exactly that. Tragger once. Do nothing until the action calls again.

The chart itself draw like a rectangle. disables automatic clearing is to make sure users do not need to draw every frame.

If the user wants to update, They run the extension once again (also one frame only), delete old stuff, then redraw.

Consider the extension works like e-ink (kindle); only updates require calculations.

About behavior Default values are mostly color, opacity, and line width. should not be a big problem without deflaut. One thing I want to help user is about creating datasets (as it requires a specific structure, which user may have no idea), but using behavior would not allow scene variables and text objects as input.

new extension name will be apply. The .layer() thing will be added next time, thanks.

I know the concept may not be as consistent as normal. I need more advice to improve. thanks again.

Mar 22 '24 18:03 z900625

About behavior Default values are mostly color, opacity, and line width. should not be a big problem without deflaut. One thing I want to help user is about creating datasets (as it requires a specific structure, which user may have no idea), but using behavior would not allow scene variables and text objects as input.

You can have the same action in a behavior. The only difference will be that parameters for style will be properties. Parameters and properties can be used in expressions the exact same way with only their name (the same way as variables in the main events). You don't need to use GetArgumentAsNumber() nor Object.Behavior::PropertyMyPropert() any more.

Mar 22 '24 18:03 D8H

!update ChartExtension.zip

Mar 25 '24 17:03 z900625

❗ An internal error has occurred. See logs at https://github.com/GDevelopApp/GDevelop-extensions/actions/runs/8540831270.

Apr 03 '24 14:04 github-actions[bot]

sorry, no idea of what kind of internal error i made.

Apr 03 '24 15:04 z900625

Try the command with only ChartExtension.zip. I think it's only for the extension, but please continue to give the new example as it's what actually used by reviewers.

Apr 03 '24 15:04 D8H