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

Hello! And thank you for this great asset. I will describe you my simple problem:
I have a bar graph, each bar consisting of three series. I change the number of bars showing on runtime. What i want to achieve is that the size of bars (3* size of series) and the space between them, remains constant, and the only thing that changes is the length of X axis of the graph. What happens now is exactly the opposite. If i have only one bar it's width is huge, if i have many bars their width is more like a line. What should i do to correct this?

 

Hey!
I'm currently trying to use this in Unity 5 (Unity UI) - looks good so far.
However, the grid lines don't seem to work properly. You can reproduce this by opening the Graphs_Test example scene and increasing the size of the rect transform of the line graph (about double the size should be enough).
The grid lines disappear and the following error is printed to the console: "Canvas element contains more than 65535 vertices. This is not supported" (without backtrace, unfortunately).
The grid lines do indeed have a lot of triangles (more than needed, maybe?), but it certainly looks like less than 65535, so I think it might be putting a ton of superfluous vertices somewhere?

Edit: unrelated problem, but it looks like you can't add a series from within Awake/Start/OnEnable?

 

Does Graph Maker work with Unity 5 and uGUI? Is the source code included in case I need to make tweaks for my project? Is there a link to your pdf documentation?

Thanks in advance,
Jeff

 

Hey guys,
Just want to give a preview of some of the things coming in the next update.
Ring Graphs:



Ring graphs are a series of rings and optionally bands. The bands can also be semi-transparent (they are actually bands, not overlapping circles).

Custom Editors:



The parameters are now grouped into sections, clicking a button in the custom editor will show the parameters related to that section.

 

Yup

No, I have not seen that error. What version of Unity are you using?

Looks interesting, but no Graph Maker doesn't take as input text files or other files input files specifying data. You could probably write something to parse that file, and turn that into a series of Graph Maker API calls pretty easily though. You can refer to the Random Graph example as an example for dynamically constructing undirected graphs via Graph Maker API.

You can write some code to change the "barWidth" parameter based on the # series, Max # points, axis length, and your specified # pixels.
In the next update, I am adding an "AutoUpdateBarWidth" boolean. When enabled, the bar width will be updated automatically based on all of these factors ensuring the bars never overlap. Also changing chart orientation will modify the bar widths based on the ratio of lengths of the axes.

Yeah, that problem is a bit annoying. It is because the grid lines are based on a tiled sprite that is only about 4 pixels I think. The only fix I know of is to increase the resolution of the source image for the tiled sprite. I will do this, and also see if there is a more elegant solution for the next update.

I can look into dynamically adding series working in start / awake / enable. In the meantime, if you add some code to wait for 1 frame for those functions, it should work.

Yup, I tested the UGUI pacakage in Unity 5 last week, and it surprisingly imported with no errors, and worked with no issues. So, yeah, the version on the store right now works for Unity 5.
All source is included
Shoot me an email and I can send you the pdf.

 

Maybe a quad with a repeated texture works?

Yeah, that's what I'm doing. Works, just seemed a bit odd

Another thing that's a bit annoying: the graph prefab has a couple of graphics that don't match the graphs RectTransform, so if you change the size of the graph it overlaps everything else:

It's fine at runtime...

...but makes UI design a bit of a pain since you don't see what you're doing.

The new ring graphs and custom editors look great!

 

Thanks for answering my questions. We'll probably buy a copy soon.

 

Hi,
i created 4 series in a grid and positioned everything well in 4:3 aspect. I also support different aspect ratios like 16:9.
Normally i use anchors of ngui to support different aspects. How do i do it best with graph maker?
camelord

 

I agree, I will address that in the next update.

Hey, I presume you are using NGUI + Graph Maker 1.3.9. Set the resize type and the resize properties on the graph script, and then just make sure your anchors are for the graph's root gameobject (the one with the graph script), and the UIWidget should update, and Graph Maker will use the width and height of the UIWidget.

 

thats cool, thanks!

 

Another thing:
i heavily use NguiVisibilityBinding to show Panels depending on the game state.
WMG_Axis_Graph and WMG_Pie_Graph show no effect, when is add the NguiVisibilityBinding component on the corresponding GameObject.
How can i show/hide the gameobject that uses those WMG_xx components?

camelord

 

Hey camelord,
Apologies for the delayed response here. I recently finished importing my changes from my Graph Maker UGUI project to the Graph Maker NGUI project. I upgraded to the latest version of NGUI, and I am not able to find a NGUI component for "NguiVisibilitiyBinding". If you can tell me the exact name of the component or where to find it, please let me know.

I should be posting a new version (1.4) of Graph Maker pretty soon (today or tomorrow).

 

Hey guys,
I uploaded a new version (1.4), which has quite a few new things. Here is the change log -

1.4
- NOTE: This version brings many many changes, and is thus incompatible with previous Graph Maker versions.
- NEW: A new type of graph has been added called Ring Graph.
- NEW: Custom Editors! Now it is much easier to interact with publicly exposed Graph Maker variables via the Unity Editor.
- NEW: Pie graph updates! Now possible to make doughnut graphs from pie graphs. Also possible to explode slices such that they evenly align at the outside edge.
- NEW: X/Y axis Labeling system rewritten / greatly improved for axis graphs. Use label types to easily define label behavior. Can now also be independent from grid ticks.
- NEW: Legend system has been rewritten. Pie graphs and Axis Graphs now use identical legend code, and legend parameters are specified on a legend specific object.
- NEW: Now possible to graph null values (e.g. broken line segments). Use the newly added groups and enable grouping variables to do this.
- NEW: The animation library HOTween has been replaced with the newer / faster animation library DOTween.
- NEW: WMG_Data_Source has been added to make it easy to auto pull data from a generic object data source using reflection. Works for PlayMaker variables as well.
- CHANGE: All graphs now expose a public Refresh() function, and an Auto Refresh boolean. Disable auto refresh and manually call Refresh() for slightly improved performance.
- CHANGE: X/Y axis lengths have been removed. This is now controlled entirely by the width / height of the root rect transform / NGUI widget.
- CHANGE: Daikon Forge is no longer supported / updated since this GUI system is no longer supported / updated.

 

Woooh, just noticed this. Looks pretty awesome, and the fact that it also works with Unity's UGUI is fantastic. Kudos!

 

Hey, I was wondering, is the max vertices error also fixed in version 1.4?

 

Thanks Izitmee! I've used your tween libraries for a long time, great stuff

Yeah, you won't see this error anymore, though the grid lines look a bit different now!

 

Can this package be used for world space graphs, i.e, for diegetic interfaces?

 

Great question, Graph Maker certainly can be used for worldspace. However if you are thinking of something like a dozen graphs animating as part of world / level detail, then you will probably run into performance issues. AAA Games that do this typically use a static set of pre-defined textures, and animate them that way.

 

I'm trying to create a pie chart with a size and position as shown in the attached image. The background is about 500 x 250 px and its positioned in the upper left hand corner in this case.

I've been playing with version 1.4 most of the morning and the default pie graph looks great, but I am confused about exactly what to change to get a pie chart as shown. It seems that the easiest way to position it in the corner would be to use the Rect Transform (width, height, and pivot x and y). I also see that in the editor you can change "Pie Size" and left/right and top/bottom padding. But when messing with all this, eveything kind of goes berzerk. If you change pie size, something else seems to override it. So, the question is ... what exact steps would you take to get a chart like that shown. I am confused about what is driving what ...

 

Hey,
Yeah one thing I did recently for the line / bar graphs was to get rid of the xAxisLength and yAxisLength values entirely and base everything off of the rect transform / widget width / height. This was one the last big changes I did before posting the 1.4 update, and I didn't do the same yet for Pie Graphs.

So you can expect an update pretty soon that will remove the pieSize variable from pie graphs, so that the behavior is similar to the line graphs.

 

Hey!
Nice update, much more comfortable to work with now thanks to using the RectTransform/custom editor

I'm currently trying to figure out how the x-Axis labels work - I think they're called "groups"?
I've got a bunch of historical data, one data point for each month, over a span of multiple years that I'd like to have graphed. The x-Axis should show labels for the months, matching the positions of the data points. I created one group entry for each data point and set X Label Type to "Groups":


Is there some way to make it selectively draw only certain x-Axis labels, so that it's readable? Or do I have to take care of that myself when creating the groups entries?

I'm also not entirely sure how to format the y-Axis labels differently - was looking for something like a list of strings I can give to the series in addition to the point values that'd be used when drawing the labels/tooltips instead of the raw numbers? Or a callback method that receives the number and returns a formatted string?

 

Hey thanks, glad you like the custom editor / rect transform changes!

So, there is basically 2 ways to do the labels. One way is based on "Ticks", and the other way is based on "Groups".

For tick based labels, the labels should align with the ticks (except for the label type of Ticks_Centered in which case the number of labels is the number of ticks minus 1 and the labels are centered between the ticks). You can set the number of ticks directly, as well as set the labels directly using the List<string> on the graph. Alternatively to setting the labels manually, the labels for ticks can also be based off the axis min / max values.

For group based labels, it means there will be a data label for every group, and the label will align with the data point corresponding to the group on the graph. Groups also makes it possible to graph Null values (e.g. gaps in the data). So, you can still use groups and not have group based labels.

Group based labels is more designed for a small number of groups like 12 months for example, and also more for bar charts as opposed to line charts, so that the label clearly corresponds with one of the bars for example.

Since the data you are graphing is much more granular than the labels you want to display, I would advise doing tick based labels, and setting the List<string> on the graph directly via code so that you have more control over its display. I would also set the number of ticks manually via code based on how much data you are graphing. For example if you are graphing 4 years worth of data, and want to display quarterly dates, you could set the number of ticks to 4*4 = 16, and set the List<string>, which should be of length 16 for tick based labels.

Another thing to help with labels overlapping is setting the label rotation. Giving a slight rotation like 30-45 degrees should make it look a little better and also fit more labels.

As for y-axis labels, the default graph does tick based labels based on the min / max axis values. So, for custom formatting, I think just change it to not update based on the min / max values (by unchecking the boolean for that). Create a function to for example to look at min / max axis value, and number of ticks, and apply your custom formatting and then set the List<string> on the graph.

 

Hi,
I just bought the asset few hours ago. I got the following error while building the unity player for my game.

Assets\Graph_Maker\Scripts\Misc\WMG_Reflection.cs(15,17): error CS0246: The type or namespace name 'IEnumerable' could not be found (are you missing a using directive or an assembly reference?)

The referred code relates to using Windows Phone 8. However, I am using the Windows Store App platform!

Any suggestions, Thanks

 

This was resolved via email exchange, and will be fixed in the next update (1.4.1). If anyone else encounters this in the meantime, just add the following lines to the top of WMG_Reflection:

using System.Linq;
using System.Collections.Generic;

 

The latest version of GraphMaker is really awesome.
Thanks for the superb update.
Really enjoying all of the features and improvements. The new Ring Graph, the new inspector for the graphs and all of the goodies.

Cheers.

 

Hi,
Is there a way, out of the box, to format the Y axis labels for financial numbers (e.g. $100,000 instead of 100000)?
If not, then what would be the best practice to do that using C# scripting? I tried using List<WMG_Node> getYAxisLabels() but it always return a null value even though the graph has data that is actually plotted!
Thanks
Alaa

 

I have not purchased Graphmaker (yet), but this is how you do it with C# string formatting

https://msdn.microsoft.com/en-us/library/dwhawy9k(v=vs.110).aspx#CFormatString

 

Hey mate, am interested in purchasing the asset but I have several questions.

Instead of typing them all up... do you think you could post a link to the PDF documentation please? That would probably answer them.

Thanks

 

@rocki
Much appreciated rocki! It's hard to believe its been more than a year since Graph Maker was released, always good to see you post!

@AlaaSerry
Hey, no out of the box formatting, I may consider adding it later but to change label text you just set the List<string> yAxisLabels. Ensure that you set "SetYLabelsUsingMaxMin" to false when doing this.The function getYAxisLabels () is more if you need to do something special to the label objects themselves, such as add your own script or change their font or something. The WMG_Node has a reference to the actual label gameobject if you really need to do this dynamically. Otherwise things like changing font could be done by changing around prefabs.

@philwinkel
Hey thanks for the link, that looks pretty simple to do currency formatting. Feel free to send me an email and I can send you the PDF.

 

Thanks folks. Here are two more questions:
Q1: How to customise, via a script, the info shown when the user hover over a chart data point or a bar?
Q2: How to hide the axis arrow via a script?
Thanks.

 

Hey -

1. This is best done editing the WMG_Graph_Tooltip script which is in the GUIDependent folder under the scripts folder. You should only need to make tweaks to the TooltipNodeMouseEnter() function.

2. Set the xAxisArrows and yAxisArrows Boolean arrays. The first element corresponds with right / top arrows. For example, to hide the x-axis left arrow and show the x-axis right arrow you would do -

Code (csharp):

1.  
2. graph.xAxisArrows = new bool[2] {true, false};
3.  

Note that setting the axesType automatically sets these. If you want a specific axes quadrant, it is better to just set the axesType via code.

 

Hey guys,

Some of the things I'm working on for the next update -

1. Combo graphs (line + bar on the same graph)
2. Auto-fit label options on the graph (so that labels don't overlap or run outside the graph). This involves several options that affect font size, label rotation, and border padding.
3. All publicly exposed variables and lists will be observable and immediately call functions when changed. This will eliminate some subtle "wait 1 frame issues", and should improve performance as there will no longer be any checking against a cache in Update().

As always, let me know what you'd like to see in the next update!

 

Great to see the list for the next update.

I have a question: I am using Graph Maker with NGUI and making a hierarchical graph. For the nodes, I am using Rectangle shapes. The problem I'm running into is that the link lines that are drawn are calculated for a square or circle.

Request:
1. support for rectangular shapes.
2. Able to draw links from a position that is offset from the center of the node. For example, I have a fromNode that is a rectangular shape and I would like the link to start from the bottom of the rectangle instead of the center. For the toNode, I would like the link to be drawn to the top center of the node.

Perhaps there is an existing way to do the above that I don't know yet.

 

Hey rocki, good suggestion. I envision each link could have a to and from offset, and a use offsets boolean to indicate to use these values. Another idea is just have a target transform that can be associated with the link. This way you could add an empty transform object that is anchored relative to the node and not have to worry about setting offsets. I'll look into this for the next update.

 

That would be awesome.

 

Hi rorakin3,

Currently getting to grips with your plugin however there appears to be a bug in the line graph animation. The left hand link to the value appears to animate at a different rate. This occurs on any point value. I have attatched a gif showing this.



Things to note about my configuration:
- Graph has been increased in size to fill a screen
- Max Y value of 1050
- Uses static example data (12 point values)

 

Hey,

Since then our project was put a side for a while, and forgot to contact you, I am sorry about that. But now project is active again and i need help how to solve my problem.
I can reproduce this problem with one of the examples that came with Graph Master. I am now using Unity 4.6.4. and Graph Master v2.0.3.
I imported into empty Unity project Graph Master.unitypackage and from its examples I tested 'Transient Example'. I changed from root Canvas 'Canvas Scaler'-component's Ui Scale Mode from 'Constant Pixel Size' to 'Scale With Screen Size'. This only goes wrong if I change this before i hit the play in Unity. If I am in play mode and then do this change in Canvas Scaler component, it works fine.
And by nuts i mean that all the lines & labels positions are wrong and the are drawn outside the defined Rect Transform in 'Graph' GameObject .
If i put from 'Canvas Scaler' Reference Resolution to X 2048 & Y 1536 which is same as is in our current project labels and lines goes even further away from where they should be.

I would have sent email for you, but could find any address, so i try this way first

Thanks for your help in advance!

 

Hey there, sorry but it looks like you have posted in the wrong thread. This thread is for Graph Maker. It looks like Graph Master is another product.

 

Hey, thanks for bringing it to my attention. It looks like this occurs when auto animations are enabled and you set data in rapid succession (e.g. multiple values within the duration of the animation). I just fixed it and will be in the next update. If you want the fix now just send me an email with your invoice # and I can send you an updated package. Otherwise if you don't really need animations you can disable it by unchecking auto animations on the "Anim" tab.

 

Just great, i really should pay more attention with names. Thanks anyway And i will try out Graph Maker now.

 

Hehe no worries, thanks for trying Graph Maker

 

Hi,

1. How to get all WMG_Node nodes of a graph, GetPoints() returns a list of Vector2 items not a list of WMG_Node nodes?
2. What would be the best-practice to programmatically add customized data to a WMG_Node in a graph (especially for a scatter plot)? I need this custom data to process a node clicked event.

Thanks,
Alaa

 

Hey,
1. WMG_Series.getPoints() returns List<Gameobject> representing the points of the series. Each Gameobject will have a WMG_Node script attached.
2. Best practice -
a. In Start() - WMG_Axis_Graph.WMG_Click += MyCustomFunction
b. Create MyCustomFunction with signature - void MyCustomFunction (WMG_Series series, WMG_Node node).

Refer to WMG_Events.cs for the full list of events. There should be separate click / hover events for nodes / lines, as well as legends.

Refer to WMG_Graph_Tooltip.cs for examples of use of the hover events.

 

Thank you kindly for your prompt response.

For folks out there considering buying Graph Maker, all I can say is that I bought it about a month or so ago and I am glad to report that it has already paid its cost many time around. In addition, the support either via private email with the publisher or through this Unity forum is excellent.

Thanks again.
Alaa

 

Hey, I just got your plugin and am trying to get the samples to run in 4.6 using UGUI. There are tons of missing scripts on objects all over the place and it just doesn't seem to work. Is this something you have seen before? 4.6 and UGUI should work right?

 

Yep, it works with 4.6. I just created a new 4.6 project and imported the Graph_Maker_UGUI package, and ran the example scenes without issues. Did you import Graph_Maker_NGUI by mistake? If not do you see any errors in the console ? If so what are the errors ?

 

Seeing lots of this across all the samples http://i.imgur.com/InNTJnl.png

Running Unity 4.6.5 on a Mac trying to run in the editor.

 

It seems to have been an issue with Unity 4.6.5, after updating to 4.6.6 it is working now.

 

Upgrading versions likely cleaned up some files in your project. I think you're running into some generic compiling / reference issues. Has something to do with the .meta files. Some more info:
http://forum.unity3d.com/threads/ge...he-associated-script-cannot-be-loaded.185994/

 

Hello,

I just bought your plugin and at first sight it seems to be very good! I needed a simple Graph that shows data. I have different tabs for different data. I wanted a smooth animation between the different data and it almost works great. Almost .
This is what happens:



As you can see, when changing to the money tab the lines glitch a little bit.
I think this is a bug, and if this would work correctly the animation would be very smooth!

If you need some more information, I will happely provide it.

Another question I got, when setting the data for the graphic, do I have to set the max x and max y manually? In the gif above I did do it manually. When I do not set the max Y the lines go out of the graph or you can not see the lines good enough because the number is too close to 0.

Thank you for reading, and of course creating this awesome plugin!

Sincerely,
Floris Weers, WeersProductions