Static and Dynamic data plotting with PieChart

Hi everyone. In this page I'm gonna show you how to quickly plot static and dynamic data using a PieChart. A few definitions:

• static data: data that do not change over time. This kind of data are represented by generic data files, .CSV files, and hard coded constant data structures
• dynamic data: data that change their values or structure over time, depending on different conditions. This kind of data are represented by arrays, pools, vectors that change their values or structures.

Let's go straight to the point and let's begin with our instructions. Let's assume that the plugins has already been installed and activated properly...

Contents

• Setup the scene
• Static Data plotting from Inspector
• • Static Data plotting from Code
• • Static Data plotting without a source file
• Customization
• Dynamic data plotting

Setup the scene

We are going to work with a PieChart, which is a Control type of Chart. So we are going to need a Control scene setup.

1. Set a Control node (or whatever inheriting Control node you like) as the root
   
2. Instance a PieChart using the "link" button in the top left
   
3. Click on the PieChart node you just added and inspect each property on the right
   

Static Data plotting from Inspector

To plot a static chart, we will fetch our data from a .csv file

1. Click on the "folder" button on the right of the field "source"
   
2. Look for the "pie.csv" file inside the addon folder (you can copy the path you see in the image)
   
3. change the delimiter to a single comma, and add change some other values as you like (colors, name, etc.)
   
4. Add a script to the Control root of our scene, and just call the function "plot()" on the PieChart node to plot the data contained in the source
   
5. Save the scene and press F5 or F6
   

Static data plotting from Code

(optional) if you need to plot data from a file you still need to create within godot, or an external software, or you need to set the source within code, you can always plot charts using specific functions.
Let's plot a chart without changing values in the inspector, but just from code...

1. Replace the function "plot()" with the function "plot_from_csv()" which wants two parameters: (1) the path to the source file and (2) the delimiter
   

Static data plotting without a source file

(optional) if you are going to create data at runtime but don't want to store them, creating a file just to plot this data is not that useful.
Let's plot some data using hardcoded data structures.

1. Clean up the script of the Control root, create a simple data structure (an Array of Array), and add some data at your choice
2. Replace the "plot()" funciton with the "plot_from_array()" function which takes as an argument the data structure
   

Customize the scene, add a Legend

If you want to take screenshots of your chart or display additional informations, a legend is a very professional and clean way to do this.
When a chart is plotted, a Legend is created, which basically is an Array containing LegendElements (which are custom VBoxContainer s).

1. Add a VBoxContainer (or a HBoxContainer, or a Control node at your choice) to handle and contain the Legend
   
2. Connect the signal emitted from the chart when is plotted to a function
3. Clear out the container (it will be always empty if you run the scene, but if the scene is used several times the legend will just append)
4. Get the Legend generated by the chart as an Array
5. Iterate over the LegendElements inside the Legend, and add each of them in the box holding the legend itself
   

Dynamic data plotting

Dynamic data plotting can be done from code, and it is as easy as plotting static data. You just need to implement your own methods to fetch real time updated data

1. Add a timer to your scene: this will help us simulate real time data fetching
   
2. Connect the "timeout" signal of the Timer to the script attached to the root node
   
3. Set the Timer's "autostart" property to "true", and change the waiting time as you wish
   
4. Add a "random_generator" variable to create random generated numbers, and an iterator "i" variable. Increment the iterator inside the "timeout" callback function, and use the random generator to generate random data. Use these values to create a new entry for our data structure (which is an Array of Array). To append these new data to the data already plotted, just call the "update_plot_data" on our PieChart, which a function that takes as argument a new entry for the data structure, and appends it to draw it.
   
5. Complete code + final result!