Search Unity

  1. Megacity Metro Demo now available. Download now.
    Dismiss Notice
  2. Unity support for visionOS is now available. Learn more in our blog post.
    Dismiss Notice

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

Discussion in 'Assets and Asset Store' started by rorakin3, Sep 26, 2013.

  1. rorakin3

    rorakin3

    Joined:
    Jan 2, 2013
    Posts:
    464
    https://www.assetstore.unity3d.com/#/content/11782

    If you have questions, bugs, feature requests, etc that you don't want to share with the thread, please send them to rorakin3@gmail.com

    This package makes it easy to drag and drop prefabs for various graph based GUIs into your game.

    Graph Maker is quite flexible, and can also be used to create various types of graphs that are not your typical line and bar graphs. For example, skill trees and world maps can be created using the package.


    Web-players:

    Shows some of the basic graphs that can be created.
    https://dl.dropboxusercontent.com/s/qtwo8fa7fjrg2mo/Test_Scene.html

    Shows some possible grids that can be created. You may notice that the grid lines in the graphs above are actually the same as one of the grids here!
    https://dl.dropboxusercontent.com/s/svcp2wg2f4qpsj5/Grids.html

    Interactive:

    Note that the example scenes below are good examples of things that you can do with Graph Maker, but are not available with Graph Maker and the standard Unity GUI system (UGUI) because these examples were created about 2 years ago when Graph Maker was only for the NGUI system.

    Data Generation Examples. Change sliders and drop-down values to see examples of things that can be changed at run-time.
    https://dl.dropboxusercontent.com/s/7fa9zhpr84r5x5n/Data_Gen.html

    Go into full-screen and right click to create nodes and left click to pan or select objects. Right click to move objects or pan. Hold control and/or shift to use the link angle and step features when creating a node from an existing node.
    https://dl.dropboxusercontent.com/s/zgp1pvamxilm07y/Editor.html

    This is an example randomly generated world map meant to show what can be created using Graph Maker API. Right click to pan, middle scroll wheel to zoom, left click nodes to find new nodes, hover over a node different from your current node indicated by green brackets to highlight the path between the nodes. The pathfinding is done with a public function available for any Graph Maker graph. It uses the breadth first search (BFS) algorithm, and works on graphs with multiple possible paths between 2 nodes.
    https://dl.dropboxusercontent.com/s/3m0k8f7kwwzn8jx/World_Map.html
     

    Attached Files:

    Last edited: Jan 20, 2016
  2. rorakin3

    rorakin3

    Joined:
    Jan 2, 2013
    Posts:
    464
    Tutorials added. The first goes over the basics of the editor. The second goes into the graph and grid generation algorithms.
     
  3. rorakin3

    rorakin3

    Joined:
    Jan 2, 2013
    Posts:
    464
    Pie graphs, line graphs, and bar graphs added!
     
  4. rorakin3

    rorakin3

    Joined:
    Jan 2, 2013
    Posts:
    464
  5. EmeralLotus

    EmeralLotus

    Joined:
    Aug 10, 2012
    Posts:
    1,459
    Great looking package.

    Some prebuy questions:

    1. How performant is the API ? Metrics on Mobile?

    2. Can the API use HOTween for animation ?

    3. Can it support generation and display of Bezier curves ?

    4. Can the API used to build the graphs/animation from http://flare.prefuse.org/demo
     
  6. imtrobin

    imtrobin

    Joined:
    Nov 30, 2009
    Posts:
    1,548
    For the line graph, I found it only has fixed internals. Can you change to a 2D point so I can specify X,Y axis
     
  7. Aiursrage2k

    Aiursrage2k

    Joined:
    Nov 1, 2009
    Posts:
    4,835
    Looks good to me
     
  8. Play_Edu

    Play_Edu

    Joined:
    Jun 10, 2012
    Posts:
    722
    IT's Awesome. plz tell me can you have line and bar gra... tut or can i modify line graph point in real time.
     
  9. Mikie

    Mikie

    Joined:
    Dec 27, 2011
    Posts:
    367
    Does graph maker work with 4.3?
     
  10. Parallel_

    Parallel_

    Joined:
    Dec 9, 2012
    Posts:
    90
    Would be nice to also have for Daikon Forge GUI.
     
  11. rorakin3

    rorakin3

    Joined:
    Jan 2, 2013
    Posts:
    464
    Thanks to those that have already taken the leap and purchased it I really appreciate it! Now let's see if I can answer some questions :)

    1. So currently mostly everything is in the form of prefabs. Each graph type generally has its own specific Graph Maker specific script(s). There are some public functions you can call, as well as dozens of public variables for each of the graph types, all of which can be used to change just about everything I could think of that you might want to change at run-time for each graph. The number of floats in a list of floats, for example determines how many pie slices or how many bars / points a graph will display, and of course is editable at run-time. By default, all graphs update every frame, so if you know ahead of time your graphs will be static based on data you load initially for example, you can set the graph to not update every frame. If the graph will be mostly static, but change occasionally, you can also call a public "refresh" function in all of the graphs in your own code whenever you want to, and you will probably want to do this for mobile (though I haven't done tests to see how big a difference it will be). Regardless though, performance should be fine on mobile because it's NGUI and because of public refresh graph functions for every graph type.

    2. Good question :) So, initially I wanted to create lots of animations for every graph type, but it was turning out to be a ridiculous amount of code, and also I wasn't certain that the animations I was implementing would be what people would actually want. So, in the end (the current product), I decided to just implement animations for the pie graph, since it would be pretty difficult for someone else to implement in their own code, mostly because of the way sorting works, the top X 'Include Others' mechanic, and the way rotations and sprite fill amounts are calculated. In short, there are animations for the Pie graph only, so currently I largely leave animation implementation up to the end-user. The example world-map scene and skill tree scenes have animation implementations, I will probably create test scenes for animating / interactive bar / line graphs in the near future as well. I do use HOTween for stuff in my own game, since it does seem better flexibility / performance wise, but the example scenes will probably just use the Tween scripts in NGUI so I don't have to say 'Requires HOTween' in my package.

    3. No, not yet :( This is an interesting one, and something I definitely want to look into. How do you think you would actually use it? I imagine you want to change it at runtime, would that involve just setting some variables / calling some functions?

    4. Pretty cool stuff there :) Yea, as I mentioned currently the only animations I pushed out that you could use via API calls are ones for the pie graph, so basically / adding / deleting / changing data has pie slice animations, and then data changes such that sort order would change also has a different animation. The timeline and pie graph on that website should be easily doable, the stacked bar chart not quite so easily, I will probably add a prefab / some more variables to support stacked bar charts in the near future. *Edit* Stacked bar is now also easily doable.

    Hey imtrobin, thanks for buying by the way :) Let me try to rephrase your request, so I'm not totally off-base, you want on the series script for the line graph to be able to specify the x AND y axis data rather than specify the x-axis data on axis graph script? So each series could be a list of floats for the y-axis and a list of strings for the x-axis?

    Hey, thanks for checking it out! It looks like your sentence got cut off, but I think you're asking for a line / bar graph tutorial? Yea, I can for sure do a video tutorial on pie / line / bar graphs. Yea, you can definitely change the line graph data at run-time, and everything will automatically update. You can also change things like the x-axis and y-axis lengths and everything updates.

    I haven't yet upgraded to try it, but if NGUI works with the latest version, I'm pretty sure there will be no problems. Oh, I forgot to mention, the latest version only works with NGUI 2.7 or below, however I have fixed all the issues for the NGUI 2.7 - 3.0+ upgrade, and will be updating the package to require and only support NGUI 3.0+. If you still use NGUI 2.7-, I can still support it for the near future it if you want to continue using NGUI 2.7-, just send me you're invoice # and I will send you the 2.7 version.

    I haven't tried Daikon Forge, there isn't TOO much NGUI specific code in this, so it could probably be ported in a few hours work. Most of the NGUI specific code in this package is probably in my custom editor, which again is definitely not required to use for any of the graph types (pie / line / bar, etc).
     
    Last edited: Oct 26, 2013
  12. imtrobin

    imtrobin

    Joined:
    Nov 30, 2009
    Posts:
    1,548
    Not exactly a (string,y) line series. I want to plot a 2D float (x,y) graph, then join the lines via Best Line Fit or curve. For curve fitting, I was initially using Curvy but since Graphmaker came out, I'm switching to it. This is probably the way to implment the Bezier curve.

    https://www.assetstore.unity3d.com/#/content/7038
     
  13. rorakin3

    rorakin3

    Joined:
    Jan 2, 2013
    Posts:
    464
    Oh ok, so basically a scatter plot, with ability to have a best fit curve. Most scatter plots generally draw a best fit curve with a basic math function like linear or polynomial, but it sounds like you also want something like a bezier curve to fit the scatter plot?

    Quick update- I have added stacked bar and percentage stacked bar: The axis graph is now more generic, so you can now instantly switch between line, side by side bar, stacked bar, and percentage stacked bar by changing just 1 parameter:

    $GraphMakerScreens.jpg
     
  14. EmeralLotus

    EmeralLotus

    Joined:
    Aug 10, 2012
    Posts:
    1,459
    "3. No, not yet :sad: This is an interesting one, and something I definitely want to look into. How do you think you would actually use it? I imagine you want to change it at runtime, would that involve just setting some variables / calling some functions?"

    Definitely at runtime, in general, as an API I would like use GraphMaker mainly during runtime and not much in-editor.

    " I do use HOTween for stuff in my own game, since it does seem better flexibility / performance wise, but the example scenes will probably just use the Tween scripts in NGUI so I don't have to say 'Requires HOTween' in my package."

    Would you consider making a demo with HOTween and include it as a Zipped. Those that have HOTween (that's actually quite a lot of people) would really appreciate more performant animations.
     
  15. EmeralLotus

    EmeralLotus

    Joined:
    Aug 10, 2012
    Posts:
    1,459
    Nice Stacked Bar chart. That was very quick update, seems it wasn't so hard.
    Bezier would be great.

    Edit:
    It would be really cool to be able to MouseOver any of the points/bar on the graph and get a little popup showing more info about that point/bar. The ability to interact with the data points would also be handy. This sort of functionality is built into the Flare API.

    GraphMaker is amongst the first Graphing packages for Unity and potentially could grow to be the " Ultimate Graphing Package " that every dev should have in their toolkit.
     
    Last edited: Oct 27, 2013
  16. imtrobin

    imtrobin

    Joined:
    Nov 30, 2009
    Posts:
    1,548
    Yes, that would be great.
     
  17. EmeralLotus

    EmeralLotus

    Joined:
    Aug 10, 2012
    Posts:
    1,459
    Is there a link to the documentation ?
     
  18. Play_Edu

    Play_Edu

    Joined:
    Jun 10, 2012
    Posts:
    722
    Hi,

    Thanks for ans.
     
  19. rorakin3

    rorakin3

    Joined:
    Jan 2, 2013
    Posts:
    464
    @imtrobin
    Alright, I made the series a bit more flexible, and you can specify both x and y values with Vector2. If you want the x-values to be evenly spaced on the x-axis based on the number of points and x-axis length, you can still do so via boolean parameter. You will probably want to do this in most cases, but if not you specify meaningful x-axis values and x-axis Min / Max values to correctly space the points based on your own data. Basically, scatter plots should now be easily doable, here is a screenshot:

    $ScatterPlot1.jpg

    @rocki
    Thanks, yea it wasn't too difficult to support stacked bar's. Yea, that's the plan, to make Graph Maker the go-to package for creating graphs, and surprisingly, there seems to be no competition at the moment. There is not yet a link to documentation, the API is mostly parameters on scripts, rather than function calls, which the pdf manual details. I may post a link to the pdf later, but pm me your email and I can email it to you now if you want. Oh, and yes definitely interactivity (hover-over popups), and animations are things I want to do. You could implement these things yourself by calling public functions to get the points / lines and assigning event delegates / doing animations on them, but I definitely want to have some out-of-the box implementations to make this easier.
     
    Last edited: Oct 27, 2013
  20. rorakin3

    rorakin3

    Joined:
    Jan 2, 2013
    Posts:
    464
    Better support for negative numbers / axes positioning.
    $NewAxes.jpg

    Support for changing orientation added. Can now instantly switch between vertical and horizontal side by side bar, stacked bar, and stacked percentage bar graphs:
     

    Attached Files:

  21. EmeralLotus

    EmeralLotus

    Joined:
    Aug 10, 2012
    Posts:
    1,459
    Is there a chance that Graph Maker can offer support for Daikon Forge?

    Cheers
     
  22. rorakin3

    rorakin3

    Joined:
    Jan 2, 2013
    Posts:
    464
    Yea, that is probably what I'll work on next. I bought Daikon Forge since it was so cheap for the birthday sale. I haven't tried it out yet though.
    Just an update, version 1.2 was submitted to the asset store yesterday, here are the changes:

    1.2:
    - NEW: Upgraded from NGUI 2.7 to 3.0
    - NEW: Graph type parameter to switch between line, side-by-side bar, stacked bar, and percentage stacked bar.
    - NEW: Orientation type parameter to switch between vertical and horizontal graphs. Useful for horizontal bar charts.
    - NEW: Added parameters to control placement of axes and what axis arrows display. Can now make 4-quadrant graphs.
    - NEW: Scatter plot prefab added to showcase changes made to better support scatter plots.
    - FIX: Series point value data changed from Float to Vector2 to more easily support scatter plots and arbitrary data plotting.
    - FIX: Negative values did not update all labels properly, and data was also not positioned correctly for negative values.
     
  23. darkmax

    darkmax

    Joined:
    Feb 21, 2012
    Posts:
    83
    hi I like your plugin features and I'm thinking on buying a copy, because i need to do some graphs, but also I saw your node example on youtube and I have a doubt, I need to do create some nodes and link between them like this picture http://img130.imageshack.us/img130/2623/image014s.jpg but I'm not sure if i can change the link to be arrow like the image and also add the curve effect that the node editor graphs have, and lastly if i can make that the node has inputs and outputs places like on the image, so my question is, can i achieve this with your plugin?
     
  24. pretender

    pretender

    Joined:
    Mar 6, 2010
    Posts:
    862
    Hi, any chance this will work with unity 3.5.7 i would definitelly buy it
     
  25. rorakin3

    rorakin3

    Joined:
    Jan 2, 2013
    Posts:
    464
    Hey, thanks for checking it out. Unfortunately it does not do curves between points. I will probably look into doing it later, but in the meantime if you search for "spline" curve on the asset store, you should be able to find something.

    Hey, I think the only difference is the setActive() function. I didn't do the pre-compile check for unity versions for this, but I will actually test it later today and implement this in the next minor version (1.2.1) and let you know. The only work I will probably need to do is shift around the setActive() calls to a central location so I don't have a bunch of pre-compile checks.
     
  26. pretender

    pretender

    Joined:
    Mar 6, 2010
    Posts:
    862
    please do so, I will immediately buy it!
     
  27. darkmax

    darkmax

    Joined:
    Feb 21, 2012
    Posts:
    83
    thanks for the answer, the curve thing is just a plus is not essential, but it will be great that if one can set the type of link, like line (like is now), line and arrow, and double arrow.

    However I will buy your plugin because has a great price and i need to do some graphs as well. And also It supports ngui, the gui system that I'm using.
     
    Last edited: Nov 15, 2013
  28. rorakin3

    rorakin3

    Joined:
    Jan 2, 2013
    Posts:
    464
    Ok cool, most people ask questions about the line / bar graphs. I'm excited to have someone who actually might use the editor! So I just tried it and yes you can do arrows by just using anchors relative to the line sprite. I will include this prefab in the next update. To do single arrows, you can just disable / delete one of the arrows in another link prefab you create. Here is a screenshot (there is now 5 default link prefabs to choose from):
     

    Attached Files:

    Last edited: Nov 16, 2013
  29. rorakin3

    rorakin3

    Joined:
    Jan 2, 2013
    Posts:
    464
    I got the code part working, but that was the easy part. Apparently it is impossible to move Unity 4 prefabs to Unity 3.5, they have to be manually created. I wouldn't mind manually creating the prefabs for most of the stuff. The prefab for the editor and the skill tree example however would take quite some time and effort to recreate.
     
  30. pretender

    pretender

    Joined:
    Mar 6, 2010
    Posts:
    862
    Thanks for your effort!

    I was thinking to look into it using unity4 to see how prefabs are made etc…can i use it without editor prefab and skill tree? or to simple put it, is it going to be any worth to me in unity3.5? Thank you! This looks like a great product!
     
  31. pretender

    pretender

    Joined:
    Mar 6, 2010
    Posts:
    862
    I would mostly be using it for line and bar graphs and pie charts…?
     
  32. darkmax

    darkmax

    Joined:
    Feb 21, 2012
    Posts:
    83
    thanks, that is great to know that i can set the links to be arrows. Purchased :)
     
    Last edited: Nov 17, 2013
  33. rorakin3

    rorakin3

    Joined:
    Jan 2, 2013
    Posts:
    464
    Ok, I will create the package with most of the features for 3.5.7 and include it as a separate install in the next update. This is probably what I'll do for Daikon Forge as well.
     
  34. rorakin3

    rorakin3

    Joined:
    Jan 2, 2013
    Posts:
    464
    Alright, finished it for NGUI + Unity 3.5, now for Daikon Forge... Thankfully, it looks like Daikon Forge is only for Unity 4.0+

    $Unity3.5.7.jpg
     
    Last edited: Nov 18, 2013
  35. EmeralLotus

    EmeralLotus

    Joined:
    Aug 10, 2012
    Posts:
    1,459
    Rorakin3,

    You are really powering along with GraphMaker.

    Looking forward for Daikon Support.
     
  36. rorakin3

    rorakin3

    Joined:
    Jan 2, 2013
    Posts:
    464
    Making progress with DF :)

    $DF_progress1.jpg
     
  37. TechnicalArtist

    TechnicalArtist

    Joined:
    Jul 9, 2012
    Posts:
    736
    Can I make a line graph (curve) such like GL line through any mathematical equation in Graph Maker for NGUI. For example this is my equation:

    Y = 1/2 X + 0.5
     
  38. rorakin3

    rorakin3

    Joined:
    Jan 2, 2013
    Posts:
    464
    Hey, thanks for the question. Right now you set the data in the series. You could do this by making a function that takes as input the coefficients and returns a list of vector2's. This is a simple thing to do so, I will create some API functions in the graph manager for doing this, and include in the next update.
    I should easily be able to do all the basic ones like, linear, quadratic, exponential, logarithmic, etc. The tricky part would be figuring out how many points you want and whether they should only fall in the 1st quadrant (positive values), or also negative values. I suppose these can all be parameter inputs to the functions.
     
  39. rorakin3

    rorakin3

    Joined:
    Jan 2, 2013
    Posts:
    464
    Finished Daikon Forge support :)
    I'll be submitting an update later today which will add both NGUI + Unity 3.5 and Daikon Forge

    $DF_progress2.jpg
     
  40. EmeralLotus

    EmeralLotus

    Joined:
    Aug 10, 2012
    Posts:
    1,459
    Great Work... !!
    Just Bought.
     
  41. rorakin3

    rorakin3

    Joined:
    Jan 2, 2013
    Posts:
    464
    Awesome, appreciate it.

    Just an update version 1.2.1 adds support for Daikon Forge and NGUI + Unity 3.5, however not all features will be supported on all platforms as will hopefully be clear in the updated store description.

    Here are the differences:

    Not yet supported in Daikon - see http://www.daikonforge.com/dfgui/forums/topic/issue-creating-pie-chart/
    -Pie Graph

    Not supported and no plans to support in Daikon / NGUI + Unity 3.5 (Time consuming to create and mostly unused features)
    -Editor
    -World Map example scene
    -Skill Tree example scene

    For the next updates, in addition to any fixes / requests of course - I plan to expand on the API, and then create some example scenes and webplayers using the API:

    1. Data generation algorithms
    2. Animation functions (probably HOTween only, but we'll see)
     
  42. rorakin3

    rorakin3

    Joined:
    Jan 2, 2013
    Posts:
    464
    Created several (7) data generation functions and an example scene demonstrating their use:

    $Data_Gen_Screen1.jpg
     
  43. EmeralLotus

    EmeralLotus

    Joined:
    Aug 10, 2012
    Posts:
    1,459
    Very Very Cool. It's coming along Nicely.
     
  44. rorakin3

    rorakin3

    Joined:
    Jan 2, 2013
    Posts:
    464
    I've added 6 web-players to the original post, and removed the You-tube videos, enjoy! Let me know what other stuff would be cool to have in a web-player!
     
  45. EmeralLotus

    EmeralLotus

    Joined:
    Aug 10, 2012
    Posts:
    1,459
    Cool, thanks for posting the web examples, much better to play with the real thing.

    Some feedback:

    1. The new data generation is really nice.
    2. The Axis option is great, very flexible.
    3. Grid option is also nice.

    Some small Usability things I noticed:

    1. I noticed that adjusting the Max and Min values make the points go off the graph. Perhaps the graph should scale so that the points are within the graph.

    2. When numbers are placed on dotted lines, it difficult to read the numbers.
    Ex: Axis: I&II, Axis: III&IV Grid: X.


    Keep powering along. This package is getting more and more Awesome.

    For those who are thinking about buying this package, definitely go for it.

    Cheers.
     
  46. Play_Edu

    Play_Edu

    Joined:
    Jun 10, 2012
    Posts:
    722


    +1
     
  47. rorakin3

    rorakin3

    Joined:
    Jan 2, 2013
    Posts:
    464
    Yup, you sure can, now that I created the data generation functions and example scene :) Just go to the web-player for data generation. Choose linear in the drop-down box and adjust the A slider to 0.5 and the B slider to 0.5, and that is y = ax + b or y = 0.5x + 0.5.

    Thanks for the feedback rocki :) Yea, for the points going off the graph, you reminded me of a request I got a week or so back that I didn't actually do yet. That is to add an option to auto-update the x/y min/max axes values based on the data present in the series. For example, if you adjust the A slider to be too high or low the points will go off the edge, but with that option the axes min and max values would auto adjust so that never happens.

    For the labels overlapping the grid-lines, yea it doesn't look good unless the axes are on the edges. There are variables for the label spacing that can be adjusted to offset the labels. It's hard to say what spacing would look good, so I hesitate to do it automatically in the API, but I can do it in the example script for the purpose of the demo looking good no matter what combination of grids and axes are used.
     
  48. rorakin3

    rorakin3

    Joined:
    Jan 2, 2013
    Posts:
    464
    Added a real-time update example to the data generation web-player. Change the drop-down "Quadratic" to "Real-Time Ex.", then use the "wasd" or arrow keys to move the hexagon around. The series update based on the hexagon's position, and the x-axis is in seconds.
     
  49. rorakin3

    rorakin3

    Joined:
    Jan 2, 2013
    Posts:
    464
    Version 1.2.1, which adds support for Daikon Forge and NGUI + Unity 3.5 was just approved today enjoy!
     
  50. rorakin3

    rorakin3

    Joined:
    Jan 2, 2013
    Posts:
    464
    Hey, it's been over a week since the last update, but I am making some pretty major improvements, and will post a web-player demonstrating the new functionality in a few days.

    Here are some of the things I've done since the last update:

    1. Added ability to automatically set x/y axis min/max values based on series data.
    2. Added an "Auto Origin" axes type feature. This automatically moves the axes to be closest to (0,0).
    3. Fixed some Daikon Forge issues.

    I'm also excited to say that the real-time update example has been heavily improved and optimized for performance. Previously a data point was plotted every time-step, but now multiple slopes are calculated and a point is only plotted if the slopes are significantly different. If the slopes are not significantly different, the point simply moves. Here is a screenshot:

    $Data_Gen_Screen2.jpg

    The FPS improvement in my test was from about 30fps to 70fps, and now the "Lines Points" in the real-time example is actually usable, because there will only be a point where necessary.

    I'm also replicating the data generation scene in Daikon. My ultimate goal is to make the data generation scene flexible enough to showcase almost all functionality of Graph Maker. I will need a more creative GUI than what I have now, because there is so much to demonstrate, but this will make it easier for me to test changes / additions in both Daikon and NGUI to make sure nothing is unexpectedly breaking with my changes. Here is a screen of the same thing in Daikon:

    $Data_Gen_Screen3.jpg
     
    Last edited: Dec 17, 2013