Making a dynamic radar type graph

Hello,

i am a beginner, and i have the task to create a graph that allows to add rows (so the shape is not exactly pentagonal or triangular), and to fill it dynamically with inputs from a UI (well it needed to be all UI elements ), i’ve searched and found that i can use lineRenderer but i want to use only UI elements 48285-graph.jpg

Doing this with only true UI elements might be possible, but it would be many, many orders of magnitude simpler to use a mesh-based approach.

You can still place this group-of-objects in alignment with your canvas and render it with the same camera that renders your UI, and use whatever kind of shader you find suitable. It may be a bit tricky to find the best way to position and align the group, depending upon your needs, but I would still recommend this approach over any alternative.

Have a good long look at the Mesh class API. Also investigate the DrawMeshNow method, which is a very convenient way to draw procedural meshes which change (or might change) every frame. This may or may not be the best way; depends on what you need.

Building a “line” mesh from code is a matter of selecting the start and end points (length), using the cross-product of that vector to get your perpendicular vectors (width), then creating verts whose positions can be established based on these values.

It would be even more efficient and nice-looking to build actual polygon shapes instead of individual line quads; if you can do one, you can do the other. Just gotta get familiar with the Mesh class and building procedural meshes.

Note that this might be overkill. It sounds a bit expensive, too. Consider whether the spiderweb aspect can be a rastar image instead. You could have as many images as the maximum number of data points these graphs will ever display.

Drawing the graph polygon itself follows a very similar process; select the positions for the points, and create triangles which “fills the shapes” defined by these points. The easiest way would involve triangles which each contain two verts on the data graph, and the third vert is the center of the shape.

For both aspects of the task, you’ll be constructing these meshes based on N pieces of data, where N is greater than two. Conveniently, you can just “sweep” a circle shape to establish each “spoke” in the shape. If N is 4, each spoke is swept at 90 degree intervals. If N is 5, each interval is 72 degrees, etc.

The vertex of the graph polygon on each spoke then lies along that spoke, at a position defined by whatever percent of the maximum value that spoke is representing that frame.

I thought a lot about doing such a graph in my current project, but ultimately ditched the idea in favor of another data presentation. I always thought it would be really cool though.

I’d be happy to talk more about this idea if this information isn’t sufficient to get you going.

You can also use simple mesh and bones made in Blender, then easy manipulate them in Unity, at start read theirs position (max value), min value is center (which is origin of “radar statystyk” object). Then you can easy use sliders or whatever other thinghs to manipulate this from game view.

.

hi
this is the code I’ve been working on, i have a new problem with it, when i click run its only draw one side of the triangles i don’t get it… help please !!!

i am attaching the code to an emptyobject, this is the code:

using UnityEngine;
using System.Collections;

public class MeshGen : MonoBehaviour
{

	public float x = 20f;
	public float y = 20f;

	// Use this for initialization
	void Start ()
	{
		MeshFilter mf = GetComponent<MeshFilter> ();
		Mesh mesh = new Mesh ();
		mf.mesh = mesh;

//		MeshFilter mf0 = GetComponent<MeshFilter> ();
//		Mesh mesh0 = new Mesh ();
//		mf0.mesh = mesh0;

		//les points
		Vector3[] points = new Vector3[6]
		{
		///*0*/new Vector3 (0, 0, 0), 

		/*0*/new Vector3 (x, 0, 0), 
		/*1*/new Vector3 (0, y, 0),
		/*2*/new Vector3 (-x, -y, 0),

		/*3*/new Vector3 (x - 5.0f, 0, 0), 
		/*4*/new Vector3 (0, y - 5.0f, 0),
		/*5*/new Vector3 (-x + 5.0f, -y + 5.0f, 0)
	
			
//		/*6*/new Vector3 (width - 10.0f, 0, 0), 
//		/*7*/new Vector3 (0, height - 10.0f, 0),
//		/*8*/new Vector3 (-width + 10.0f, -height + 10.0f, 0)
		};

		// les triangles

		// les triangles de bases
		int[] tri = new int[3];

		tri [0] = 0;
		tri [1] = 2;
		tri [2] = 1;

		int[] tri0 = new int[3];
		tri0 [0] = 3;
		tri0 [1] = 5;
		tri0 [2] = 4;

//		int[] tri2 = new int[3];
//		tri2 [0] = 6;
//		tri2 [1] = 8;
//		tri2 [2] = 7;

		// triangle des cotes en rect

		int[] tri1 = new int[6];
	
		tri1 [0] = 1;
		tri1 [1] = 0;
		tri1 [2] = 4;
		
		tri1 [3] = 4;
		tri1 [4] = 0;
		tri1 [5] = 3;

		int[] tri2 = new int[6];
	
		tri2 [0] = 2;
		tri2 [1] = 5;
		tri2 [2] = 0;

		tri2 [3] = 5;
		tri2 [4] = 3;
		tri2 [5] = 0;

		int[] tri3 = new int[6];

		tri3 [0] = 2;
		tri3 [1] = 1;
		tri3 [2] = 5;
		
		tri3 [3] = 5;
		tri3 [4] = 1;
		tri3 [5] = 4;

		//Les normales

		Vector3[] normales = new Vector3[6];
		
		normales [0] = -Vector3.forward;
		normales [1] = -Vector3.forward;
		normales [2] = -Vector3.forward;
		normales [3] = -Vector3.forward;
		normales [4] = -Vector3.forward;
		normales [5] = -Vector3.forward;
//		normales [6] = -Vector3.forward;
		//les UV Maps

		Vector2[] uv1 = new Vector2[6];
		
		uv1 [0] = new Vector2 (0, 0);
		uv1 [1] = new Vector2 (1, 0);
		uv1 [2] = new Vector2 (0, 1);
		uv1 [3] = new Vector2 (1, 1);
		uv1 [4] = new Vector2 (0, 0);
		uv1 [5] = new Vector2 (1, 0);

	
		Vector2[] uv2 = new Vector2[6];
		
		uv2 [0] = new Vector2 (0, 0);
		uv2 [1] = new Vector2 (1, 0);
		uv2 [2] = new Vector2 (0, 1);
		uv2 [3] = new Vector2 (1, 1);
		uv2 [4] = new Vector2 (0, 0);
		uv2 [5] = new Vector2 (1, 0);

		Vector2[] uv3 = new Vector2[6];
		
		uv3 [0] = new Vector2 (0, 0);
		uv3 [1] = new Vector2 (1, 0);
		uv3 [2] = new Vector2 (0, 1);
		uv3 [3] = new Vector2 (1, 1);
		uv3 [4] = new Vector2 (0, 0);
		uv3 [5] = new Vector2 (1, 0);


		// affectation des vecteurs
		mesh.vertices = points;
		mesh.triangles = tri1;
		mesh.normals = normales;
		mesh.uv = uv1;

		mesh.vertices = points;
		mesh.triangles = tri2;
		mesh.normals = normales;
		mesh.uv = uv2;

		mesh.vertices = points;
		mesh.triangles = tri3;
		mesh.normals = normales;
		mesh.uv = uv3;
	}
	
	// Update is called once per frame
//	void Update ()
//	{
//	
//	}
}