# Unity GUI Chart Editor This plugin allows to plot both point-by-point-defined and delegate-defined function charts either on a texture or on a custom inspector. An example of what this plugin can do is given in this picture, which shows a chart on the inspector: ![Inspector Example](https://github.com/alessandroTironi/UnityGUIChartEditor/raw/master/doc/FullExample.png?raw=true "Full Example") ## How to use it Each chart is defined between a GUIChartEditor.BeginChart() and a GUIChartEditor.EndChart(). Between these two invocations, you can use specific GUIChartEditor's static methods for drawing specific parts of the chart. ```csharp // Plots the f(x) = x^3 function in the editor. GUIChartEditor.BeginChart(10, 100, 100, 100, Color.black, GUIChartEditorOptions.ChartBounds(-0.5f, 1.5f, -0.25f, 1.25f), GUIChartEditorOptions.SetOrigin(ChartOrigins.BottomLeft) ); GUIChartEditor.PushFunction(x => x * x * x, -0.5f, 1.5f, Color.green); GUIChartEditor.EndChart(); ``` The GUIChartEditor.BeginChart method requires to specify either a Rect or the 4-ple (minWidth, maxWidth, minHeight, maxHeight), a background color and a list of ChartOptions. The second choice is possible only when drawing on the inspector, since the chart editor will automatically compute the best fitting Rect with the given features. Chart options will be covered in the next paragraphs. ### Plotting a function The method GUIChartEditor.PushFunction(ChartFunction f, float min, float max, Color functionColor, float step = -1) allows to draw the function defined by f, which is a delegate that accepts a float as parameter and returns a float, in the [min, max] interval. The step parameter defines the sampling rate followed when plotting the chart. If it is left to -1, the function value will be computed at each pixel. ```csharp GUIChartEditor.PushFunction(x => x * x * x, -1f, 2f, Color.green); ``` ![Delegate Example](https://github.com/alessandroTironi/UnityGUIChartEditor/raw/master/doc/DelegateExample.png?raw=true "Delegate") ### Plotting a point-by-point function The method GUIChartEditor.PushLineChart(Vector2[] points, Color lineColor) allows to define a polygonal function point by point and plot it in the chart. ```csharp Vector2[] samples = new Vector2[] { new Vector2(0f, 0f), new Vector2(0.5f, 1f), new Vector2(1f, 0f) }; GUIChartEditor.PushLineChart(samples, Color.red); ``` ![Point-by-point Example](https://github.com/alessandroTironi/UnityGUIChartEditor/raw/master/doc/PointByPointExample.png?raw=true "Point-by-point") ### Plotting points Use the method GUIChartEditor.PushPoint(Vector2 point, Color pointColor) to draw just one point in the chart. ```csharp GUIChartEditor.PushPoint(new Vector2(0.5f, 0.5f), Color.red); GUIChartEditor.PushPoint(new Vector2(0.75f, 0.5f), Color.green); GUIChartEditor.PushPoint(new Vector2(1f, 1f), Color.yellow); ``` ![Point Example](https://github.com/alessandroTironi/UnityGUIChartEditor/raw/master/doc/PointExample.png?raw=true "Points") ### Adding numerical labels The method GUIChartEditor.PushValueLabel(float value, float x, float y, string floatFormat = "0.00") adds a label representing value in the (x,y) position. The float will be formatted according to the provided floatFormat. ```csharp GUIChartEditor.PushValueLabel(0.95f, 1f, 0.95f); GUIChartEditor.PushValueLabel(0.43f, 0.5f, 0.43f); ``` ![Labels Example](https://github.com/alessandroTironi/UnityGUIChartEditor/raw/master/doc/LabelsExample.png?raw=true "Labels") ## Available options If no options are defined, the PushX directives invoked after BeginChart will interpret coordinates in a top-left origin chart where one unit has the size of a pixel. To allow a more user-friendly plotting, you can use options. ### Defining chart bounds The GUIChartEditorOptions.ChartBounds(float minX, float maxX, float minY, float maxY) will define new bounds for the chart. From the application of this option, the next calls will expect coordinates in which the x is between minX and maxX and the y is between minY and maxY. This is useful if you do not want to work in pixel space. ### Changing the origin If you want to work in a bottom-left centered chart, where the Y grows upwards, use the option GUIChartEditorOptions.SetOrigin(ChartOrigins.BottomLeft). Otherwise, the Y of the chart will grow downwards. ### Showing axes The option GUIChartEditor.ShowAxes(Color axesColor) shows the chart axes. ### Showing the grid Use GUIChartEditorOptions.ShowGrid(float cellWidth, float cellHeight, Color gridColor, bool addLabels = false) to show a grid behind the chart axes (if present). You can set the size of the cells and mark addLabels as true if you want to show the values on the axes. ### Adding labels To add more numerical labels, use GUIChartEditorOptions.ShowLabels(string format, params float[] labels), which will add new labels with the provided format. labels is a float array whose size must be a multiple of 3, in the format: label 1 value, label 1 X, label 1 Y, label 2 value, label 2 X, label 2 Y, ..., label N value, label N X, label N Y. ### Drawing to a Texture2D The GUIChartEditorOptions.DrawToTexture(Texture2D texture) will draw the chart on a Texture2D and not on the inspector. Note that the texture will be available only after the EndChart call. ![Draw to texture Example](https://github.com/alessandroTironi/UnityGUIChartEditor/raw/master/doc/DrawToTextureExample.png?raw=true "Draw to texture") As a final summary, here is the code used to generate the chart in the first example. ```csharp GUILayout.BeginHorizontal(EditorStyles.helpBox); // comment if you render to texture GUIChartEditor.BeginChart(10, 100, 100, 100, Color.black, GUIChartEditorOptions.ChartBounds(-0.5f, 1.5f, -0.5f, 1.5f), GUIChartEditorOptions.SetOrigin(ChartOrigins.BottomLeft), GUIChartEditorOptions.ShowAxes(Color.white), GUIChartEditorOptions.ShowGrid(0.25f, 0.25f, Color.grey, true) /* , GUIChartEditorOptions.DrawToTexture(texture) */ // un-comment to render to texture ); Vector2[] f1 = new Vector2[] { new Vector2(0f, 0f), new Vector2(0.5f, 1f), new Vector2(1f, 0f) }; Vector2[] f2 = new Vector2[] { new Vector2(0f, 0f), new Vector2(0.75f, 1f), new Vector2(1.4f, 0f) }; GUIChartEditor.PushLineChart(f1, Color.red); GUIChartEditor.PushPoint(new Vector2(0.5f, 1f), Color.red); GUIChartEditor.PushLineChart(f2, Color.yellow); GUIChartEditor.PushPoint(new Vector2(0.75f, 1f), Color.yellow); GUIChartEditor.PushFunction(x => x * x * x, -10f, 10f, new Color(0f, 1f, 0f, 0.5f)); GUIChartEditor.EndChart(); GUILayout.EndHorizontal(); // comment if you render to texture ``` ![Complete Example](https://github.com/alessandroTironi/UnityGUIChartEditor/raw/master/doc/CompleteExample.png?raw=true "Complete") # Contributors @Bamboy