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

Hey there,
Thanks, yeah it is a glitch. Another person reported it about 15 posts above this one. Feel free to send me an email and I can send you the fix via email. I'm in the midst of a big update, so the fix won't be available as a new version on the store anytime soon.

 

I think the next update could use more documentation on how to submit data and maybe even a sample script.

 

Sure, I'll probably do some video tutorials with the next major update (1.5), probably around 5 short videos. This will probably be helpful for several people!

 

I'm exploring the Radar graphs and was wondering if it is possible to have the area contained with line segments filled? I tried using the "area shading type," but that did not seem to work. I've attached a screenshot of what the ideal graph would look like.

Thanks for any help!

 

Hey,
Thanks, yeah that is a tough one. Unfortunately Graph Maker can't do shading of closed loops at the moment, but it is something I will probably look more closely at for the update after the next update.

 

Ok, thanks for getting back to me!

 

Hi rorakin3,

Wanted to ask if there are any plans to implement a "highlighted region" option. Something like below:



I'm considering implementing a basic version myself - are there some handles on which i can easily grab the graph width/height to scale an extra image at a chosen start/end point?

Thanks

 

Hey,
It should not be too difficult to add it. Just use graph.xAxis.AxisLength and graph.yAxis.AxisLength as well as graph.xAxis.AxisMaxValue and graph.yAxis.AxisMaxValue.
Note that this is specific to version 1.5 due to code refactoring of the axes to their own class. Version 1.5 was just submitted to the asset store.

 

Version 1.5 was submitted. I added links to PDF documentation and 2 youtube videos to the store description. The package content also now defaults to UGUI. The NGUI content is within the Graph_Maker_NGUI package. If you don't use NGUI you can just delete this package after import / not import it. The main demo scene (X_Dynamic) was also was greatly enhanced.

Change log-

1.5
- NOTE: This version brings many changes. This version is --NOT-- backwards compatible, backup your project!
- NEW: Additional Graph type "Combo" allows doing both a bar chart and line chart in one graph. Specify series to be either bar or line.
- NEW: Additional Graph type "Line Stacked" allows for stacked line charts (similar to bar stacked)
- NEW: New Bezier Band Graph. This graph is a set of bands based on cubic bezier formula.
- NEW: Performance improvements with observable properties / lists. All graphs no longer check against cached values every frame.
- NEW: More custom Unity editors added (Series, Legends, Radar graphs, Ring graphs, Hierarchical Tree)
- NEW: Can specify list of colors instead of just single color for points / bars.
- NEW: Can specify to auto update bar width based on percentage of graph so updating bar width manually is not necessary.
- NEW: More examples including a real-time update example added to the X_Dynamic scene.
- NEW: Legend positioning is easier / more intuitive (anchored to chart)
- NEW: Legend can automatically detect its width / height exceeding the graph boundary, and then adjust its # rows / columns automatically.
- NEW: Auto center option added to pie chart, which automatically centers the pie chart (and legend) relative to its parent / background sprite.
- CHANGE: Axes have been refactored into a separate class (e.g. graph.yAxis.Labels instead of graph.yAxisLabels)
- CHANGE: Pie Chart size and Ring Graph outer radius removed (now more intuitive / based purely on Rect Transform).
- FIX: Fixed animation issue when changing values too quickly.

 

可维护性太差，代码，扩展性基本为零。

 

Hey Rorakin, I noticed that there's a graphical glitch that occurs when using a line graph with area shading (solid or gradient), any ideas?

 

Hey,
NGUI or UGUI? Is there an easy way for me to reproduce it from the area shading test scene? What does the the solid fill (instead of the gradient) look like?

 

I'm using the UGUI prefabs.

I was able to reproduce this consistently with the latest version available in the asset store, within the Area Shading test scene.

Steps Taken:
- Create a new project, import the latest Graph Maker. ( This also occurs in the older version of Graph Maker my project uses, not sure of it's version number ).
- Open Area Shading Test Scene
- Edit the list of point values within a Series on any of the two graphs. Make multiple entries have the same Vector2.y value. This can be done within the editor itself or in code.



Also, I noticed in that same scene that there are graphical area shading abnormalities traveling down from certain points in a series. You can see this predominately in the green shading in the bottom right chart. I did not edit the values for this series.



And again with gradient shading turned on...

 

Yeah, I am not able to reproduce the issue. I have seen the issue before though, and I think it has something to do with directX 11 half pixel offset. Try changing your game / scene window size. I think if it is an odd number of pixels it will sometimes show this issue. Also try building for windows / mac / linux / etc. I don't think the issue will show in an actual build.

 

I'll test out a build and let you know the results, in the meantime, I'm trying to get tooltips to work properly when the UGUI canvas is set to World Space (Right now all of the offsets are very off, and the manual offset values are different for each data point in a series). Is there something I'm missing for getting tooltips to work in world space?

Edit: Here's some pictures to show what I'm talking about...







If I leave the Offset values at 0,0 the tooltip is not on screen (It's way off somewhere to the top right in the editor).

 

Hey,
Thanks for bringing this up. I have fixed it. Feel free to shoot me an email with your invoice # for an updated version, and / or follow the steps below to fix it. The steps below will ensure it works with all 3 possible canvas render mode types.

In WMG_Graph_Tooltip.cs, ensure there is this code:

Code (csharp):

1.  
2. using UnityEngine.UI;
3.  
4. Canvas _canvas;
5.  
6. void Start() {
7.         _canvas = theGraph.toolTipPanel.GetComponent<Graphic>().canvas;
8. }
9.  
10. private void repositionTooltip() {
11. Vector3 position;
12. RectTransformUtility.ScreenPointToWorldPointInRectangle(theGraph.toolTipPanel.GetComponent<RectTransform>(),
13.                                                                new Vector2(Input.mousePosition.x, Input.mousePosition.y),
14.                                                                (_canvas.renderMode == RenderMode.ScreenSpaceOverlay ? null : _canvas.worldCamera),
15.                                                                out position);
16. }
17.  
18.  

 

I just made a build today, and I can say that the issue is still there (at least on Windows, I'll try Mac later). My Screen size is always a power of 2 in builds (800x600, 1024x768, etc). I also have Direct3D 11 checked in my player settings. Is there anything I should try to fix this bug?

Also, the tooltip code works, thanks! Will the tooltips also appear if you hold your finger down over the nodes on a mobile build? Or if you press on a node?

 

Alright, after playing around with it for a bit, I reliably reproduced the area shading issue and have discovered 2 solutions, either should work:

1. Enable pixel perfect on your canvas (this doesn't work in the Unity editor scene / game view if the window is an odd number of pixels and DX 11 is enabled (visible in the Unity window title))
2. Disable Anti-aliasing in your Quality settings (this always works)

Yep, holding finger down / press on mobile will trigger the event for tooltips.

 

Awesome! I'll check out the fixes and report back.

 

I wasn't able to get the solutions to work (I'm on DX 11 with a World Space Canvas ). I already had Anti-Aliasing disabled. Is there anyway to fix this with a world space canvas?

 

Disabling anti-aliasing works for me for both camera screen space and camera world. If it is still not working, please send me your project or repro project via email. Otherwise setting pixel perfect for screen space is the solution.

 

Hey guys,

Uploaded a new version. As some of you have requested there is now support for TextMesh Pro. Here is the change log:

1.5.1
- NEW: Text Mesh Pro support!
- NEW: There are now delegates for tooltip and datalabel text labeling functions.
- FIX: Fix issue with worldspace tooltips.

 

Thanks for the Text Mesh Pro support.

 

Hello, apologies first time posting.

I'm using Unity 4.6.8f1

Downloaded Graph Maker vs 1.4 from the unity store.

I'm trying to go through the tutorial video. I'm running into the following error where it doesn't seem to recognize SetList...

Assets/Graph_Maker/Examples/X_tutorial_1/WMG_X_Tutorial_1.cs(23,37): error CS1061: Type `System.Collections.Generic.List<UnityEngine.Vector2>' does not contain a definition for `SetList' and no extension method `SetList' of type `System.Collections.Generic.List<UnityEngine.Vector2>' could be found (are you missing a using directive or an assembly reference?)

Any assistance will be appreciated.

 

Hello,

You can replace .SetList with = for Graph Maker version 1.4. When you upgrade Unity version to 5.1.2+ with Graph Maker 1.5+ then SetList() needs to be used for all Graph Maker lists.

 

Thank you for the quick reply...I think it is failing before it gets there....Here is my code:

using UnityEngine;
using System.Collections.Generic;

public class WMG_X_Tutorial_1 : MonoBehaviour {

public GameObject emptyGraphPrefab;
public WMG_Axis_Graph graph;
public WMG_Series series1;
public List<Vector2> series1Data;

// Use this for initialization
void Start () {
GameObject graphGO = (GameObject)GameObject.Instantiate (emptyGraphPrefab);
graphGO.transform.SetParent (this.transform, false);
graph = graphGO.GetComponent<WMG_Axis_Graph> ();

series1 = graph.addSeries ();
series1.pointValues = series1Data;
}
}


Here the error I'm getting. Which appears to be with the legend?


NullReferenceException: Object reference not set to an instance of an object
WMG_Series.createLegendEntry (Int32 index) (at Assets/Graph_Maker/Scripts/WMG_Series.cs:174)
WMG_Axis_Graph.addSeriesAt (Int32 index) (at Assets/Graph_Maker/Scripts/WMG_Axis_Graph.cs:2047)
WMG_Axis_Graph.addSeries () (at Assets/Graph_Maker/Scripts/WMG_Axis_Graph.cs:2031)
WMG_X_Tutorial_1.Start () (at Assets/Graph_Maker/Examples/X_Tutorial_1/WMG_X_Tutorial_1.cs:17)

 

Hey,

Sorry about that, alot has changed from 1.4 to 1.5. One of Graph Maker's long standing issues that was present for versions 1.4 and lower was the issue of instantiating and modifying graphs immediately via Start() / OnEnable() / OnAwake() functions. Basically, the simple way to resolve the issue is to create a coroutine that waits for one frame, after creating the graph.

This is no longer necessary in 1.5, due to the overhaul in the way Graph Maker updating works to improve performance. Now everything is based on events / delegates from observable lists / properties instead of checking against a cache. It was a rare issue people encountered for versions 1.4 and lower since most people modify data via custom scripts on pre-existing graph(s) in the scene, but I will definitely include this script and example tutorial for version 1.4 in the next update (Unity version 4.6.3 - 5.1.1). Technically, you can use 1.5 for any Unity 5.0+, but you just need Unity 5.1.2 to download Graph Maker 1.5.

Anyways, here is the tutorial code that works for 1.4

Code (csharp):

1.  
2. using UnityEngine;
3. using System.Collections.Generic;
4. using System.Collections;
5.  
6. public class WMG_X_Tutorial_1 : MonoBehaviour {
7.  
8.     public GameObject emptyGraphPrefab;
9.  
10.     public WMG_Axis_Graph graph;
11.  
12.     public WMG_Series series1;
13.  
14.     public List<Vector2> series1Data;
15.     public bool useData2;
16.     public List<string> series1Data2;
17.  
18.     // Use this for initialization
19.     void Start () {
20.         GameObject graphGO = GameObject.Instantiate(emptyGraphPrefab) as GameObject;
21.         graphGO.transform.SetParent(this.transform, false);
22.         graph = graphGO.GetComponent<WMG_Axis_Graph>();
23.  
24.         StartCoroutine(oneFrameAfterStart());
25.     }
26.  
27.     IEnumerator oneFrameAfterStart() {
28.         yield return new WaitForEndOfFrame();
29.         series1 = graph.addSeries();
30.         graph.xAxisMaxValue = 5;
31.      
32.         if (useData2) {
33.             List<string> groups = new List<string>();
34.             List<Vector2> data = new List<Vector2>();
35.             for (int i = 0; i < series1Data2.Count; i++) {
36.                 string[] row = series1Data2[i].Split(',');
37.                 groups.Add(row[0]);
38.                 if (!string.IsNullOrEmpty(row[1])) {
39.                     float y = float.Parse(row[1]);
40.                     data.Add(new Vector2(i+1, y));
41.                 }
42.             }
43.          
44.             graph.groups = groups;
45.             graph.useGroups = true;
46.          
47.             graph.xLabelType = WMG_Axis_Graph.labelTypes.groups;
48.             graph.xAxisNumTicks = groups.Count;
49.          
50.             series1.seriesName = "Fruit Data";
51.          
52.             series1.UseXDistBetweenToSpace = true;
53.             series1.AutoUpdateXDistBetween = true;
54.          
55.             series1.pointValues = data;
56.         }
57.         else {
58.             series1.pointValues = series1Data;
59.         }
60.     }
61.  
62.  
63.  
64. }
65.  
66.  

 

Hi, I’m trying to set point values at runtime in a dice simulator. The X-values of the graph represent the possible numbers that could be rolled, the Y-values represent the number of times that value has been rolled.



The X point values of the graph originally range from 1-6. When I add a new die, I want the X-values to range from 2-12. The number of rolls of a given number are represented by Y-values. I want to use the X-values to change Y-values like so:

Code (CSharp):

1.  
2.     public void updateGraphPointValues(int value) {
3.         int arrayStartOffSet = lowestDieValue * _numDiceInPlay;
4.         series.pointValues [value - arrayStartOffSet] = new Vector2(value, series.pointValues [value - arrayStartOffSet].y + 1);
5.     }

Here's how I'm changing the range of the data:

Code (CSharp):

1.  
2. void updateGraphRange() {
3.  
4.  
5. float lowerBound = lowestDieValue * _numDiceInPlay;
6. float upperBound = highestDieValue * _numDiceInPlay;
7. graph.groups.Clear ();
8. List<Vector2> newSeries = new List<Vector2>();
9.  
10. for (float i = lowerBound; i <= upperBound; i++) {
11.  
12. graph.groups.Add (i.ToString());
13. Vector2 pointValue = new Vector2(i, 0);
14. print ("pointValue: " + pointValue);
15. newSeries.Add(pointValue);
16.  
17. }
18. series.pointValues = newSeries;
19.  
20. }

When I print out the point values I get the numbers I expect to see ( [2.0, 0], [3.0, 0], [4.0, 0]…[12.0,0] ). However, the series seems to do something with the point values before assigning them and creates on offset:


This offset grows the more dice I add.

I’m guessing this isn’t your intended means of changing data? I looked at the section “Populating Data Dynamically via Reflection” in the manual but can’t really wrap my head around it how it’s supposed to work. Could you provide an example? Thank you!

 

Hey,
So looks like you are using the groups feature. The later half of the youtube tutorial has some good info / an example on setting data using the groups feature.

Basically, the series point values x value represents the index of the group + 1 (because negative numbers represent NULLs or empty data, and there is no negative 0), and the y-value represents the y-value. So for a 2-12 graph, your groups List<string> should be of count 11 with the following:

Element 0 = 2
Element 1 = 3
...
Element 10 = 12

And then the series pointValues should be:

Element 0: [1, 0]
...
Element 10: [11, 0]

If the list you assign to the series does not follow this, then Graph Maker will attempt to automatically fix things. The first thing it will do is find missing data, and replace them with negative numbers. For example if you gave it a list without specifying [1, something], then it inserts a [-1, 0].

Another thing done is eliminate duplicates by adding them together. So, if you give it a list with duplicate x-value elements it will add together the y-values. For example, [3,2] and [3,5] becomes [3,8]

 

When I call WMG_Pie_Graph.sliceValues.SetList(), the data doesn't seem to populate the pie graph in the inspector. Any idea why this might be? I've tested that the supplied lists have the appropriate number of contents. The copied code below results in a pie graph that has nothing in sliceValues, sliceLabels, or sliceColors, even though the debug log returns (in this case) a count of 5. No errors are thrown in the console.

Code (CSharp):

1. public void GeneratePieGraph( List<string> labels, List<float> graphData ) {
2.         print("Creating pie graph with " + labels.Count + " labels and " + graphData.Count + " values");
3.  
4.         pieGraph = Instantiate<WMG_Pie_Graph>( pieGraphPrefab );
5.         pieGraph.GetComponent<RectTransform>().SetParent( reportRect, false );
6.  
7.         pieGraph.sliceLabels.SetList( labels );
8.         pieGraph.sliceValues.SetList( graphData );
9.         pieGraph.sliceColors.SetList( colorsPerSeries );
10. }

 

Hey,
Do pieGraph.Init(); after the instantiate. It gets called in Start(), but in this case Unity has not called Start() yet. Apologies for the inconvenience, I have searched for a Unity callback for instantiate but have not found one. The same issue does not apply to Axis Graph's since the AddSeries() calls Init().
-Stuart

 

Great, thanks for that. Works a charm.

 

I updated to 1.5.1 and now I receive errors like :

Assets/Plugin/NGUI/GUIDependent/WMG_GUI_Functions.cs(23,52): error CS0246: The type or namespace name `UITexture' could not be found. Are you missing a using directive or an assembly reference?

What can I do to resolve the issue ?

 

Hey,
Looks like the error is from not finding NGUI. Do you have NGUI in your project? If not, do not import the Graph_Maker_NGUI package. Also, make sure to delete the entire old Graph Maker folder before importing the new version.

 

My partner sent me the newest version and I can find only the unity package for the NGUI version, I have to import manually for the other version ?

 

The default package contains all the elements for Unity's GUI system, and also includes a separate package for NGUI. If you are trying to use NGUI, then yes there are some manual steps, the readme explains how to import the NGUI package. Note that 1.5+ is not backwards compatible with 1.4, so you will get some errors, but not the error you posted above.

 

Ok that broke too much to fix, will ask in a Pm

 

Hi rorakin3

Have you considered updating the YouTube video tutorial to cover version 1.5? You can't get very far in the video before it stops working since it's referencing the 1.4 code. I spent a good chunk of time thinking the package was broken until I found this thread. Once I added the single-frame delay before creating the graph and replaced the SetList() method, it started working ok. Even if you just add an annotation saying "This guide has been updated, click here to view the 1.5 tutorial" that would help us newbies.

Thanks!

 

I think you mean updating the youtube video to cover version 1.4? The video is for version 1.5+. I will look into adding a youtube annotation for this.

 

Oh it is 1.5? Hmm, I'm confused then. Your comment above to seidensj about the video tutorial not matching up said "Sorry about that, alot has changed from 1.4 to 1.5.". And your code snippet that is from 1.5 seems to work fine, but a lot of the method calls in the video don't exist anymore (SetList() was removed, graph.xAxis.AxisMaxValue is now graph.xAxisMaxValue, you can only add a new series after the first frame etc.). If the video is for 1.5 is there another reason the code doesn't seem to match 1.5? Perhaps there were a lot of changes between 1.5 and 1.5.1?

 

Its the other way around, SetList() was added and graph.xAxisMaxValue is now graph.xAxis.AxisMaxValue.
If you import Graph Maker using Unity version less than 5.1.2 then you will get Graph Maker 1.4. The code snipped I posted was tutorial code for Graph Maker 1.4.

 

Ah gotchya. I just installed the latest package from the asset store so I assumed it was the latest version. I didn't realize it falls back to 1.4 if you have anything less than Unity 5.1.2 (I have 5.1.0f3 at the moment).

Thanks for clearing up the confusion

 

Yeah, sorry for the confusion. It would be better of me to make 1.5 available for 4.6+, but I do all my Graph Maker changes in a Unity 5 project now, and it's not possible to port Unity 5 prefabs to Unity 4 sadly, hence the 2 simultaneously available versions hosted on the store.

 

Can it graph curves? Exponential regression lines etc?

 

There are some public helper functions to generate data of these forms to get you started available to every axis graph, but you can always add more. For example these are available:

Code (csharp):

1.  
2. public interface IWMG_Data_Generators {
3.     // Generate data of the form Y = aX + b
4.     List<Vector2> GenLinear(int numPoints, float minX, float maxX, float a, float b);
5.  
6.     // Generate data of the form Y = aX^2 + bX + c
7.     List<Vector2> GenQuadratic(int numPoints, float minX, float maxX, float a, float b, float c);
8.  
9.     // Generate data of the form Y = ab^X + c
10.     List<Vector2> GenExponential(int numPoints, float minX, float maxX, float a, float b, float c);
11.  
12.     // Generate data of the form Y = a * log base b of X + c
13.     List<Vector2> GenLogarithmic(int numPoints, float minX, float maxX, float a, float b, float c);
14.  
15.     // Generate data of the form c^2 = (X - a)^2 * (Y - b)^2
16.     List<Vector2> GenCircular(int numPoints, float a, float b, float c);
17.  

It's important to note that all the curves are still a set of rectangular lines. So a higher number of points passed to these functions creates a smoother looking curve. You can get pretty much a perfectly looking smooth curve with a relatively small number of points though. For example, the circle in the demo scene is composed of only 50 points.

 

Hi,

This is probably a funny question but I can not seem to get any charts to work in Unity 5.2. I create a new scene with Ortographic projection and then I drag from the graphs prefab folder lets say the LineGraph prefab and when I press play to see it in action nothing happens. There where not much more info on how to use the graps in the documentation.

What am I doing wrong?

 

Hey, probably just need a Canvas in your scene. Go to Gameobject -> UI -> Canvas. Then drag and drop the prefab under the canvas. You can also create any UI object, and a Canvas will get created if one doesn't exist. All UI elements need to be a child of a canvas.

 

Question: Just purchased this, trying to get a basic area graph. However my "areas" are solid black. Presumably I'm doing something wrong, but not sure what. Most basic steps to reproduce: Start a new scene, add a Canvas, drag the AreaShadingGraph prefab onto the canvas, change background color to grey, run: I see just black even though the prefab should have a blue shaded area. See screen shot.

Thoughts?

Thanks,
Walter

 

Having a 2nd problem with this graph module: I wish to put it in a scroll panel. However the 'area fill' pieces seem to paint outside the panel. Wonder if this is related to my first problem?

 

Hey,
No worries, this is a common problem. Set your canvas to screen space - camera mode, and drag and drop your camera to the camera slot on the canvas. As for the scrolling issue, the custom shader I have writes to opacity clip, and so the depth buffer may be conflicting with the scroll view. I will have to research more and get back to you on whether or not this is possible to address.