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

Hey,

Thanks again for the quick reply, I will purchase it by the end of the day. Also thanks for looking into getting all the function calls in the manual, I look forward to working on them as soon as it is available.

Just a final suggestion. I think you have an outstanding asset here, and you are seriously underselling yourself, it is worth way more than 20$ for the functionality it provides. My suggestion would be to make a couple of videos demonstrating the simplicity associated with creating and modifying graphs, which will appeal to both people who code as well as to graphic artists who would seriously benefit from it. In addition if you have your own website, I would suggest creating a simple page that illustrates the points you mentioned for me above as I am sure a lot of readers would have similar questions.

Thanks again and I would like to request people to stop giving bad comments on the asset store for such good products.

Sam

 

Hi Rorakin3,

I've been busy so I didn't have time to get on and create the graph. I just don't get how i'm suppose to get the Graph looking like the one in the picture.

Things I now know:
1. The green colors are just basic colors and are not related to the height of the bars
2. The red color is shown when the user taps on a column on the graph.
3. When the user clicks on the Left arrow the Graph should show the last 7 weeks where the user has weighed himself.

I've read the PDF but there are so many options i'm a bit overwhelmed by it

Just to be sure i'm talking about this graph:

 

Hey,

Yea, the PDF manual can be overwhelming because it describes every public variable. Nearly all of Graph Maker configuration options / functionality is in the form of public variables rather than public functions. This minimizes the amount of code you will need, and also makes tweaking the results via inspector much easier. There are many options, but a large majority of the options are exposed in the UI of the interactive example scene. So rather than reading a manual, you can play around with the example scene. Anything not demonstrated in the example scene likely requires some custom coding on your part.

In this case, it sounds like some custom coding on your part is needed.

1. The green colors are just basic colors and are not related to the height of the bars
- Ok, this sounds simple, just set that green color for the color variable in the series script. Though I don't see why there is both green and yellow colors.

2. The red color is shown when the user taps on the column of the graph.
- This should be easy with the new events I recently added. The tooltip events work for you in the example scene correct? You can either look at the code in the example scene that does the tooltips, and there should also be a section in the manual about the available events. Although, only hover events are used in the example scene, there should be click events as well, and you can write your own function linked with that event that will set the color variable of the sprite of Node's gameobject (the node should be a parameter in your function linked with event delegate). Although color is defined at the series level, you can still manually edit colors of individual objects. Since every variable in Graph Maker is cached for performance reasons, Graph Maker actually will not update the colors of any sprites unless you change the color variable in the series script again. It was only a couple updates ago when Graph Maker became fully cached. This means the update loop in Graph Maker will actually not make ANY changes whatsoever to anything unless a public variable is actually changed either via inspector or your own code, or you call a public function of course. You will need to figure out when the color changes back to green. How will that work?

3. When the user clicks on the Left arrow the Graph should show the last 7 weeks where the user has weighed himself.
- I am not seeing a "Left arrow", so I am guessing it is part of a UI that you are not showing. There are a few approaches you can have with this one. You could pre-load the data and disable the graph when your app starts, and then enable the graph when the user clicks, or you can do some more advanced stuff. Personally, I would set the series data when they clicked the arrow, and then also probably play an animation. Either a fade-in animation or a scale animation of the bars growing from bottom to top is probably what I would do. Check out the animations example code in the interactive example scene for more info on that.

 

Hi,

Sorry for the late reply, but i'm going to stop using this plugin. It's just way to complex to get anything working at all. Even changing some basic things as labels or setting width of items is taking too much time which I don't have. I'm going to check out other options to use a Graphs with NGUI. And I don't have time to read through the whole manual to get a small simple thing working.

 

Hey there,

So I was wondering if there was an easy way to accomplish something similar to this graph where I can add information (power-up used and best combo) at certain data points

 

Hey,

Sorry about that. I try to find a good middle-ground between usability and flexibility with this package. I think most users can use the out-of-the box prefabs and slightly tweak them to fit their need, but that doesn't seem to be the case for your need. If you decide to revisit the package please let me know of any ideas you have that could improve the package.

Hi,

This is fairly easy to do with hover-over tooltips (see example scene / web-player for that). Always displaying it without hover-over events is a bit tricky, but doable. How I would probably do it:

1. Loop through each data point, and figure out which data points need to display something extra.
2. Create custom panels (looks like a sprite for the image, a sprite for the line, and text label) for the things you want to display. Then move the positions of your custom panels to be the same position as the point game object in the graph. You will probably need to do some position tweaking based on the width and height of your custom panels.

 

Is it possible to find a value on the graph once it's already made?
For example, on the picture I sent, I only have data points for every 5 second interval. But I might need to display something on the graph that happened at say 27 seconds. So given the graph, is there a built in method to give an x-value and return me the y-value? Not entirely sure how math intensive that is, haha.

 

I see what you are saying. Although, there is not a function to do exactly what you say, I believe you can accomplish the same thing fairly easily. There is function to return the list of gameobjects that represent each point, and then there is another function to get the <Vector2> associated with a given point (used in tooltip example). So you would just loop over the points, get the vector2 for each, and then determine which 2 points are before and after the one you want based on your x value (27) and the vector2 x data the point with x = 25 and the point with x = 30.

EDIT: Note also the functions are at the series level, not the graph level. So the list of points would be different for your blue line and red line for example. You can just create a variable for your script and drag and drop the parent series game object to get a reference to the series you want, or you can call a function on the graph that returns all the series.

 

Does your plugin calculate lines between 2 points and connect them? Because then I'm guessing if I want the y-value of that x=27, I would probably try to find the equation of the line (just the mx+b) between x=25 and x=30 since I will have their y-values and solve?

 

Are you planning on porting this to the new Unity GUI when it's released?

 

Yea, you can calculate the slope using the two points. There is also a function to get the line between two points. It is GetLink() I believe. There should just be 2 arguments (a from node and a to node). So once you have your 2 nodes, you could call that passing in those to get the link (line between 2 nodes). The link itself has its own little Graph Maker specific script, which should have a variable saying what the angle is between the from and to nodes. So you could look at that as well.

Yes, for sure. Basically, a few versions ago I rewrote Graph Maker to be almost entirely GUI system independent. That means 99% of the code has nothing to do with NGUI or Daikon. Instead there is a separate script, which has all the GUI system dependent code. Whenever I do an update to graph maker, I simply copy and paste all the code for both NGUI / Daikon except for that script. The script mostly has extremely simple stuff (which I would expect the new Unity GUI system to support), such as getSpriteColor, getSpriteWidth, getSpriteHeight, etc. The argument for all of these is usually just a GameObject. There is a couple non-trivial things, mostly positioning, parenting, and pivoting related, but I'm sure won't be too hard to figure out with Unity GUI.

 

Cool. I guess I'll have to wait to see if I can give the size position as percentages in the new Unity GUI.

 

Is it possible to do stacked bar charts? Like these.

 

Sure, you can check it out in the webplayer. Click "Graph Settings" button, then change the dropdown that says "Line" to "Bar - Stacked". Other things you can do in the webplayer:

1. Change orientation by changing the dropdown that says "Vertical" to "Horizontal"
2. Automatically space the data so that it ignores the x-value data, this should generally be done for all bar graphs, unless you want to manage the X spacing yourself. In "Graph Settings" check the checkbox that says "Auto Space X"
3. Adjust the bar width accordingly to make the bars take up the space you want with the "Bar Width" slider.
4. Add more series to see what it will look like with lots of series. To do that, click "Series Settings" button, and then "Add Series" button.

Note bar graphs (more especially stacked bar graphs) look much better with gradients. You can find gradient shaders in the asset store.

 

Alright guys, it's been quite some time since an update, but I am hoping to resolve that soon. Basically, I really want to include automatic animations in the next update (end user doesn't need to do any custom coding). But it has been quite difficult to implement, so I lost some motivation, but I hope to make progress this weekend, and hopefully a new update the weekend after that.

Also high priority is documentation / videos / website. Will likely be doing some basic tutorial videos, and also probably put together a webpage for the API.

 

It's been a while since I've posted here because I've been working heads down on the current project.

Just wanted to say that I've really been enjoying using the package, Awesome work.

"automatic animations" is not an easy thing to pull off so definitely understand your feeling a bit down about it. Thumbs up for at least trying.

btw, I know that GM is able to create skills graphs, I'm in need of something like a Hierarchical tree structure that can displayed vertically or horizontally with collapsible nodes. Is this already possible in the package. If this feature is currently not doable, could this be added in a new update.

Cheers.

 

Hey rocki, thanks for checking in

Yea, Graph Maker started out mostly as a tool to create skill trees and world maps. Since release, most features requested were line / bar graph related, so I haven't done much else as far as the skill tree / world map examples go.

So as I understand it you basically want a hierarchical tree that can dynamically resize itself based on its parent container and horizontal vs. vertical orientation, and then also if you click on a node, it collapse / hides the children of that node?

 

Yes that's correct.

 

Yea, I can probably add hierarchical tree pretty easily as the first step.

What would be a good workflow for constructing the hierarchical tree? What I am imagining right now is you would create the nodes before run-time and then each node would have a list of children nodes, and you would manually drag and drop which children nodes belong to each parent node via inspector.

Then at run-time, the tree script would create links between all the nodes, e.g. a link between every child and parent.

 

Is this what you mean:

In the editor, using the unity hierarchy tree to structure the nodes. The nodes can be prefabs or any Go that the user wishes to assemble into a tree and at run time, then the nodes can be opened and closed.

Edit: If the above is correct, then I totally agree.

 

Alright, finally got automatic animations mostly working. Check it out here

http://www.rorakin.com/GraphMaker/Data_Gen_DFGUI.html

Click the "New Data" button to see it in action.

There are 3 variables for this new feature on the graph script. "Auto Animations Enabled", "Auto Animations Easetype", and "Auto Animations Duration". Should be straightforward from the names, but you can enable / disable the feature, change the animation easetype, and also how long it takes to do the animation. The feature will be disabled by default so it doesn't unexpectedly change behavior of your existing projects.

Currently it works anytime data changes, but not such that the data change would add or delete point data. For example, the animation also plays if you go to to series settings tab, and change the data generation type from random to say linear or quadratic.

It also works for changing the orientation (e.g. vertical to horizontal)

Lastly, it works for line charts, bar charts, but not stacked bar / stacked percentage bar. Try out changing orientation of side by side bar chart!

 

Wow, Awesome. Congrats on breaking through.

Just tested the web player demo.

Very cool to see it animate. Smooth Operator.

 

Hi Rorakin,

I've decided to give your plugin another try, and this time i'm getting everything working. Maybe I was too stressed last time . I have a question though, I've created this graph:


I've created two series, the dark green is series 1 and the light green is series 2. I've set the series 1 to use XDist between To Space. I also want to do this for series 2. But when I set the series 2 to use Xdist between space with a certain value the light green and dark green bars are always hugging against each other.

Is there a way to to set the distance between the dark green bars and the light green bars is always 50px for instance?

 

Hi, rorakin. I'm working on adding an economy simulation to my game and as part of that I want to display lots of data related to the various aspects of the simulation. My testing right now usually takes place over about 1000 rounds and the typical graph would have 5 or 6 separate data series to track (prices of 5 resources, number of people in a given job, etc). I'd also like to display more than one graph to compare various metrics. My question is, how concerned should I be about performance of your asset when displaying a great number of points? About how many X/Y coords do you think your asset can handle in a line graph at once before it starts to bog down? What about when the graph is generated (like if I'm refreshing the graph to display a different date range or something)? Do you have any general tips to help with large data sets? I'll be using your asset with NGUI, if that matters.

 

@Tripwire
Thanks for checking it out again. Yea you can actually do that. For the series for the light green bars you should see 3 variables "Use XDist Between to Space", "Auto Update XDist Between", and "XDist Between Points".

What you want to do is actually uncheck "Auto Update XDist Between", and manually increase "XDist Between Points" to create more space between the 2 series. The default basically automatically updates it so you don't need to worry about it, but in this case you want some specific space between the series.

@Harabeck
Thanks for the question! Graph Maker is super duper optimized. It basically means literally everything is cached and update loop actually does nothing 99.9% of the time, other than check some booleans When you add or change data or change settings, that is when the update loop will do some work.

As far as actual performance testing goes, you could create a simple script to generate a bunch of NGUI sprites. Basically each line and each point is an NGUI sprite. So estimate how many of those you will have on the screen at any given time, then create a script to generate that many sprites, and that will be the run-time performance of Graph Maker (plus a few additional sprites for the axes and background of course).

 

@Thread

I've been working quite a bit this past week in my free time to bring some much needed updates. I'm getting close to release an update which will add a few key things:

1. Automatic Animations - Basically, you can enable the graph to automatically do animations when you change data or change orientation. You can customize the duration and easetype via parameters, and there is no extra effort / code you need to do on your end. It will just work out of the box. Also, all the automatic animations code is in its own separate little script, so you don't need to hunt around looking through a bunch of code if you want to do additional tweaks to the animations.

2. Out of the box tooltips - What I mean by out of the box is will require 0 custom code / effort to implement. Previously, I created a bunch of events and functions that you could use to create tooltip yourself. Now I have implemented it such that every graph can enable and disable tooltips with 0 extra effort on your part. There are 6 new parameters for this. 3 that configure the tooltip itself (enable / disable, whether to display series name as part of the tooltip, and how many decimal points to display in the tooltip), and then 3 parameter to configure the animations for the tooltip (enable / disable tooltip animations, tooltip animation duration, and tooltip animation ease type). Also, all the tooltip code is in its own separate little script, so you don't need to hunt around looking through a bunch of code if you want to tweak the tooltip display.

3. More axis type options - You will now be able to set an origin (there is a parameter called origin of type Vector2, and the default will be 0,0). Using the origin, I've added 2 new "Auto Update Axes - Origin" type options in addition to all the static options (e.g. 1,2,3,4 quadrant). Using these options, you can make it so the axes will automatically stay closest to your specified origin. You can also configure the axes to "lock" in to the nearest grid line or be "free" in the sense that it the axes will move freely and fluidly rather than be locked to the nearest gridline.

Expect also basic / quick tutorial videos to be created and added to the asset store page. The first video will just be a basic overview of what is all in the actual package, and examples of what the package can do for you / how it can save you time.

 

So i've unchecked the Auto Update XDist between and i've manually increased the XDist Between Points. Check the result:


As you can see, the first light green bar is still hugging against the first dark green bar . Any idea how to fix this?

EDIT:
I've created labels manually now (the x labels below) because I can't really center the XLabels when I set them through the BarGraph prefab. Is there an easy way to center them? I tried Auto Center and manually set them but the spacing is always way to far apart.

 

Alright, I had our team lead buy the asset and overall I'm very impressed. I had decent graphs of my data up and running in no time. As you said, it runs great once it's done generating. Still, I'd like to have high resolution (that's resolution of the data, not the graphics) graphs of multiple series up, and the game chugs a bit when I update a graph. I'd like to use a coroutine to only plot a certain number of points at a time, but as-is, the graph completely updates whenever the series is modified, unless I'm missing something. That, of course, results in worse performance than simply doing it all at once. Right now, the code only seems to use the x value to space the points out across between the min and max x values. If they could do a direct position across that range (and if the auto grow/shrink options are off), then it seems like adding new points wouldn't upset the position of old ones, and new ones could be added without touching the old ones.

Edit: eh, after some tweaking I've got it working pretty well with just a split second hang. If you have any ideas on more efficient updating I'd still like to hear them, but I'm very pleased with the asset overall.

 

Is there a built-in function for shading under graphs? These UI designers keep wanting to get all fancy, haha.

 

Oh wow... sorry about that. It's been so long since I coded the functionality for "Auto Space" I misunderstood how it worked.
It looks like I will need to add an extra parameter on the series script to allow adding extra space. It is pretty easy to add, so I will for sure have it in the next update which should be this weekend, and probably mid next week for Unity to approve the update.

If you need this now, you can add your own hardcoded solution for now fairly easily by going to the WMG_Series script.

Add this line of code after line 521

if (theGraph.lineSeries[1].GetComponent<WMG_Series>() == this) newX += 10;

Replace 10 with number of pixels you want to space, and [1] with the series number [0] is the first, [1] would be the second, and etc.

Line 521 is:

newY = (pointValues.y - theGraph.yAxisMinValue)/(theGraph.yAxisMaxValue - theGraph.yAxisMinValue) * theGraph.yAxisLength;

Here's a screenshot with that extra line of code:

 

Oh, shading between lines. No function for that sadly, not sure how I would do it either.

 

Nice, thanks for purchasing
So, is the hang mostly after all the gameobjects / sprites are created and when positions are updated? The autospace functionality is really designed for bar charts. If you have lots of data, I imagine you are using line charts? If possible, you should calculate the x and y coordinates in advance and not use the autospace functionality. That might help your performance, not sure though.

 

The auto center is based on the number of "ticks". It looks like you are hiding the ticks / gridlines, which is fine, so what I would do is just increase the number of x axis ticks and leave the auto center turned on. Another thing you can do is go to Bar Graph --> Background --> XAxisMarks gameobject in the hierarchy and on the WMG_Grid script change the "Grid Link Length X" value. All the grid lines, axis marks, axis labels, etc. are WMG_Grid's.

 

By the way, score some major points for the first person to guess what the WMG stands for, which is prefixed on all graph maker scripts.

Hint: It is not something offtopic / unrelated, it is related graphs / GUIs / Game dev.

 

Windows Meta Graph?

Doh! Rather than ping you with another guess it must be 'We Make Games'!

 

hehe, nope

 

Well... I guess if I figure something out, I'll let you know. lol

 

weighted ___ graph...
weighted matchings graph?

 

Yea, let me know if you figure something out. I would think it would have to be a custom shader, but I have very little experience writing shaders sadly.

Nope

 

Hey, that's a good second guess. I like it! But still no

 

Just submitted version 1.3.4

-----------------
Version History
-----------------

1.3.4
- NEW: Out of the box tooltips! Doing tooltips no longer requires you to write any code, simply set some graph level parameters!
- NEW: Automat animations! Several animations are now possible without requiring you to write any code, simply set some graph level parameters!
- NEW: Series level setting to add more spacing between series. This is useful to have bar graphs where the bars are not right next to eachother.
- NEW: More dynamic axis type settings. New auto origin - x/y options allow the axes to position closest to the origin. The origin is also configurable.
- NEW: For the auto axes type options, you can now also specify whether the axes lock to the nearest gridline or move around freely.

 

Works like a charm! Thanks

 

Hi Rorakin,

I've got it all working perfectly. Just one question, don't know if its a bug or something:

When the point values of a series are 0.0 there's still a small line showed on the screen instead of nothing. Is it possible that when the Point value of a series is 0.0 there is nothing on the screen?

Here's what i mean:



As you can see on the picture above, the first bar is filled with a value. The other bars are all with point values 0.0. I can't just use the series.pointvalues.add function to add a value to the list because there are some limitations to how the graph needs to be shown.

 

Hello rorakin,

I bought GraphMaker a few weeks ago, but I only got around to integrating it into my project yesterday. Great work, this is an amazing library! It will surely save me lots of days of work!

I have ran into a problem, though, I'm sure you'll be able to help me. I need to draw a bar graph that might contain both positive and negative Y values in the Y axis. Is there any way to let GraphMaker know that I'd like the X-axis to be drawn on 0 instead of on min Y? Here's a screenshot of what I'm getting in my sample test. I'd like the X axis to be located on Y = 0 and have the bars go up or down depending on whether they're negative or positive. Is that possible?



Thanks in advance!

Cheers,

 

Hey rorakin,

How would I go about getting the position of the nodes in world space? So I have a line graph with 2 series and I change the series depending on the player results.

I'm trying to see if I can make some trapezoids based on each line segment.

 

Hmm, I don't see this in Daikon, but I do see it in NGUI. It appears it is not possible to create a sprite with a width or height of 0. I don't remember this limitation, so perhaps NGUI changed recently. I will have to investigate more on what the proper fix is. In the meantime, you can manually set a transparent color on the bars with 0 data using the GetPoints() function on the WMG_Series script.

 

You can change the axes type using the axes type variable, but unfortunately the x-axis will just be at 0 and won't affect the bars. Right now, bar graphs only work with axes types where the x-axis is on the bottom. You are the first person to ask about this, so I may look into addressing this. The only work around I can think of is creating 2 separate graphs, one for the negative data and one for the positive data, or use a line graph.

 

Just so I understand, you are trying to add your own trapezoids next to graph maker line segments? You can get the position of graph maker line segments using the GetLines() function on the WMG_Series script.

 

I forgot to mention, part of the 1.3.4 update, I made some significant changes to the PDF documentation. I broke out the parameters into a bunch of different sections to make it easier to find which parameters are for what (e.g. core parameters vs axes parameters vs labels parameters).

Additionally, I added a new section for functions. It is pretty much just a list of all functions and why / how they might be used.

 

I'm aiming for the beginning and end points of each line segment. More specifically the nodes under nodeParent. I was just wondering if there was a built-in function to get that list of nodes and their transforms (I tried to find it by the method names, but couldn't quite track it down)