Skip to main content

Showing Bar Graph in unity

Hi, today i will be showing how to make a bar graph in unity3d. Take a look at this screen shots.



I used line renderers for lines. My origin start from (0,0) and  X axis goes to 4 and Y axis goes to 3.
I took X axis to represent number of data and Y axis to show the value of that data.

I even implemented simple animation to the line renderers. which you can check in the video.




So here is the script.

using UnityEngine;
using UnityEngine.UI;
using System.Collections;
using System.Collections.Generic;

public class BarGraphManager : MonoBehaviour {

    public GameObject linerenderer;
    public GameObject pointer;

    public GameObject HolderPrefb;

    public GameObject holder;

    public Material mat;

    public Text topValue;

    public List<GraphDatagraphData = new List<GraphData>();

    private GraphData gd;
    private float highestValue;

    void Start(){
        UpdateData();
    }
    
    public void UpdateData() {

        // Instantiate an empty gameObject to hold all line renderers
        holder = Instantiate(HolderPrefb,Vector3.zero,Quaternion.identityas GameObject;
        holder.name = "h2";

        graphData.Clear();

        // Lenght of data to be shown in graph
        int length = Random.Range(5,12);
        // Inserting data to the list
        for(int i = 0i < lengthi++)
        {
            gd = new GraphData();

            gd.income = Random.Range(10.0f,100.0f);

            if(gd.income > highestValue)
                highestValue = gd.income;

            graphData.Add(gd);
        }

        // Adjusting value to fit in graph
        for(int i = 0i < graphData.Counti++)
        {
            // since Y axis is from 0 to 3 we are dividing the income with the highest income
            // so that we get a value less than or equals to 1 and than we can multiply that
            // number with Y axis range to fit in graph
            // e.gincome = 90highest = 90 so 90/90 = 1 and than 1*3 = 3 so for 90Y = 3
            graphData[i].income = (graphData[i].income/highestValue)*3;
        }

        topValue.text = Mathf.FloorToInt(highestValue).ToString();

        StartCoroutine("BarGraph",graphData);
    }

    IEnumerator BarGraph(List<GraphDatagd)
    {

        float gap = 1;

        // X axis starts from 0 to 4 so according to my logic i have to check if noof data
        // is > 4 than we should divide the lenght of x axis with the data countthis will
        // give us the gap between bars that we need to keep.

        if(gd.Count > 4)
        {
            gap = 4.0f/gd.Count;
        }

        float xIncrement = gap;
        int dataCount = 0;
        Vector3 startpoint = Vector3.zero;

        while(dataCount < gd.Count)
        {

            Vector3 endpoint = new Vector3(xIncrement,gd[dataCount].income,0.96f);
            startpoint = new Vector3(endpoint.x,0,0.96f);
            // pointer is an empty gameObjecti made a prefab of it and attach it in the inspector
            GameObject p = Instantiate(pointernew Vector3(startpoint.xstartpoint.y0.97f),Quaternion.identityas GameObject;
            p.transform.parent = holder.transform;

            // linerenderer is an empty gameObject with Line Renderer Component Attach to it
            // i made a prefab of it and attach it in the inspector
            GameObject lineObj = Instantiate(linerenderer,transform.position,Quaternion.identityas GameObject;
            lineObj.transform.parent = holder.transform;
            lineObj.name = dataCount.ToString();

            LineRenderer lineRenderer = lineObj.GetComponent<LineRenderer>();
            
            lineRenderer.material = mat;
            lineRenderer.SetWidth(0.15F0.15F);
            lineRenderer.SetVertexCount(2);

            while(p.transform.position.y < endpoint.y)
            {
                p.transform.Translate(Vector3.up*Time.deltaTime*8Space.World);
                
                lineRenderer.SetPosition(0startpoint);
                lineRenderer.SetPosition(1p.transform.position);
                
                yield return null;
            }

            lineRenderer.SetPosition(0startpoint);
            lineRenderer.SetPosition(1endpoint);

            
            p.transform.position = endpoint;

            startpoint = endpoint;
            dataCount++;
            xIncrement+= gap;

            yield return null;

        }
    }



    public class GraphData
    {
        public float income;
    }
}






Any suggestions or queries are welcome.




If you like this post and want to contribute Please click on the link given below.


https://www.paypal.me/Sushanta1991


Here is the project file:
http://bit.ly/138L1Jx

Comments

  1. hi Sushanta
    I'm not seeing anything after opening upgrading project to 5.5.03f version of unity. Seems to have lost something?
    Didn't mentioned where to attach this script main camera?
    can you please mention steps to achieve this

    ReplyDelete
    Replies
    1. FYI, im using win 7. Doesn't it supported?

      Delete
    2. Hi Madi, everything is working in unity 5.5.1, I just checked (i am using win 7). Open the project in latest version of unity and open scene BarGraph\Assets\_Scenes\Scene4. You can see how i setup everything in the project.

      Delete
  2. May i'm behaving like dumb here, but bear with me i'm new to unity.
    how to check prefabs, I didn't see any gameobject except camera or light (i.e. defaults).
    I'm trying to do it hands on. Sorry but didn't get how those prefabs created, can pls help me achieve how do i do it? may email me tmpid4email@gmail.com

    ReplyDelete

Post a Comment

Popular posts from this blog

How to write data to CSV file in UNITY

Hi Guys, if any one is facing problem to save data in csv file can use this solution. If you have any questions, you can ask me through comments.

Things to remember :
Never ever add any commas to your data otherwise, cells will get messed up completely. 


Results :


Here is the code

usingUnityEngine;
usingSystem.Collections;
usingSystem.Collections.Generic;
usingSystem.Text;
usingSystem.IO;
usingSystem;

publicclassCsvReadWrite : MonoBehaviour {

privateList<string[]> rowData = newList<string[]>();


//Usethisforinitialization
voidStart () {
Save();
    }

voidSave(){

//CreatingFirstrowoftitlesmanually..
string[] rowDataTemp = newstring[3];
rowDataTemp[0] = "Name";
rowDataTemp[1] = "ID";
rowDataTemp[2] = "Income";
rowData.Add(rowDataTemp);

//Youcanaddupthevalues

Simple Up, Down, Left, Right Swipe controls for touch devices( Iphone and Android) in unity

Note: There are more than 50 comments in this post, So, if your comment is not appearing on the first page than' 'don't get panic', there is aLoad Morebutton at the bottom of the page.



Here is a UnityScript (javascript version)

#pragma strict
var player : Transform;  // Drag your player here
privatevar fp : Vector2;  // first finger position
privatevar lp : Vector2;  // last finger position

function Update()
{
for (var touch : Touchin Input.touches)
{
if (touch.phase == TouchPhase.Began)
{
fp = touch.position;
lp = touch.position;
}
if (touch.phase == TouchPhase.Moved )
{
lp = touch.position;
}
if(touch.phase == TouchPhase.Ended)
{

if((fp.x - lp.x) > 80) // left swipe
{

player.Rotate(0,-90,0);

}
else if((fp.x - lp.x) < -80) // right swipe
{
player.Rotate(0,90,0);
}
else if((fp.y - lp.y) < -80 ) // up swipe
{
// add your jumping code here
}
}
}


}


add this script to any empty gameObject or your player than drag your player to player variable in editor now build a .apk or .ipa and check the re…

How to create line graph in unity

Hi guys, previously i have shown how you can create Bar_Graph in unity, after successfully showing bar graph in unity i fell in love with graphs, so when i was asked to show data on a line graph, i got excited and came up with this solution, its almost similar to the bar graph, but this time i have made it more reliable and dynamic.

this is how my setup looks like :




I have an orthographic camera in my scene, which only renders a layer i namded "GUI". and every gameobject in the graph are in "GUI" layer.

why orthographic camera ? its because they easily adjust according to different screen resolutions, i have also used textMesh to show the numbers in graph, which again is the best option if you want to show text in 3d space.


here is a view, how the final graph looks like with data :






in the above image you can see that i am showing data for 99 turns,  but in this small space i cant show data for all the 99 turns, so what i did is i made a dynamic function which give…