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

Hey there,

Thanks for the reports, I've fixed the first two points. I will look into addressing the 3rd point. In the meantime, calling WMG_Axis_Graph.ManualResize() in a OnRectTransformChange callback should address the issue. This function is basically a force refresh but for resizing only.

 

Hey @QuintonH

Thanks for bringing this up. I've just added a setting to make this possible. Feel free to email me to test it out / get a new package. It's only a few changes from the default settings of the starting bar graph to get this:



I will also look to making some font settings configurable via inspector. Best regards.

 

Hey @yossi.elimelech,

Cool, it shouldn't be too difficult, I've been meaning to do it as another example myself. But here is how I would go about it:

1. Create a new Node prefab (has WMG_Node script on it). Recommend start by copying from the circle point prefab. From here change the node add the top and bottom portions of the candlestick.
2. Create a new script attached to your new node that references the top and bottom images. Actually you probably want to create top and bottom invisible rectangles that when their height changes moves the candlestick ends outwards, and your script to reference these.
3. You now need a script to hold the data for each candlestick that represents a series of candlesticks. Create a new script for this and attach it to the series prefab. From this script in Start() or some other initialization function you call from another script, get the reference to WMG_Series. Now in Update() or some other function you call when the data changes loop through the points via WMG_Series.getPoints(), and get your custom node script. Now change the height of the invisible rectangles based on the List of data.

Additional Notes:
For determining when to update the candlesticks there are some callbacks you can subscribe to in WMG_Series, but keep in mind that they will only get called when the List data changes on WMG_Series, so to use these you would need to set the data on your candlesticks list first, then set the data on WMG_Series which will control the position of the nodes, which will trigger the callback.

Inheriting vs. creating new scripts - I recommend to just make new additional scripts that you add on as separate components. The main reason being that the custom inspectors won't work with new scripts that inherit the original scripts.

Let me know how it goes! Best regards.

 

Hey @Sebioff

I went to fix the third point just now, but I wasn't able to reproduce the issue. Here is my result:



Here are the steps I took:
1. Create a resizable panel, code used from:
https://unity3d.com/learn/tutorials/modules/intermediate/live-training-archive/panels-panes-windows

2. Put a Graph Maker graph inside the panel that stretches to the panel.

3. Enable resizing on the graph by clicking "Resize Enabled" and "Resize Properties" to "Everything".

Tried with Unity 5.4 beta 20.

If you could send me a project via email that reproduces or let me know the steps to reproduce that will be great.

 

@QuintonH
Font options are now exposed for x / y axis labels as well as series data labels. Font options include:
1. Color
2. Font Style "Bold, Italic, etc."
3. Font

Example created from Unity Editor (Fonts from another package):

 

@rorakin3

I have an issue where I need to load around 800+ points of data. When I do series.pointValues.SetList(myList) it takes very long for the graph to show it happens cause of the change event handlers. I tried using groups instead and got the same results. I really need to improve the performance what could I do ? ty

 

Hey,
For this I recommend to use a Coroutine to insert the data over short time to avoid a one frame FPS hit.

 

When the graph is stretching due to anchors and you're not using any UI layouts it is working fine. Simply add for example a VerticalLayoutGroup to the resized panel to reproduce. Let me know if you need any further information.

Regarding @YossiElimelech's problem, I noticed adding a new data point gets more and more expensive the more points the graph already contains, up to ~10ms or so per new point at a couple hundred existing points. Might be caused by nesting so many childs under one transform (latest Unity 5.4 beta has some small optimizations for that) but I'll profile a bit more.

 

Hey, I already tried that and I don't see any improvement. It takes too long to get a visual of the graph. How long should it take to load 800-1000 points of data via SetList ?

 

Ok, I will try out the VerticalLayoutGroup, and thanks for the info about many childs under one transform.

 

I will look into this tonight

 

Thanks you are the man

 

@rorakin3
Awesome, thank you so much!

 

I added the VerticalLayoutGroup and do see the issue now. I was able to fix it by adding this code to WMG_Axis_Graph.cs

Code (csharp):

1.  
2.  
3. void OnRectTransformDimensionsChange () {
4.         if (!hasInit) return;
5.         updateFromResize();
6.         Refresh();
7.     }
8.  
9.  

This has the side effect of essentially calling Update() twice in certain cases. Although my Update() only calls stuff if things changed, it's a little unnerving to essentially be calling Update() twice so I am not sure if I will keep this, but in case you need a fix now you can add that code.

 

Hey Yossi,
I'm trying out stress tests. I tried this code:

Code (csharp):

1.  
2.  
3. public class WMG_X_StressTest : MonoBehaviour {
4.  
5.     public WMG_Axis_Graph graph;
6.  
7.     // Update is called once per frame
8.     void Update () {
9.         if (Input.GetKey(KeyCode.P)) {
10.             WMG_Series series1 = graph.lineSeries[0].GetComponent<WMG_Series>();
11.             series1.pointValues.SetList(graph.GenRandomY(800, graph.xAxis.AxisMinValue, graph.xAxis.AxisMaxValue, graph.yAxis.AxisMinValue, graph.yAxis.AxisMaxValue));
12.         }
13.     }
14. }
15.  
16.  

I am able to hold the P key down to continuously redraw 800 points with no FPS lag, is this what you are doing (setting 800 at once) or something different? There is an initial hit to create all the objects the first time, but after that no FPS issue for simply moving the objects around.

EDIT:

Tried:

Code (csharp):

1.  
2.  
3. public class WMG_X_StressTest : MonoBehaviour {
4.  
5.     public WMG_Axis_Graph graph;
6.     int startingCount;
7.  
8.     // Use this for initialization
9.     void Start () {
10.         startingCount = 800;
11.     }
12.    
13.     // Update is called once per frame
14.     void Update () {
15.         if (Input.GetKey(KeyCode.P)) {
16.             WMG_Series series1 = graph.lineSeries[0].GetComponent<WMG_Series>();
17.             series1.pointValues.SetList(graph.GenRandomY(startingCount++, graph.xAxis.AxisMinValue, graph.xAxis.AxisMaxValue, graph.yAxis.AxisMinValue, graph.yAxis.AxisMaxValue));
18.         }
19.     }
20. }
21.  
22.  

It appears to get slower and slower with each added object. I hit about 30 fps at 1000 objects. However the cost of adding a new object does not appear to be that great, because:

Code (csharp):

1.  
2.  
3. public class WMG_X_StressTest : MonoBehaviour {
4.  
5.     public WMG_Axis_Graph graph;
6.     int startingCount;
7.  
8.     // Use this for initialization
9.     void Start () {
10.         startingCount = 1000;
11.     }
12.    
13.     // Update is called once per frame
14.     void Update () {
15.         if (Input.GetKey(KeyCode.P)) {
16.             WMG_Series series1 = graph.lineSeries[0].GetComponent<WMG_Series>();
17.             series1.pointValues.SetList(graph.GenRandomY(startingCount, graph.xAxis.AxisMinValue, graph.xAxis.AxisMaxValue, graph.yAxis.AxisMinValue, graph.yAxis.AxisMaxValue));
18.         }
19.     }
20. }
21.  
22.  

This code also gets me 30 fps if I hold down P.

 

@rorakin3

This is great but what if I have history of data points that is expected to get shown immediately when the client chose some stock ? I don't need it to progressively filled (no animations or effects needed) just plotting the graph as fast as possible. Maybe not drawing anything until the graph is fully loaded ?

If you use a coroutine to load 800 points it will take a while to finish (> 10 sec) and we can't tolerate it. it should be close to instant as possible as our platform is a desktop platform and one of our point of sale is that we are faster than the alternative browser based apps.

 

Alright, makes sense, but the last snippet of code I posted creates and positions 1000 data points in ~0.5 seconds on desktop platform. Where is the > 10 seconds coming from for you?

 

@rorakin3
Is there a way to display the tooltip with a link instead of a node? Since I'm using a solid flat line comprised of two nodes stretched across the axis with Hide Points set to true I need a way to display the tooltip for that series using the link.

 

The tooltip when you hover over, or the data label that is always visible? Either way I would recommend to do something similar to the demo scene with the area shading graph that continuously changes overtime.

In that example there is a straight line indicator with a label on the side. This line indicator is not created as a Series, but rather a separate prefab. You can change the prefab or create a new one to position the label in the center instead of on the side as is done in the example. Check out the demo scene code for how the line is positioned.

 

@rorakin3
Just upgraded to latest version of Graph Maker (using Unity 5.3.5f1) and am getting the following error message in Unity:

Assets/Plugins/Graph_Maker 1/Scripts/WMG_Axis_Graph_E.cs(8,34): error CS0246: The type or namespace name `WMG_Axis_Graph_E' could not be found. Are you missing a using directive or an assembly reference?

I don't know much about C#, but it looks like the file "WMG_Axis_Graph_E" defines a class called "WMG_Radar_Graph_E" which inherits from "WMG_Axis_Graph_E" (which doesn't seem to exist).

EDIT: I deleted all of my old Graph Maker stuff in the hierarchy and re-imported the latest Graph Maker from the asset store and then did a Reimport All. Now the examples work and I am not getting the same errors as before. But I am getting lots of new errors that I am guessing relate to how my code is interacting with the Graph Maker code. More later if I have a more informed question to ask ...

 

@rorakin3
First of all, great job for your powerful plugin! It helped us alot with our project where we use it to plot different mathematical functions.

We are using the latest version of your plugin, however we are stuck with a problem that may be caused by a bug:

We have a line graph that is used to plot a mathematical function (something simple like y = ax + b, sin(x), etc...).
On another line graph we plot the derivative function. It all works well except in derivative functions that are constant.

Take in example this linear function: y = 2x + 3.

Its derivative function is 2, which is a constant, so using about 40 nodes to draw a line we end up with a perfectly horizontal line. Since this is an exercise the right value is 2, but the user can choose between different values (say for example from -5 to 5). The line goes up and down as soon as the value is changed, however we noted that if every Y point is equal, the graph doesn't scale on Y axis and so our perfectly horizontal line ends up going out of the graph area and outside the visible screen. The problem get fixed if at least a point in the series has an Y value that is different from every others, which works great for every other functions, but not in the linear. So in the end every time the series updates, if every Y has the same value, the Y axis doesn't scale.

We attached a screenshot that can help explain the situation

 

@Cloverbit-s-r-l
Thanks for the report and email, I'm looking into this one now, starting off with making a simple scene that reproduces the issue.

 

This issue was resolved / fix sent via email. Fix will be in the next update as well. Thanks!

 

Hey, I'm a new unity user who has just got your software. I've watched your tutorials and I can see in the older one that there is an editor UI. Is this present in the current Graph Maker package?

 

Hey,
Oh you mean where you can click and drag to create nodes and links? Unfortunately this example is no longer present, what are you looking to make? The hierarchical tree and random graph examples might help depending on what you need.

 

Hey guys,

Just a sneak preview for the next update, which will implement an alternate rendering mode using compute shaders! Here is an example area shading chart with the area shading portions rendered with a compute shader:




Here is what the generated texture looks like:


The main motivation behind this is the performance. For charts with many data points, the current area shading implementation doesn't perform well since it's constructed by many rectangles with instanced materials.

For more info about compute shaders and the currently supported platforms:
https://docs.unity3d.com/Manual/ComputeShaders.html

 

Hi there!

I'm getting some weird results when I set my Hierarchical Tree's anchors to stretch with my canvas. When I stretch it manually with anchors set to one point everything resizes just fine. But when they are set to stretch all the nodes and links bunch up in the middle? How am I suppose to have the tree resize dynamically? Am I doing something wrong?

Also are we limited to only square or circle nodes? Can I make a rectangle node work with the current system?

Thanks for the awesome asset by the way. I am loving it despite this little issue.

 

Hey there,

Sorry about that, change line 221 in refresh() in WMG_Hierarchical_Tree.cs to:
Vector2 rectSize = new Vector2(getSpriteWidth(this.gameObject), getSpriteHeight(this.gameObject));

Yeah, the node links use either circle or square to connect nodes. You can use rectangular images on the nodes, but the links behind them will be based on square or circle. Do you need rectangular based links between nodes ?

 

It works perfectly now, thanks!

Well my main concern was having the link images wrap around the nodes tightly. So if we take the arrow line prefab that comes with the example, in a situation where my node images are horizontal rectangles, I would like the tip of the arrows not get buried between the sides of the nodes or have it sit out far if its linked from the bottom to top or vice versa, depending on the size of the square. However I can definitely work with having it square at the moment and I'm only nitpicking small things. It might even be possible to do with some smart UI prefab design.

Thanks again rorakin3!

 

Hey, I'm a relatively new user to Unity, and I'm trying to use GraphMaker to display livedata from a weather station.

When I start my build, I collect data from the station then store it in a WMG_List via these lines:

Code (CSharp):

1. for (int i=0; i<length; i++) {
2.  
3.                 outHumidity.Add(new Vector2(float.Parse(weatherDataArray[i].dateTime), float.Parse(weatherDataArray[i].outHumidity)));
4.                 inHumidity.Add(new Vector2(float.Parse(weatherDataArray[i].dateTime), float.Parse(weatherDataArray[i].inHumidity)));
5.                 outTemp.Add(new Vector2(float.Parse(weatherDataArray[i].dateTime), float.Parse(weatherDataArray[i].outTemp)));
6.                 inTemp.Add(new Vector2 (float.Parse(weatherDataArray[i].dateTime), float.Parse(weatherDataArray[i].inTemp)));
7. }

I then use this code:

Code (CSharp):

1. outHumSeries.pointValues = outHumidity;
2. inHumSeries.pointValues = inHumidity;
3. outTempSeries.pointValues = outTemp;
4. inTempSeries.pointValues = inTemp;
5.  

To set the values to the relevant series for 4 different graphs. However when I play, the series are not changing. I am getting an error on the "outHumidity.Add ......" line above, which is "Object Reference not set to an instance of an object". It also may be of note that this script is attached to the canvas that contains the 4 graphs.

What am I doing wrong here? Thanks for any help you can give!

 

Hey,

This is mainly an annoying byproduct of the Unity editor not able to draw custom generic collection classes, but basically you need to use WMG_Series.pointValues.SetList() for setting a whole list from scratch. Refer to example scene code for more detail if needed.

Additionally, there is no need to create your own WMG_List, you can create a regular generic list from System.Collections.Generic namespace. For example:
List<Vector2> myList;

Then use SetList() on the WMG_Series' WMG_List.

You can also just use WMG_Series.pointValues.Add(new Vector2) for each new data point. This way you would not need to create / maintain your own lists.

 

Hi!
I've just purchased Graph Maker and I find it very useful and well done.

I have a question: can I somehow export the graphs i draw into an image file such as .png or .jpeg?

Thank you

 

Hey there,

Thanks for purchasing! There is not a built-in function with Graph Maker to do this, but there are various ways to take screenshots and save them out to a file. They are generally camera based, so you'll want to have a separate camera for your UI layer, and then also feed in the coordinates and dimensions of the graph.

http://answers.unity3d.com/questions/22954/how-to-save-a-picture-take-screenshot-from-a-camer.html

 

Hi again, thanks so much for you help last time!

I'm wondering if there is anyway you can have the popup labels on the nodes display strings. In my case they currently display the unix time (my x coordinate) and the humidity (y coordinate). I wish to make the labels display the date in DD/MM/YY format, followed by the humidity.

Thanks for any help you can provide

 

Hey, no problem. You can override the labeling with your own function. The Plot_Overtime scene and code has example code, but basically:

Code (csharp):

1.  
2. WMG_Axis_Graph graph;
3.  
4. void Start () {
5.     graph.theTooltip.tooltipLabeler = customTooltipLabeler; // override the default labeler for the tooltip
6. }
7.  
8. string customTooltipLabeler(WMG_Series aSeries, WMG_Node aNode) {
9. }
10.  

To grab the x and y data from a node:

Code (csharp):

1.  
2. Vector2 nodeData = aSeries.getNodeValue(aNode);
3.  

 

Hi
I want to add inclination to my xAxis elements like this picture since I have alot of elements and the inclination lets me more space for adding additional elements. And I also want to add numeic data to the label points in Graph with some inclination. How is it possible?

 

Hey,

You can rotate labels by setting an axis label rotation in the Xaxis tab of the graph settings. For the labels above the data points, you can set "Data Labels Enabled" to true on the Series "Labels" tab. To customize the appearance of the labels such as adding $ symbols you can override the label function for the series data labels. There is example code for this in the plot_overtime example.

 

Hi
1_ I need a code to change the Font. I used the code you have sent previously in this forum, however the unity gives me errors. It says, the Font can not be loaded from the resources. I am not a very skilled coder.

Code (CSharp):

1. Text xTitleText = graph.xAxis.AxisTitle.GetComponentInChildren<Text> ();
2. Font TitrFont = (Font)Resources.GetBuiltinResource (typeof(Font), "B Mashhad.ttf");
3. xTitleText.font = TitrFont;
4. xTitleText.text = "xAxis Title";

2_ When I rotate the xAxis labels, they intersect with xAxis bar. How is it possible to change the y position of xAxis label to a point blower than the xAxis Bar using the code?

 

Hey,

Can work in VR (google VR) ?

 

1. The other code looks fine, sounds like a problem with loading the font. This should work

Code (csharp):

1.  
2. Font font = Resources.GetBuiltinResource<Font>("Arial.ttf");
3.  

2. For x axis labels - in the inspector it is graph -> XAxis tab -> "Axis Label Space Offset"
via code:

Code (csharp):

1.  
2. graph.xAxis.AxisLabelSpaceOffset
3.  

Yep, here is more info about user interfaces in VR:
https://unity3d.com/learn/tutorials/topics/virtual-reality/user-interfaces-vr

 

Thanks for reply

 

Hi!
I have a problem, updated graph maker from 1.5.1 to 1.5.6 and the label started to jump when value changes, is a line graph with one point and the node graph is a line made by me, the label has and Y 20 offset but in the new version the label appears much higher at the start and then goes down to the offset i put.



With version 1.5.1


With version 1.5.6

 

The label offset in older versions was not quite correct, and was fixed. Go to labels tab and set data labels y offest to be 0 if you want the label to appear directly above, you should then not need to have a custom function that changes the label offset either.

 

Thanks for your quick response, i set the X and Y Data Label Offset in the series to 0 but the problem persists. In the series in the tab Core i have the Point Width Height to 250 if i reduce to 0 or a small value the jumping disapears but also the line i use for the point, the line i made myself is a png with a white line of 128x2 pixels.

Thanks for your time.

 

Hi!
after doing this





got this Error

 

Is there any on Click_legend Event?

 

already have pie chart in sceen , in start()


var values = new WMG_List<float>();
pieGraph.sliceValues.Add(10);
pieGraph.sliceValues.Add(20);
pieGraph.sliceValues.Add(30);
pieGraph.sliceValues.Add(40);

pieGraph.sliceValues = values;

does not effect

 

Hey, thanks for bringing this up, I was able to reproduce the problem. It is an issue with auto animations. Insert this code at Line 72 in WMG_Graph_Auto_Anim.cs to fix

Code (csharp):

1.  
2. if (theGraph.orientationType == WMG_Axis_Graph.orientationTypes.vertical) {
3.                     newPos = new Vector2 (newPos.x, newPos.y + aSeries.AfterHeights()[i] / 2f);
4.                 }
5.                 else {
6.                     newPos = new Vector2 (newPos.x + aSeries.AfterHeights()[i] / 2f, newPos.y);
7.                 }
8.  

 

Ahh, woops. I introduced this bug as part of Graph Maker 1.5.6 for Text Mesh Pro users. To fix, please replace with:

Code (csharp):

1.  
2. theGraph.changeSpritePivot(curObj, WMG_GUI_Functions.WMGpivotTypes.BottomLeft);
3.  

Yes, legend event code example:

Code (csharp):

1.  
2. graph.WMG_Click_Leg += myCustomLegendEvent;
3.  
4. void myCustomLegendEvent(WMG_Series aSeries, WMG_Node aNode) {
5.         Debug.Log("Clicked series: " + aSeries.name);
6.     }
7.  

This is because Start() method of the Pie Chart got called after the Start() method of your script. Please call Init() on the PieGraph first in your Start(). Please see X_Simple_Pie example scene and WMG_X_Simple_Pie.cs code

 

I don't know why I am the only guy here with font problem. Could you plz help me how to change graph title font size and font style and series label(name, I don't know) font size and font style? In the picture I drew the line.