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

Thanks battal Check your email, and let me know if there are any issues.

 

Hey rorakin3,

Sorry to have to call on you again but I'm still having some trouble with paging between groups of ten sessions. I've PM'd you the details but essentially the graph is not liking having extra nodes and I can't figure out how to destroy the extras or get the graph to adjust the amount of nodes based off the new point data.

 

Hey,
No worries, check your email if you haven't already

 

Graph Maker 1.3.8 is now live, enjoy making graphs with UGUI!

 

Is version 1.3.8 the version that has the fixes for NGUI v3.7.1 / Unity 4.5.3? Or do I need the version you're emailing out? We just started upgrading our packages and our dot/line sizes are going a bit crazy.

 

Yea, 1.3.8 contains all the latest fixes for NGUI that I was emailing out. Let me know if there are other issues.

 

Is there some sort of upgrade process we missed out on then? We upgraded NGUI first (their instructions say to open an empty scene, delete the NGUI folder, then install the new update). Then just downloaded and imported your plugin over our old stuff. Did we need to delete that first as well?

 

If your getting a new NGUI, then yea you would delete both Graph Maker and NGUI folders, import the new NGUI and then import the new Graph Maker. If your just getting new Graph Maker, then delete Graph Maker folder and import the new Graph Maker.

Perhaps post a screenshot of the issue if that doesn't work.

 

Hello, I've been using the plugin for the last week (with NGUI 3.7.1, Unity 4.5.3) or so and have a little bug that would be good to get fixed. If you toggle the 'use xDist between to space' and 'auto update xdist between' the points don't correctly space (they're squashed too much vs. the length of the x axis). This can be seen in the Data_Gen example scene.

Additionally, as a suggestion - I think the plugin could be easier to use if you split the (massive) number of properties onto different objects, maybe one for the legend, one for the axis etc. Otherwise great job with the plugin - saved me a lot of time!

 

Hey, thanks. Yea, I originally wrote the auto update xdist mostly for bar charts as you tyipcally don't enter numerical data for horizontal axis, but I will see about adding better behavior for line graphs.

Yea, I really should look into adding custom inspector UI that has collapsable regions now that there are alot of properties. I only worry about the constraints this would impose for the Unity version, but I will need to investigate

 

I have Unity 4.6, I am very interested in your product. I'll be using UGUI. I'm looking to make live graphs using real-time stock market float values, does your package support such an ability?

 

Hey games, (wow how did you get that username!)
Yup, Graph Maker works for 4.6 (UGUI) now, and basically you have a couple options for populating data in the graph.
1. Manually modify a list of vector2's which contain the data of the graph, the vector2 being the data you grab from the stock market.
2. Use Real Time Update functionality included with Graph Maker which can grab data from an arbitrary script's float variable / property.

If you truly need real-time, then you should be able to use #2 with no performance issues, so long as you do not have alot of data points on the graph at any given time. You can control how many seconds are on the x-axis.

If the graph only needs to update like once a minute or everytime you call a function, then #1 will be better.

 

Hi man! ...any help using pieGraphs? I would really appreciate you to show me some tutorials to make it work. Any chance having them in 3D?

 

Hey! Yea, sorry only 2d. Might be possible to add some extra 2d sprites to make it "look" 3d, but I'm not really an artist Pie Graph is very easy to setup, you just drag and drop the prefab, and then change around the parameters on the Pie Graph script.

Feel free to drop by my livestream when it's on for a live demo of any Graph Maker functionality (offer goes to anyone). I stream almost everyday, link and info here:

http://forum.unity3d.com/threads/wip-my-little-moba-live-streaming-dev.270017/

 

Hi, sorry for the -what most likely will be- stupid questions, however I am still new to programming and until now have not used / learnt arrayLists all that much and was wondering if you would be willing to help / point me in the right direction.

the scenario is I have loaded data from an sql database into a float arrayList, I need to then transfer this into graph maker, my trouble starts with GM using vector2 lists, what is the best way to get this list of floats that have been loaded from the database into GM.

 

Hey,
Create a new list of vector 2 (lets say it's called myList). Loop through the list you get from the sql query (lets say it's called sqlList). Within the loop add a new vector 2 using the value from the sql list. Also make sure to add using System.Collections.Generic at the very top of your script when dealing with lists.

Code (csharp):

1.  
2. using System.Collections.Generic;
3.  
4. List<Vector2> myList = new List<Vector2>();
5. for (int i = 0; i < sqlList.Count; i++) {
6.     myList.Add(new Vector2(x, sqlList[i]));
7. }
8. mySeries.points = myList;
9.  

Then assign the graphmaker list to the list of vector 2 you just created.
As for x, well if you don't have data for 1 dimension, you can either create your own, or set a bogus value like 0, and then use auto-spacing settings as is done for the example bar chart assuming you want the data evenly spaced.

 

Sorry I have not got back to you sooner, however I would like to say thanks for your help, just one last question, as you have added compatibility for unity 3.5 are these being kept up to date along with the unity 4.2 version?

 

Hey, good question. The older versions of Unity and NGUI are up to Graph Maker 1.3.5. If Graph Maker features appearing in versions after 1.3.5 on Unity 3.5 and / or NGUI 2.7 are really needed, you can copy and paste all of the code files and create the prefabs yourself. Just use the current version as a reference, and it will be fine. Only reason I don't keep all of these up to date is the work involved in creating all the prefabs across 6 projects.

 

Thanks for this great asset,

Unfortunatly in the latest version (1.3.8 as of this post) I am getting the following errors when building for Windows Store Universal:-

Assets\Graph_Maker\Scripts\WMG_Series.cs(1035,49): error CS1061: 'System.Type' does not contain a definition for 'GetField' and no extension method 'GetField' accepting a first argument of type 'System.Type' could be found (are you missing a using directive or an assembly reference?)

Assets\Graph_Maker\Scripts\WMG_Series.cs(1037,49): error CS1061: 'System.Type' does not contain a definition for 'GetProperty' and no extension method 'GetProperty' accepting a first argument of type 'System.Type' could be found (are you missing a using directive or an assembly reference?)

Assets\Graph_Maker\Scripts\WMG_Series.cs(1047,49): error CS1061: 'System.Type' does not contain a definition for 'GetProperty' and no extension method 'GetProperty' accepting a first argument of type 'System.Type' could be found (are you missing a using directive or an assembly reference?)

Assets\Graph_Maker\Scripts\WMG_Series.cs(1138,46): error CS1061: 'System.Type' does not contain a definition for 'GetField' and no extension method 'GetField' accepting a first argument of type 'System.Type' could be found (are you missing a using directive or an assembly reference?)

Assets\Graph_Maker\Scripts\WMG_Series.cs(1141,46): error CS1061: 'System.Type' does not contain a definition for 'GetProperty' and no extension method 'GetProperty' accepting a first argument of type 'System.Type' could be found (are you missing a using directive or an assembly reference?)

Assets\Graph_Maker\Scripts\WMG_Series.cs(1144,58): error CS1061: 'System.Type' does not contain a definition for 'GetProperty' and no extension method 'GetProperty' accepting a first argument of type 'System.Type' could be found (are you missing a using directive or an assembly reference?)


Assets\Graph_Maker\Scripts\WMG_Series.cs(1145,45): error CS1061: 'System.Type' does not contain a definition for 'GetField' and no extension method 'GetField' accepting a first argument of type 'System.Type' could be found (are you missing a using directive or an assembly reference?)

Any way I can implement a quick fix? Or would you be able to get one out anytime soon? Or can I at least comment this out without worrying about real-time updates (i wont need real time updates, just a graph showing data when initialized?)

Thanks

P.S This asset is awesome!

 

Oh, I guess reflection is not supported in Windows Store Universal. I wonder if there is an assembly directive I can check for that. Yea, the quick fix, if you don't use real-time update, is to comment out the stuff related to real time updates, which should all be in the WMG_Series script. Should be the start and stop real time update functions. Thanks for posting, and letting me and others know.

 

I've just run into a different but related problem, HOTween dll is throwing up 300+ errors related to reflection. An example is :-

Reference Rewriter: Error: type `System.Reflection.Emit.ILGenerator` doesn't exist in target framework. It is referenced from HOTween.dll at System.Void FastDynamicMemberAccessor.FieldAccessor::_EmitGetter(System.Reflection.Emit.TypeBuilder).

Is there a way I can omit HOTween from my project? I just need it to show bar graph data.

 

Oh wow, that is not good. Yea, it is used for animations. You can delete the HOTween folder, and then there are 3 scripts that use animations:
1. WMG_Graph_Auto_Anim
2. WMG_Axis_Graph
3. WMG_Graph_Tooltip
Comment out the using Holoville.HOTween, and comment out everything that shows errors that come from that.

 

I've been using the BarChart Stacked feature. is there a way I can get each one of the the X Axis Labels to center on their own bar? I cant seem to get them to center properly. It seems to go more and more off as it progresses down the x axis as you can see in the screenshot:-

Here is the settings i have in the inspector:-
WMG_Axis_Graph (top half)


WMG_Axis_Graph (bottom half)


WMG_Series 1:-

WMG_Series 2:-

 

Hey,
Thanks for the question. This one is a bit tricky, and I may add an option in the future to make this easier. But for now this is how you do it.

1. Set the # X axis ticks = the number of bars you have +1 (The labels are based on the ticks, so to make the labels center on each bar, each tick needs to correspond with each bar. Increase by 1 because the first x-axis tick is at the y-axis)
2. Make each tick correspond with each bar by increasing the WMG_Series "Extra XSpace" parameter.
3. On WMG_Axis_Graph, set Auto Center XAxis Labels to false, and set XAxis Label Spacing X to 0.
4. On WMG_Axis_Graph, set the first element in the list for XAxis Labels to empty string, and set the rest based on your player names.

Here is what it looks like from the example scene:

Edit: I see that you have hidden the y-axis. In this case the # X Axis Ticks can equal the number of bars you have.

 

Hi, just bought it recently and going by the tutorials and finding they don't apply to UGUI. Is the WMG_Editor example shown in the videos going to get a UGUI version?

 

Yea, the editor scene is a deprecated example, only available in NGUI. The tutorial videos are about the editor, I think I removed the links to them. I'm guessing you found them with a youtube search.

 

Is there any tutorial about how to set point values from other script?

 

Hey,
Grab a reference to WMG_Series and set its points. For example, code for your new script:

Code (csharp):

1.  
2. using System.Collections.Generic;
3.  
4. public WMG_Series mySeries;
5.  
6. public void updateData(List<Vector2> newData) {
7. mySeries.pointValues = newData;
8. }
9.  
10.  

Alternatively, you can get a reference to WMG_Series from WMG_Axis_Graph:

Code (csharp):

1.  
2. using System.Collections.Generic;
3.  
4. public WMG_Axis_Graph myGraph;
5.  
6. public void updateDataForSeries(int seriesIndex, List<Vector2> newData) {
7. myGraph.lineSeries[seriesIndex].GetComponent<WMG_Series>().pointValues = newData;
8. }
9.  
10.  

 

Hi,

I bought your package recently specifically because the map demo you showed looked perfect. I was pretty disappointed however when I could not find it. I realized this is because it is only in the NGUI package. While I do own NGUI, I now use DFGUI exclusively (although depending on how UGUI comes along it will likely move to that.) It's not that big of a deal really. I'm writing my own solution and the asset is still very useful. I just wish I had of known going in that the asset only actually offered an example of the map for NGUI.

I'm using the Graph Manager to generate locations and links and have written my own controller classes. I will be fine with everything I hope, but I'm not yet sure how you do your animations. I'm guessing I just set them up in DFGUI like I would with other DFGUI stuff.

I've also been looking into your pathing solution and hopefully that should work quite well for me.

Anyway, thanks for the asset. It's really good work.

 

Thanks Nakor. I did remove screenshots of these from the store page, but forgot to update the original post. I've modified my original post to make this clear.

 

It's still good that it's in there though. I think it is a big thing that will appeal to more people than just me. Might be worth putting it in for all UI's that you support and making a bigger deal of it on the asset page (and the post).

For the record, even if I wasn't able to adapt my own solution using the parts of your asset already here, I do plan on displaying statistics in my game later on in development. My game features a great deal of trading. It will also require displays on trade route usage (pirates have got to eat too you know ).

 

Thanks for the work around. I've given these steps a try but still couldn't get it to align. But after a few hours I realized that I also needed to add a blank set of bars as I added a blank label.

Edit: after some more thorough testing, this work around still doesn't seem to be enough. I cant get the labels to align. I'm going to try cook up my own labeling solution for now.

 

Hi rorakin,

I'm curious about what kind of control I have over the slices created by the pie chart script. How is it possible to tweak the font/text size of the slice labels? Also, does anything in the script keep track of the coordinates of each slice? That is, if I wanted to determine whether or not the cursor was hovering over a particular slice, would that be somehow possible?

Thanks!

 

I guess what I'm really asking here is if it is possible to put a polygon collider 2D on the slices?

 

Hey,
Good question. No, as far as I know it is not possible to use a polygon collider with any of the GUI systems to make the pie slices clickable. You can vote for the feature for UGUI here
http://feedback.unity3d.com/suggestions/4-dot-6-ui-polygon-collider

 

Hi rorakin,

i apologise if this is an obvious question but I am wondering if it is possible to interact with (select) nodes within a hierarchical tree view?

 

Yep, basically you specify a prefab that will be used to create the nodes of the tree. Your prefab can have whatever you want, button script, collider, etc. Then just have your own manager script appropriately handle the GUI events generated. You can also specify different prefabs for different nodes, but requires some more work. There is more info about this in the documentation.

 

@rorakin3
Hello,
Can i use this asset to visualize the tree that's created by my minimax algorithm implementation,
I'm looking to be able to see the tree visually in real-time in my application. If this asset would help with that i would consider buying it.
Best Regards,

 

Hi,
The minimax algorithm appears to be a decision tree that extends in hierarchical fashion, so it should be straightforward to use the existing hierarchicalTree implementation in Graph Maker. As for visualization, you will probably want to do things like change colors of nodes or animate links. These things should also be easy to do as there are API functions for getting nodes and links, and there are also additional API functions specific to hierarchical trees for getting things like the nodes of a certain level in the hierarchy. There are also functions to create nodes and links dynamically at run-time, if for example you don't want the tree to be static. You can refer to the random graph example for creating nodes and links dynamically.

 

Silly question: is there a simple way to make a line graph scroll like an EKG, so the value on the far right of the screen slowly migrates to the left and eventually disappears? I could do it manually by shifting every value one index down at a certain time interval, but that would look jerky and slightly weird.

 

Have you taken a look at the real-time update example? In that example, the line does scroll in real-time by continuously updating the x-axis values.

However, this doesn't look how EKG works. I looked at a few EKG youtube videos, and the graphs appear to simply restart at the beginning of the x-axis when it reaches the end (right-side) of the x-axis. So the line doesn't move in real-time. In this case, it is much easier and not performance intensive since the entire graph is not updated in real-time (only the most recent point is plotted). To do this, you can simply overwrite old data on the x-axis once you've reached the end of the graph.

 

As a reminder, I do live stream development via Twitch, so if you do have questions or want a demonstration of something in Graph Maker, feel free to drop by my channel and ask

http://www.twitch.tv/stuartsummerfield

 

I run into a problem when trying to use Graph Maker in a project which UI is done with UGUI. when adding a graph into Canvas, its layout simply goes nuts and graph's elements are in wrong places. I found out, it is caused by the Canvas Scaler-component in root gameobject with Canvas and in Canvas Scaler setting 'Ui Scale Mode' to 'Scale With Screen Size'. Can you say is there a work around for this? UI in my current project depends on 'Scale With Screen Size' setting, and would be painful to change it and do UI layout from the beginning.

 

Thanks, I will take a look into this this weekend. Unfortunately there is no magic way to autoscale the graphs. You can create a script to update various things based on scale. So, when changing scale, you kind of have to consider all the elements that compose the graph, such as:

1. The width and height of the axes
2. Font size of axes labels, data labels, axes titles, and graph title
3. Width of bars, width / heights of points
4. Width of line graph lines
5. Width of axes / grids
6. Vertical / Horizontal spacing of legends (if enabled)
7. Tooltip (if enabled) size and tooltip font size

It is a fairly common question / request for Graph Maker graphs to scale arbitrarily. I have been meaning to add such a feature, as I think it will be pretty useful to a number of folks, and so I will probably look into doing it pretty soon / in the next update. I imagine the way the functionality would work is it would be a separate little script that you can attach to any graph maker graph, that has various options to disable / enable auto-scaling for the things I listed above, and then also take as input a parent rectangle via gameobject reference, such that when changed it would update the correct Graph Maker variables.

 

Hey, if possible, can you email me a simple project that reproduces the "going nuts" behavior you are seeing? I have run a fest different test cases using 'UI Scale Mode' and 'Scale with Screen Size', and have not really seen any strange behavior.

 

Hey guys, I'll be doing a significant update to Graph Maker soon, which will fix a few miscellanous small bugs reported since last update and also add a couple new features. One will be the addition of "Radar" graphs! This has been requested quite a few times, and now they are finally here! Here is a screenshot:

 

Hey guys, I just submitted update 1.3.9 which brings 2 new features- Radar graphs and dynamic resizing capabilities. Here are the changes -

1.3.9
- NEW: Radar graphs! Now you can create pentagonal or other shape based graphs!
- NEW: Graphs can now dynamically resize! There are several options to select what gets resized. Because of this change, you may get runtime errors upgrading Graph Maker from a previous version. To solve this ensure your existing graphs have a RectTransform or a NGUI widget component at the graph root.
- FIX: BUilding for Windows Phone 8 reflection issues addressed with separate reflection static class with assembly directives. Note that HOTween dll also needs to be changed for WP8 build (refer to HOTween website).
- FIX: All animations are now independent of time scale (can work during pause screen).
- FIX: The auto-update space between functionality behavior has been improved.

 

This is a bit of a long shot, but can the API currently draw DOT or neato format graphs like the following?

Code (csharp):

1.  
2. graph TestGraph {
3.    layout=neato
4.    107254 [label=Door,shape=hexagon];
5.    118514 [label=Door,shape=hexagon];
6.    128626 [label=Door,shape=hexagon];
7.    129680 [label=Door,shape=hexagon];
8.    105738 [label=Office,shape=box];
9.    107684 [label=Hallway,shape=box];
10.    120596 [label=Bathroom,shape=box];
11.    125988 [label=Closet,shape=box];
12.    128466 [label=Office,shape=box];
13.    107254 -- 125988;
14.    107254 -- 107684;
15.    118514 -- 107684;
16.    118514 -- 105738;
17.    128626 -- 128466;
18.    128626 -- 107684;
19.    129680 -- 107684;
20.    129680 -- 120596;
21. }

 

I'm getting these errors on importing the UGUI package.



Basically there's another "Image" class of the old legacy UI system. I have to change it to UnityEngine.UI.Image to solve the ambiguity. Is this the intended behavior?

 

Does this work with the recent Unity 4.6 UI system?