[Released] Graph Maker - UGUI - NGUI - DFGUI (line graphs, bar graphs, pie graphs, etc)

Nice!

Glad to hear it!

This is likely due to a prefab made with Graph Maker 1.4 being used with Graph Maker 1.5. Unfortunately, Graph Maker prefabs made prior to 1.5 won't work with 1.5+. The error likely comes from the editor class looking for an x-axis / y-axis gameobject with a WMG_Axis script on it, which did not exist prior to 1.5. You might be able to salvage your prefab by deleting the Editor scripts temporarily, and fixing your old prefab to have the same structure as the new prefabs.

2 titles overlapping, meaning like x-axis title and graph title from Graph Maker, or you are adding your own title in addition to using a Graph Maker title?

 

@rorakin3 Thanks I managed to manually fix my graph bit by bit.
Now I'm up for a new challenge, I need to draw moving averages on an existing graph. my X axis is datetime/unix timestamp what would be the best List<T> to use ?

Also when I want to draw a solid line without points the line is breaking and isn't smooth how do you solve this ?

 

- Displaying datetimes
1. You can store the display strings as List<string> in WMG_Axis_Graph.groups. Grouping has some other advantages such as handling of NULLs. The tutorial video / scene has more info on how to use grouping if you want to go that route.
2. Or you can store the datetimes in a numeric format (such as # seconds since an arbitrary date in the past) in x-position of the List<Vector2> of points, and override the labeling behavior of the x-axis. The demo 1 scene on the asset store link page has example for overriding axis label function.

- Smooth lines
If you mean there are visible gaps between the lines you can try increase the "Line Padding" on the Series. If you mean like getting rid of sharp edges / corners, you could try to some Bezier curve smoothing by adding many additional points for any given point. Feel free to email me for more info if you want to go the Bezier curve route.
Keep in mind that if you're trying to jam too many data points in a given graph, no matter what is done the results probably won't look so good simply because only so many pixels can be used for a given data point.

 

I just bought Graph Maker and although I can see it is an amazing package alas I cannot see how to work with the graphs dynamically, not by Reflection as I do not know anything about that, but even just setting the values at runtime like with the pie graph for instance.

I have tried attaching this script to a pie graph created from a prefab in the editor:

List<float> myList = new List<float>();

myList.Add(30);
myList.Add(180);
myList.Add(19);
myList.Add(78);
myList.Add(93);

GetComponent<WMG_Pie_Graph>().sliceValues.SetList(myList);

but this has no affect on the displayed graph.

I really want to use this amazing package, but find the manual is just syntax rather than tutorial :-(((

Thanks in advance

 

Sorry about that, you just need to call graph.Init() because I think the Start() method of the WMG_Pie_Graph did not get called. I will add an example scene for adding data, and also for pulling data dynamically via WMG_Data_Source for Pie Graph for the next update.

 

GetComponent<WMG_Pie_Graph> ().Init ();

AWESOME )))

 

OK....some this is not meant as a moan or complaint, but more of a plea to save my sanity...

I know Graph Maker is amazing, but it is severely fragmented (to me anyway) re actual help on how to use it.

The manual is indeed in-depth, but is more syntax than example.
The form is 10 pages long spanning 3 years and after 3 - 4 pages it just melts my brain trying to find assistance.
The YouTube video I only came across by chance, maybe I missed it, but not obvious it was there.
I can't believe I'm the only one (God..please not just me) who would really like to see some serious tutorials or at least documented samples.

I've looked at some of the links at the start of this thread (3 years old) and although look really cool...do not help me.

I know we have the forum, but I cant keep asking question after question ... after question which would easily be avoided with startup tutorials

I'm looking at line graphs (the reason I bought Graph Maker) to use with dates only the x and values along the y but so far I see simple data set examples in the package.

I need to load large JSON data which have many values per day.

Can the graphs be zoomed in / out by touch (mobile)

Lets say I have 6 months of data, does this all get crammed into one graph screen looked....crammed?

Can the graphs be scrolled left / right by touch (mobile) to move back and forth through the dates?

I'm not being negative or bashing Graph Maker I know it is a really powerful package...I just need the help to ... help me utilise it....

 

Yeah, I wouldn't recommend reading the forum posts from a few years ago, reading maybe the last couple pages might be useful.

Graph Maker doesn't handle data manipulation or data conversions. That is up to the user since input data can come from a large variety of sources and formats. At the end of the day, Graph Maker needs List<string>, List<float>, or List<Vector2>.

Zooming / scrolling is also up to the user to implement because it could be done in a lot of different ways. I might add an example scene later of user scrolling similar to the demo scene that infinitely scrolls to the right.

 

Hey @rorakin3 thanks for your help. I got another issue with line graph.

sometimes when I switch the series data on the fly the line is drawn twisted like shown in the picture below (yellow line). how do I fix it ?

 

That's pretty cool graph you made there with Graph Maker, nice!

- Twisted line graph
I haven't seen that one before! What can I do to reproduce it / how are you switching the series ? One quick thing to try - If you are using "auto animations", try turning it off to see if its fixed.

 

Thanks! You are correct it is an animation issue. turning it off solves the problem. I update the series by doing recalculations for the last 60 data nodes and then I do series.pointValues.SetList(x). This happens when I traverse between different assets in a list so the graph yAxis min/max values may change.

EDIT: sorry for the many edits there is a bug I'm not sure what's causing it. But sometimes my graphs won't refresh and sometimes they will make the twisted line. I can't figure it out but it is caused by the animation imo.

 

Hello,

I want to use the hierarchical tree graph but I can't figure out how to display the data it horizontally rather than vertically? I also can't figure out how to actually display the data; where does the graph collect the data from?

Thanks for your help.

 

Yeah, the issue is basically the animation might get messed up if the axes or the graph dimensions change during the animation since the before vs. after values are calculated based on the graph dimensions when the animation begins. This is the optimal way to do it when the graph dimensions are static. The alternative is to animate the List<Vector2> point values overtime which is more intensive but will work for a dynamically changing graph even during the animation.

I'll probably add something like an "Is Graph Static" option to animations tab, which will toggle between the 2 approaches I mentioned above. Please send me an email if you need this soon.

 

Hey,

It's a bit confusing, but basically, there's a list for column (x), and for row (y). You define your nodes by assigning them an x, and y in these lists. Then the links are defined by 2 Nodes, the from, and the to Nodes. The Nodes are defined by an ID, which is their index in the column / row lists plus one. So element 0 in the columns / rows list is Node 1.

So for example, the first link has a From node of 1 and a To node of 2. If you change the To node to 4, the link will now point horizontally because Node 4 is in the second column.

 

Thanks, it's not that urgent so i'll wait for a future update. Instead, I'd be happy if you can email me the line smoothing algorithm so I can implement it to make the lines look sharper

Another question, I have a couple of graphs layered one on top of each other. I need to Implement a graphic feature where I hover my mouse and if my mouse x value hits some points x on the graphs those points will be visible and highlighted while the others aren't. What would be the easiest way to achieve such thing ?

Thanks again I appreciate your work.

 

No problem. I need to do an example scene for this too, but here is how it can be done:

1. Create a invisible square that overlays on top of the graph and make it interactive.

2. In the callback for hovering over the square, get the mouse world position (See repositionTooltip() in WMG_Graph_Tooltip.cs for example)

3. Loop over each Graph series and each series' points. You can use WMG_Series.getPoints() to loop over points. Get the width of the points and subtract / add half of the width to the point's x-position to get your range of x-values for that point. Check if the mouse x position is within this range, if so highlight it, if not don't highlight.

 

Hi @rorakin3 ,
I have been trying to use GM for live graph plotting for a BLE project. I am having an issue with realtime plotting. The graph does get plotted, but the console is flooded with following error at runtime when the series goes beyond area of graph. Any help will be appreciated.

 

Hey,
You have based your graph off the real-time update example in X_Dynamic scene? Anything different about your graph from that example? Using latest Unity version?

 

Hi @rorakin3,

Is it possible to show a Fast Fourier Transform using your plugin?

 

Hi @rorakin3,

Yes. I have.

Not that I can see (Not Logically anyways). Apart from the fact that I have 4 data sources in single variable single object mode. So I am plotting 4 data series from 4 different data sources in one graph as opposed to your example. Plus, my data sources are variables in one of my classes as opposed to localPositions in your example.

Yes. 5.3.4p5

 

Hey,
Graph Maker plots discrete list of points. So, you will need a function / API to have the FFT return a list of points. There are some included examples / example functions for plotting various mathematical equations like circle / log / exp, etc.

 

Hi

I've been following your tutorial on Youtube on Creating Graphs, although I've been working on a bar graph. How would I change the series color through code?

Currently I'm trying this:

Code (CSharp):

1. series1.usePointColors = true;
2. series1.pointColor = Color.red;

Which doesn't give me any compile error, however it doesn't do anything to my bar graph either. Am I missing something or am I way off?

Thanks

Bob

 

Hey,
There's pointColors and pointColor. If you want all the points to have the same color of red, then set pointColor to red and set usePointColors to false. Conversely, if you want to to define colors for each point individually, then you need to use the pointColors list and set usePointColors to true.

 

Thanks that worked perfectly.

Additionally I'm struggling with the xAxis Labels. For this graph I have 2 series' with only 1 pointValue in each(it's all I need right now). Is there a way to say series1 label is "label name" and series2 label is "other label name" and just display the label between each tick?

I might be getting confused with groups tbh

Thanks

Bob

 

Hey,
On the xAxis tab on the graph, with a Label Type of "Ticks Center" you will get (X-1) labels where X = Num Ticks. The labels will be spaced between each tick. As long as "Set Labels Using Max Min" is set to false, you can manually set the labels, which are under "Labels" on xAxis tab. So with Num Ticks of 3, you'll get 2 labels for "Ticks Center", since 2 labels can fit between 3 ticks, and then you can enter the labels under element 0 and element 1 of Labels list.

 

I am not using points at all. Instead I want each series to have different line colour. that's why I m using point height and width as 0. my issue is until the live graph is progressing inside the graph borders, it is working fine. Once it starts to auto update the values on x axis based on continuous input from data source, it starts throwing the aforementioned error.

 

Sorry, that reply was for another. I tried a few things to reproduce the issue, but wasn't able to reproduce the issue. If you are able to reproduce the issue from some simple tweaks to the X_Dynamic real-time update example that will be helpful.

Where the source data is coming from (transform in the example vs. your script variable) should not affect the issue since the data is just pulled at constant interval from Update() in WMG_Axis_Graph.cs.

 

I'll check and try to make an empty project from X_Dynamic example as per my setup and see if I can produce the issue there. Will keep you posted. Maybe I got a wonky setup.

 

Superb man. Thanks a lot.

 

This worked perfectly, thanks again

 

Hi Rorakin!

Bought graph maker a few weeks ago and finally got the chance to play around with it. So far pretty neat!
But I'm having trouble with the stacked bar graphs:


When i update values in the series, the initial y-positions of the rectangles are off. Any ideas how to fix it?

The series consists of Vector2's <float,int> . Setting them to "Use X Dist Between" fixes the vertical issue but causes horizontal alignment issues. (gaps disappear and the ordering changes).


And, some series may not have data points in certain x-values so there should be gaps. Also I'm adding point values at runtime, so the list is not in sorted order according to the X-values.

Example data:
values are in Vector2<float,int>
Series1:
(240, 4)
(230, 5)
(200, 2)

Series2:
(200, 3)
(210, 4)
(220, 5)
(230, 6)

So far, im guessing it's an optimization problem, where it's not recalculating the inital y-positions when a series's bar underneath the current one shrinks or grows. Anyway to force it to reposition? thanks!

 

Hey Rorakin3,

I just bought your package, having some problems starting up...

I want to make a bargraph, bars should show the "Points" the player reaches every day.

1.) the first bar should not be directly at y-axis, but the first value (0) is shown directly on axis. How to shift all bars a little bit to the right?

2.) If the player plays up to 10 days, everything matches. But on more days the bars become too small. Is there an option to load data with e.g. 100 bars (values), an than scroll through the bars left an right (showing a "window" of 10 bars)?

3.) Which platforms can support my app with your graphs? Windows, Android, WebGL, iOS, ...?

Thanks
Frank

 

That's quite strange, is there some simple code that reproduces the issue? Calling WMG_Axis_Graph.Refresh() will force a refresh. Though this is typically only needed if you're doing stuff like adding custom scripts to your points at run-time and need the gameobjects to exist in the same frame in which the data is being set.

 

Hey there,

1) The spacing from the axis is typically set automatically, but you could control it manually by disabling "Auto Update Series Axis Spacing" (4th option from the bottom of WMG_Axis_Graph "Core" tab). Then on each series you can set WMG_Series.extraXSpace from code or "Extra X Space" from Unity Inspector on Series object. You could also modify function updateExtraXSpace() in WMG_Series.cs.

2) This currently isn't done out of the box by Graph Maker. I would recommend figuring out how you want the user to control the scrolling, and then figure out how you want the animations to work for loading in the window of data. The bulk of the work will be writing the animations code. I recommend using DOTween (The animation library that's included in Graph Maker)

3) All platforms

 

Hi rorakin,

Here's an example graph showing the behavior. I made some changes to the BarGraph prefab as noted in the code.

Code (CSharp):

1. public class testGraph : MonoBehaviour {
2.     void Start () {
3.         // BarGraph prefab
4.         WMG_Axis_Graph graph = GameObject.Find("BarGraph").GetComponent<WMG_Axis_Graph>();
5.         /*
6.          * Things I changed from prefab:
7.          *
8.          * Removed the 2 initial series
9.          * GraphType: Stacked Bar Graph
10.          * X-Axis: Set to label using Max Min
11.          */
12.  
13.         graph.Init();
14.         WMG_Series series1 = graph.addSeries();
15.         WMG_Series series2 = graph.addSeries();
16.         series1.pointColor = Color.red;
17.         series2.pointColor = Color.blue;
18.  
19.         graph.xAxis.AxisMinValue = 20;
20.         graph.xAxis.AxisMaxValue = 50;
21.  
22.         for (int i = 3; i < 5; i++ )
23.         {
24.             series1.pointValues.Add(new Vector2( i * 10, i));
25.         }
26.         for (int i = 2; i < 4; i++ )
27.         {
28.             series2.pointValues.Add(new Vector2( i * 10, i * 2));
29.         }
30.     }
31. }

thanks!

 

Ah, I see. So, stacked graph basically requires # of points for all series to be equivalent and also the x-data to be the same. Since from the example, it looks like some of your series have no data, it will be best to use Graph Maker's NULL handling capability which is done using "Groups" feature.

So, for example, to use groups in the example you sent:

1. Click "Use Groups" on Core tab of BarGraph prefab. Clear the existing example "Groups" list on the prefab.

2. (Optional) On xAxis tab of BarGraph prefab, set "Label Type" to "Groups"

3. Change code to set groups based on your x-data, and change series data to set x-data based on index to the group. Example:

Code (csharp):

1.  
2.  
3.     void Start () {
4.         // BarGraph prefab
5.         WMG_Axis_Graph graph = GameObject.Find("BarGraph").GetComponent<WMG_Axis_Graph>();
6.         /*
7.          * Things I changed from prefab:
8.          *
9.          * Removed the 2 initial series
10.          * GraphType: Stacked Bar Graph
11.          * X-Axis: Set to label using Max Min
12.          */
13.  
14.         graph.Init();
15.         WMG_Series series1 = graph.addSeries();
16.         WMG_Series series2 = graph.addSeries();
17.         series1.pointColor = Color.red;
18.         series2.pointColor = Color.blue;
19.  
20.         graph.xAxis.AxisMinValue = 20;
21.         graph.xAxis.AxisMaxValue = 50;
22.  
23.         for (int i = 0; i < 5; i++ )
24.         {
25.             graph.groups.Add((i*10).ToString());
26.         }
27.  
28.         for (int i = 3; i < 5; i++ )
29.         {
30.             series1.pointValues.Add(new Vector2(i, i));
31.         }
32.         for (int i = 2; i < 4; i++ )
33.         {
34.             series2.pointValues.Add(new Vector2(i, i * 2));
35.         }
36.     }
37.  
38.  

 

Thanks! Using groups worked, looks good!




Just a couple more questions:

1) How do I make the bars line up automatically with the labels now? They seem to drift towards the center.

2) Do groups have to be 1-indexed rather than 0-indexed? It seems if i put a value of 0 as the key, it doesn't show up on the graph.

Thanks!

 

Nice

1) I recommend to set xAxis num ticks to 2 or hide the ticks, and to set the xAxis Label Type to "Groups". Groups label type will make the labels be directly underneath each group or each set of bars, instead of based on ticks.

2) Yeah - They are 1-indexed since Graph Maker internally uses negative indices to mean NULL. and there isn't a negative zero.

 

Hi,
I get a lot of System.NullReferenceExceptions in WMG_Axis_Graph.cs.
e.g. in Function void ResumeCallbacks() the objects xAxis, yAxis and legend are null (not initialized)
Did I forgot to setup/initialize anything?

Debugging shows: WMG_Axis_Graph.Init() is called two time. First time everything is ok, second time legend, xAxis and yAxis is null?

Thanks
Frank

 

Error found! (I get a lot of System.NullReferenceExceptions in WMG_Axis_Graph.cs.)
I had added the script without GameObject to a Panel...

 

@rorakin3
Your webgl demos are not working, they are raising illegal character error.
plz take a look

 

Strange, I'm getting the same error. Must be from a WebGL update, I will look to update these soon. Thanks for letting me know!

 

@rorakin3
Is there similar example provided with graph maker?
http://bl.ocks.org/mbostock/4062045

 

Hey, sorry forgot to respond to this earlier.
The closest example would be the random graph generator example. The random graph generator example can create graphs much like those you would see in the world map of a 4x strategy space game. The random graph uses API to create nodes and links between nodes as well as some functions for path-finding / traversal of the graph.

 

Issue was a change to dropbox. I've rebuilt all the demos in Unity 5.4 beta 20 and hosted on googledrive.

 

Hi
I need to change the font type through the code. How can I change that? I followed your youtube video on how to create graph with GM. I need to change background sprite color via code as well as AxisTitle-X font, graphTitle font, AxisTitle-Y font and series name's font.

 

Hey,
You can change font options either via the prefabs, or via code. Code example to access Text for all the text objects (_graph is an instance of WMG_Axis_Graph):

Code (csharp):

1.  
2.         //X Axis
3.         foreach(WMG_Node node in _graph.getXAxisLabels()){
4.             Text text = node.GetComponentInChildren<Text>(node.gameObject);
5.         }
6.  
7.         //Y Axis
8.         foreach(WMG_Node node in _graph.getYAxisLabels()){
9.             Text text = node.GetComponentInChildren<Text>(node.gameObject);
10.         }
11.  
12.         //Data Labels
13.         for(int i = 0; i < _graphData.seriesList.Count; i++){
14.             WMG_Series series = _graph.lineSeries[i].GetComponent<WMG_Series>();
15.  
16.             foreach(GameObject dataLabel in series.getDataLabels()){
17.                 Text text = dataLabel.GetComponentInChildren<Text>(dataLabel);
18.             }
19.         }
20.  
21.         //legend
22.         foreach(WMG_Legend_Entry legendEntry in _graph.legend.legendEntries){
23.             Text text = legendEntry.label.GetComponentInChildren<Text>();
24.         }
25.  
26.         // axis titles
27.         Text xTitleText = _graph.xAxis.AxisTitle.GetComponentInChildren<Text>();
28.  
29.         Text yTitleText = _graph.yAxis.AxisTitle.GetComponentInChildren<Text>();
30.  
31.         //tooltip
32.         Text toolTipText = _graph.toolTipLabel.GetComponentInChildren<Text>();
33.  

The graph background object can also be changed via code:

Code (csharp):

1.  
2. _graph.graphBackground
3.  

 

Hey! Some issues I found:

• WMG_Axis.AutoSetAxisMinMax gets stuck in an infinite loop if AxisNumTicks == 1 due to a division by zero
  
• WMG_Axis_Graph.deleteSeries throws index out of range if there are no series
  
• You're manually monitoring whether the RectTransforms dimensions changed and adjusting the graph size from within Update() instead of using Unitys layout callbacks for that. This leads to some problems in the editor if the graphs RectTransform is driven by a layout, but more importantly leads to noticeable 1-frame delays and jittering if updating the graphs size at runtime.

Here you can see the graphs top lagging behind where it should be as the size of the parent container changes:


And here I tried resizing the graph as more points get added to it:

I'm not too familiar with Unitys layout system but I think the interface to implement is ILayoutController

 

Hi,

I got your plugin and I'm really impressed with how easy it was to create a custom graph. I'm having an issue with the Combo graph type, I want a series to graph out a straight line across the X-Axis but the the line only stretches based on the bar graph type.

Here's an example:


I've played around with all of the Auto X-Axis settings as well and this was the closest I was able to achieve as a result. The line also shifts positions every time the graph is redrawn. Also it would be nice for exposed settings to change the font settings and color for the tick labels in the inspector.

Thanks

 

Hey @rorakin3 ,

I'm trying to implement a candle sticks graph with your library. (We did it in the past but we only use your library to show the axis). Now I got a task to make a huge Graphs refactor and I want the new candle sticks to be fully integrated with your code. I assume I need to inherit from WMG_Axis_Graph and start manipulating the data to hold 5 points of value (time, rate open, rate close, rate high, rate low). I wonder what are the general steps and precautions I have to make. I am willing to share back my work with you so other people can enjoy it.

Thanks.