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:

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.

// 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.

GUIChartEditor.PushFunction(x => x * x * x, -1f, 2f, Color.green);

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.

Vector2[] samples = new Vector2[] 
{ 
    new Vector2(0f, 0f), new Vector2(0.5f, 1f), new Vector2(1f, 0f)
};
GUIChartEditor.PushLineChart(samples, Color.red);

Plotting points

Use the method GUIChartEditor.PushPoint(Vector2 point, Color pointColor) to draw just one point in the chart.

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);

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.

GUIChartEditor.PushValueLabel(0.95f, 1f, 0.95f);
GUIChartEditor.PushValueLabel(0.43f, 0.5f, 0.43f);

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.

As a final summary, here is the code used to generate the chart in the first example.

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

Contributors

@Bamboy