Relintai/pandemonium_engine_easy_charts
1
0
Fork 0
mirror of https://github.com/Relintai/pandemonium_engine_easy_charts.git synced 2024-11-14 10:17:24 +01:00
Code Issues Packages Projects Releases Wiki Activity

Update README.md

Browse Source
This commit is contained in:
Nicolò Santilio 2020-11-25 14:13:09 +01:00 committed by GitHub
parent 4cddd3362c
commit ba06a9f499
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 2 additions and 95 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

95
README.md
View File

@ -28,100 +28,7 @@ If you need to plot a chart with some values in it and just take a screenshot, o
## How does it work? ## How does it work?
*Easy Charts* contains a collection of nodes for each main node in Godot: Control Nodes, 2D Nodes and 3D Spatials. *Easy Charts* contains a collection of nodes for each main node in Godot: Control Nodes, 2D Nodes and 3D Spatials.
To plot a chart you only need to: _tutorials and exmaple will be added in the wiki..._
1. Save in your project a .CSV file containing the table of values you want to represent, just like the following one:
![example1](imgs/EXCEL_mWtvuI90D0.png)
or, of course, the inverted one:
![example2](imgs/EXCEL_Fa2iiie9qC.png)
2. In Godot, choose a Chart you'd like to plot. For istance, let's take a BarChart2D, specifically used to plot chart in a Node2D. You can instance it as a Child Scene or drag it from the Explorer:
![example3](imgs/scene1.png)
![example4](imgs/scene2.png)
3. Once in the tree, move it around as a normal Node, and set it's values directly in editor, like so:
![example5](imgs/editor_gif.gif)
You can directly select the file you want to plot from the editor, and change its values as you prefer. Most of the features will be displayed in real time in Editor while you are editing them.
4. With just one line of code, you will be able to plot the chart. Use the line of code `$BarChart2D.plot()` to plot the chart with the properties edited in the editor.
![code1](imgs/code.png)
Running the project like this, will produce this chart:
![example6](imgs/chart_gif.gif)
5. Moving the cursor around you will be able to see a floating box with the values contained in the chart:
![example7](imgs/values.gif)
## Chart Tools
Chart Tools are a set of utilities parallel to the plot itself.
![signals](imgs/signals.png)
Available Chart Tools are:
- *Legend Output*: once a chart is plotted, you can get an output legend connecting the right signal, or just using custom functions. A legend is a simple `Array` of custom Control nodes, which contains informations about the chart for each function plotted.
Once plotted, the chart will emit a custom `chart_plotted( chart )` signal. To get the legend, you just can connect this signal, or use the `get_legend` functions afterwards. A `legend` variable can then be used to print out or represent in a full customizable way the legend of functions. For example, these lines of codes:
![code1](imgs/legend_code.png)
![tree1](imgs/tree_legend.png)
You can get this result:
![debug](imgs/debug_legend.png)
![editor2](imgs/editor_legend.png)
- *Point Value*: as you can see, each chart is pretty much interactable, giving you the opportunity to visualize the point represented with hovering it with your mouse. But what if you want to use its values for your own purposes? No problem, with the use of the signal `point_pressed ( point : Point )` you will be able to get all the informations about a point you clicked on in the chart.
![codep](imgs/code_point.png)
![debug1](imgs/debug_point.png)
### Table of features
**Chart**
| Function | Description |
| ------------- | ------------- |
|`plot()`|Plot the selected chart with in editor properties|
|`plot_from_csv(csv_file : String, _delimiter : String = delimiter)`|Plot the selected chart defining the source and delimiter from code|
|`plot_from_array(array : Array)`|Plot the selected chart giving an Array of values as a source|
|`update_plot_data(array : Array)`|Update plot data giving an additional entry to the source|
|`get_legend()`|Get the legend of the current chart. Returns an **Array** containing control nodes, which can be added as children |
|*API v2*|*additional functions to define chart's properties from code. Hardcoded properties will overwrite the ones given from editor*|
|`set_chart_name(ch_name : String)`|Set the displayed name of the chart|
|`set_source(source_file : String)`|Set the source of the chart to plot|
|`set_delimiter(delimiter : String)`|Set the delimiter to read data from a CSV file|
|`set_indexes(lb : int = 0, function_names : int = 0)`|Set the optional indexes of chart's data|
|`set_radius(use_height : bool = false, f : float = 0)`|Set the radius of the chart, if it is required. If `use_height` is true, the height of the chart will be used.|
|`set_chart_colors(f_colors : PoolColorArray, o_color : Color, b_color : Color, g_color : Color, h_lines : Color, v_lines : Color)`|Set the colors of the chart|
|`set_chart_fonts(normal_font : Font, bold_font : Font, f_color : Color = Color.white)`|Set fonts and font's color for the chart|
|`set_source(source_file : String)`|Set the source of the chart to plot|
| Signals | Description |
| ------------- | ------------- |
|`chart_plotted(chart : Node)`|Returns the plotted Chart, which is a Node (Control, 2D Node, 3D Node)|
|`point_pressed(point : Point)`|Returns the point pressed with Left Click, which is a custom class *Point*|
**Legend**
| Function | Description |
| ------------- | ------------- |
|`get_function() -> Array`|Get the function's name, also visible in legend|
|`get_function_color() -> Color`|Get the function's color, also visible in legend|
**Point**
| Function | Description |
| ------------- | ------------- |
|`get_value() -> Array`|Get the point values, which are mapped coordinates in the plot. Returns a 2D array, with [0] and [1] as x and y values|
|`get_function() -> String`|Get the point's function name, also visible in legend and chart|
|`get_color_point() -> Color`|Get the point Color, also visible in legend and chart|
**About templates**
Templates are defined in a .json file, and the format is pretty straight forward.
However, adding custom templates is not yet recommended, since it would require to edit the Charts scripts. Templates are anyway accessible and customizable.
```
/addons/easy_charts/templates.json
"default":
{
"function_colors" : ["#1e1e1e","#1e1e1e","#1e1e1e","#1e1e1e"],
"v_lines_color" : "#cacaca",
"h_lines_color" : "#cacaca",
"outline_color" : "#1e1e1e",
"font_color" : "#1e1e1e"
},
```
# Available Charts and when to use them # Available Charts and when to use them
This library offers a set of charts for each main Godot Node: This library offers a set of charts for each main Godot Node: