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
    You need to do from code? Here's example:

    Code (csharp):
    1.  
    2. graph.graphTitle.GetComponent<UnityEngine.UI.Text>().fontStyle = FontStyle.Bold;
    3.         graph.graphTitle.GetComponent<UnityEngine.UI.Text>().font = Resources.GetBuiltinResource<Font>("Arial.ttf");
    4.         foreach (WMG_Legend_Entry legendEntry in graph.legend.legendEntries) {
    5.             legendEntry.label.GetComponent<UnityEngine.UI.Text>().fontStyle = FontStyle.Bold;
    6.             legendEntry.label.GetComponent<UnityEngine.UI.Text>().font = Resources.GetBuiltinResource<Font>("Arial.ttf");
    7.         }
    8.  
     
  2. rorakin3

    rorakin3

    Joined:
    Jan 2, 2013
    Posts:
    464
    Next update will add support for dual-y axis charts, here is example where the second (blue) series uses the second y-axis. If you have any requests for dual-y axis let me know!

    upload_2016-9-21_19-54-16.png
     
  3. FLYUPAV

    FLYUPAV

    Joined:
    Aug 1, 2013
    Posts:
    34
    Thanks for the code;
    How about the graph title font size and font type? I didn't find any option in the prefab for changing them. In my project I have to control the font size of series name and the font type by code something different that Arial. As you can probably see I drew a yellow line in the picture. Too small font. fontsizew.jpg fontsize.jpg
     
  4. Xan-Ko

    Xan-Ko

    Joined:
    Apr 12, 2016
    Posts:
    14
    I think the graph title options is under your graph -> background -> graphTitle
     
  5. Xan-Ko

    Xan-Ko

    Joined:
    Apr 12, 2016
    Posts:
    14
    Thanks! it works but with a little changes i put here what i made:
    After putting the code lines my line point apears like a square because Point With and Height sets the Width and Height of the point to the same size but mine is a line, i have to go to the point prefab i made with the line and check the preserve aspect in the image, now the line appears like a line but the label goes up again beacuse the point stil have the width and height to the same size, now i go to the series labels and set the Data Label Offset of the Y to a negative value to get down the label.
    Maybe can create a option to set the width and height of the point independently for further versions ;)

    One last thing, in unity 5.4.1f1 shows me this warning:

    "nLevelWasLoaded was found on DOTweenComponent
    This message has been deprecated and will be removed in a later version of Unity.
    Add a delegate to SceneManager.sceneLoaded instead to get notifications after scene loading has completed"

    And its form DoTween.dll


    Thanks again for your time and fast response!!
     
    Last edited: Sep 22, 2016
  6. rorakin3

    rorakin3

    Joined:
    Jan 2, 2013
    Posts:
    464
    You can edit Graph Title from Unity inspector here:
    upload_2016-9-22_8-27-12.png

    To change the legend text, you can edit the prefab here:

    upload_2016-9-22_8-32-15.png

    To change other legend settings, click on the object here:

    upload_2016-9-22_8-33-0.png
     
  7. rorakin3

    rorakin3

    Joined:
    Jan 2, 2013
    Posts:
    464
    Thanks, yeah support for rectangular nodes is on the to do list :)

    Yeah, I get the same warning, I don't know if DOTween fixed it yet, but to get the latest package / DLL-
    https://www.assetstore.unity3d.com/en/#!/content/27676
     
  8. CplMulder

    CplMulder

    Joined:
    May 12, 2014
    Posts:
    52
    Any chance of getting a candlestick graph (as used on the stock market) with an open, close, high and low value... as follows?

    Candelstick.png
     
  9. rorakin3

    rorakin3

    Joined:
    Jan 2, 2013
    Posts:
    464
    Hey there, perhaps some time soon, but it should not be too difficult to make yourself with Graph Maker. Feel free to email me for more info.
     
    CplMulder likes this.
  10. alejoast

    alejoast

    Joined:
    Oct 18, 2016
    Posts:
    1
    Hi. I've just bought this Asset and I'm needing to create a real-time updating plot with data retrieved from a Vector2 List in other class. I've added an EmptyGraph prefab (an Empty line graph) that I've called "SuperGraph1", and have dropped a WMG_Data_Source script and a WMG_Series script to this SuperGraph1 object. Also, I've dropped the WMG_Data_Source component of SuperGraph1 to the Real Time Data Source on the WMG_Series component that was previously dropped in SuperGraph1.

    I've create a button Start that invokes the method SuperGraph1.WMG_Series.StartRealTimeUpdate() to start the plotting.

    I am having serious problems to understand how to populate the data dynamically via reflection. I have seen the tutorial where it says "Any Graph Maker script that has a "Data Source" reference will automatically populate data based on the referenced WMG_Data_Source component." but I don't understand this part. Also, I don't get to understand how to set the data provider via some script.

    As an example, I have to say that the data that I want to plot in real time is the Vector2 List variable called "dataxy" in my created script "DataGenerator.cs".

    Can you explain me how to achieve to plot some data in real-time? Thanks.
     

    Attached Files:

  11. rorakin3

    rorakin3

    Joined:
    Jan 2, 2013
    Posts:
    464
    Hi, please look closely at the X_Dynamic example scene and example code. During the example scene there are 2 different sets of tests / examples for populating data using the WMG_Data_Source component.

    The example at the end of the scene is the "real-time" updating. This means the data source pulls from a single value constantly over time. In this case the x-axis is always time or "real-time" and the y-axis is the one variable being continuously graphed over time. This essentially means the source variable must be a single float. Take a look at function realTimeTests() in X_Dynamic.cs if this is what you want to do.

    The other example in the X_Dynamic example scene is the "Dynamic data population via reflection". With this method the x and y axes must both be specified and can be whatever you want them to be. However in this case your data source must correspond to either a List<Vector2> or just a Vector2 if you go with the "multi-objects single variable" setting on the data source. Once the data source has been setup, then the graph's data will automatically change based on any changes made to the source data. Take a look at function dynamicDataPopulationViaReflectionTests() in X_Dynamic.cs if this is what you want to do.
     
  12. Gianl9

    Gianl9

    Joined:
    Aug 25, 2016
    Posts:
    2
    Hello rorakin, and thank you for your job,

    I'm stuck in a font problem too:

    I'd like to change the font size of a label in a ring graph from a script, but I can't find a way to point at it... I can't change it in the prefab because the text is not there yet, neither I can change it in the inspector because the graph is created during the game, using a script, according to the ring graph example.

    Do you know how can I do?
    thank you again,
    Gianluca
     
  13. rorakin3

    rorakin3

    Joined:
    Jan 2, 2013
    Posts:
    464
    Hi, I actually recently added a bunch of font options for the ring graph. If you email me your invoice I can just send you the updated package. You'll be able to change font size, font color, the font itself, and the font style (bold, italic, etc) from the ring graph.
     
  14. HardRockz

    HardRockz

    Joined:
    Feb 24, 2015
    Posts:
    11
    Hi guys, I am using Graph Maker to draw bar graphs for my project. The problem is I cannot set the Bar Axis Value to 0. Once I run the program it keeps changing the bar axis value. In the documentation it says

    This controls the starting point for bar charts. For example, if the y-axis min is 0 and y-axis max is 20, and this is set to 10, then the base will start from 10 and either go up or down depending on the data set for each bar. So, a bar representing a value of 5 will start from 10 and go down to 5, and a bar with a value of 15 will start from 10 and go up to 15.

    Is there any way to set it to 0 ? Thanks in advance!
     
  15. rorakin3

    rorakin3

    Joined:
    Jan 2, 2013
    Posts:
    464
    Hi,
    You can uncheck the "Auto Update Bar Axis Value" (it's a few options down from the bar axis value itself in the inspector). This is checked by default so you don't need to do manually change the bar axis value yourself when for example the axes type changes. Thanks for posting, I should make this clear!
     
  16. HardRockz

    HardRockz

    Joined:
    Feb 24, 2015
    Posts:
    11

    I have unchecked the "Auto Update Bar Axis Value" but still it shows the graph like below.
    graph values are 10.8 and -6.8 and i am using axes type I_IV
    Image 1.PNG

    below are the settings

    Image2.PNG

    need some help.. :)
     
    Last edited: Nov 2, 2016
  17. rorakin3

    rorakin3

    Joined:
    Jan 2, 2013
    Posts:
    464
    Hey, it looks like your minimum and maximum values are -14, and 20. With an axes type of I_IV, the center will be at 3, so you should set it to 3 if you want the bars to come out from the axes (or leave the auto update checked).

    So you probably want to change the y-axis minimum to be -20 instead of -14, and leave alone the bar axis value.

    It's also possible to have a flexible axis / flexible origin. For example, if you want to keep your min and max at -14 and 20, and have the axis at 0, then set axes type to AUTO_ORIGIN_X, and set the x-axis "Axis use non tick percent" to true. The end result is a flexible x axis that does need to match where a tick is, and can move around freely with the origin. Example:

    upload_2016-11-2_9-30-0.png

    Then if I just change the origin's y to 9, I can move the x-axis up and the bars will go up and down relative to the origin as appropriate.

    upload_2016-11-2_9-32-48.png
     
    HardRockz likes this.
  18. mimminito

    mimminito

    Joined:
    Feb 10, 2010
    Posts:
    780
    @rorakin3 Hey! Wondered if you could help with an issue I'm facing. I have defined the Y-Axis labels based on the formatting we want. The series that we are using however might not start at the min value, so I have set the Y-Axis to auto grow so it will show the lines within the graph's bounds. Is there a way I can make the Y-Axis labels auto update to they reflect the series values?
     
  19. rorakin3

    rorakin3

    Joined:
    Jan 2, 2013
    Posts:
    464
    Hi,
    I recommend to override the y-axis label function with your own custom function for formatting. An example of this is in the Plot_Overtime example code. In that example the labeler function is overridden to display dollar sign.
     
    mimminito likes this.
  20. TipsonMacGyver

    TipsonMacGyver

    Joined:
    Nov 3, 2016
    Posts:
    2
    Hello,
    In the 1.5.7 change log it says: "CHANGE: Tooltip on hover exit called when gameobject being hovered disabled". But when I disable the parent of the graph, move the cursor, and re-enable the parent of the graph, the tooltip reappears at the cursor and the animation of the bar/node stays in "selected mode".
    I'm using dual axis graph with unity 5.4.1f1.
     
  21. mimminito

    mimminito

    Joined:
    Feb 10, 2010
    Posts:
    780
    Thanks. Ive managed to get it working almost how I want it, but it seems to be quite a lot of work to get the data displayed in the manner I need it. I wonder if you would be able to help, ill try and explain what I am after.

    I am displaying data as a percentage (Y-Axis) against months of the year (X-Axis). The year runs from April to April (financial year). What I need to do is "focus" on the current months data, so lets use November as an example. The tick's along the X-Axis would be October, November and then December, with the previous months out of sight to the left and the future months out of sight to the right. Is there a way to do this? To render the data and then focus on a specific set of points, with the axis staying along the left and bottom but updating the values to reflect the focused data?

    I cant post up screenshots on here due to the nature of the work but I could send through a DM if you think you could help. Ive been struggling with this for a week now :(
     
  22. rorakin3

    rorakin3

    Joined:
    Jan 2, 2013
    Posts:
    464
    Ah, It looks like disabling the tooltip (or parent of tooltip) and its update doesn't happen that frame. I've fixed this, you can add this code to WMG_Graph_Tooltip.cs to fix -

    Code (csharp):
    1.  
    2.  
    3. void OnDisable() {
    4.         if (theGraph.tooltipEnabled) {
    5.             if (isTooltipObjectNull()) return;
    6.             if (currentObj) {
    7.                 MouseExitCommon();
    8.                 performTooltipAnimation (currentObj.transform, Vector3.one, theGraph.tooltipAnimationsDuration, 0, theGraph.tooltipAnimationsEasetype);
    9.                 return;
    10.             }
    11.             repositionTooltip();
    12.         }
    13.     }
    14.  
    15.  
     
  23. rorakin3

    rorakin3

    Joined:
    Jan 2, 2013
    Posts:
    464
    Hey, no problem. What you are wanting to do is pretty difficult, so it's ok to struggle :) There are 2 main approaches that I see.

    Approach 1 - You animate in a set of data for the period of time in which you are focused.

    This approach is probably the easiest and if done right looks very professional. You essentially start with a blank graph, and animate in the set of data points you care about (e.g. the points and lines coming out from the bottom of the graph). For the axis labels you can alpha fade those in.

    Approach 2 - Create a scrollable graph.

    This approach is more complicated, but the main advantage is smooth arbitrary scrolling from left to right. Here are my tips for creating such a graph:

    In general, "scrolling" a graph primarily means to animate the x-axis minimum and maximum values. I would recommend looking into and understanding the DOTween library API for this. You can animate arbitrary properties and even groups of arbitrary properties at the same time if you use for example a lambda to reference your own custom OnUpdate() callback function.

    After you are able to scroll (create scrolling x-axis animation), you will then need to figure how to update the points being graphed. I would recommend something like this:

    - Have the 2 ends of the graph (left and right side) pretty much constantly update. For example, if the scrolling x-axis minimum value is 5.5, and you have data points of 5 and 6, then there would be a data point at 5.5 drawn and it would have line connecting to data point for 6. As the x-axis minimum is animated, you want to update that point at 5.5 based on the slope of its line connecting to it. If the axis moves to 5.3, the point at 5.5 would also move to 5.3.

    - To do this you essentially want to keep track of the 2 end points within the graph and the 2 end points beyond the end of the graph. As the x-axis animates (within your DOTween OnUpdate() callback function), set the ends of the graphs to the correct values based on a simple calculation of slope and x-axis value. Finally, you need to have a check that determines if the new x-axis values that you are about to set go beyond the beyond the ends outside the graph that you are currently using. If the x-axis goes beyond, then instead of updating the existing point, you add to the start and delete from the end (if your scrolling to the left), and vice versa scrolling to the right.
     
    mimminito likes this.
  24. mimminito

    mimminito

    Joined:
    Feb 10, 2010
    Posts:
    780
    Thanks. Ill give this a good read Monday at work and see if I can improve what ive done. Ive managed to get it working in a much simpler/cleaner fashion now, but it would be awesome if it could scroll or animate. Thanks again.
     
  25. vaxman

    vaxman

    Joined:
    Jun 19, 2015
    Posts:
    1
    Hi, quick question, could I use and place these graphs in a 3D scene - using a world space canvas? I want to build information hub for VR and wonder if it will fit my needs.
     
  26. rorakin3

    rorakin3

    Joined:
    Jan 2, 2013
    Posts:
    464
    Hi, yeah basically you set the UI canvas to be world space, instead of screen space.
     
  27. HardRockz

    HardRockz

    Joined:
    Feb 24, 2015
    Posts:
    11
    Thank you very much for your reply...Now it is ok :)
     
  28. HardRockz

    HardRockz

    Joined:
    Feb 24, 2015
    Posts:
    11
    Hi I am having a small problem with bar graphs. I am using two series to show data and below is the output i am getting. Second series value is drawn right below a value of the first series. What could be the reason for that? i want it in the middle of two yellow color bars. Thanks in advanced :)
     

    Attached Files:

  29. rorakin3

    rorakin3

    Joined:
    Jan 2, 2013
    Posts:
    464
    Hi,
    What is your x-axis? Bar graphs are typically spaced based on a graph's x-axis category or "group" defined in the "groups" list. More info about "groups" can be found in tutorial video.
     
  30. amr45

    amr45

    Joined:
    May 16, 2016
    Posts:
    2
    Last edited: Nov 11, 2016
  31. rorakin3

    rorakin3

    Joined:
    Jan 2, 2013
    Posts:
    464
    Hi, it looks like the font size is not getting resized properly.
    Are you setting font sizes via script after instantiating the graph from a prefab? It is recommend to configure the graph to work well at a given resolution in the prefab, and then not change settings that would be affected by a resize post instantiation. If you're still having issues, please feel free to email me with more info.
     
  32. amr45

    amr45

    Joined:
    May 16, 2016
    Posts:
    2
    Thank you very much for your quick reply...will email you with more info :)
     
  33. rlawther

    rlawther

    Joined:
    Nov 18, 2016
    Posts:
    1
    Hi,

    I'm wondering if Graph Maker was able to do parallel coordiantes graphs, something like this
    Cheers
     
  34. rorakin3

    rorakin3

    Joined:
    Jan 2, 2013
    Posts:
    464
    Hey,

    There isn't a specific graph type for this, but it's possible to achieve the same thing. I would probably go about it by creating a single graph where all data is normalized (0-1), since it does appear the main purpose of this graph type is to display normalized data (data with different scales) so that the data is easy to compare. Then you could overlay 4 empty graphs with just a y-axis to display the true scales. Though, it might be better to put the scales in a more abbreviated form like (2-4, 4-8, etc) in the axis labels next to the names (Sepal Width, etc.) to reduce clutter, since the graph is already pretty cluttered, and also the lines appear to overlap with the labels making them difficult to read.
     
  35. Juanola_

    Juanola_

    Joined:
    Sep 29, 2015
    Posts:
    38
    Hello!

    I need to use GraphMaker in a World Space Canvas.

    However, as I move the graph through the scene I get increasing performance spikes, in the Canvas.PrepareBatchesJob and Canvas.GeometryJob.

    Is there a workaround?

    Thanks and Cheers!
     
  36. rorakin3

    rorakin3

    Joined:
    Jan 2, 2013
    Posts:
    464
    Hi,
    I am not aware of such spikes. If you move the camera only, do you get the same spikes? Does the graph use area shading, if so does it use compute shader? Is the graph being resized at all, if so are resizing options enabled? Are data points being added during the move, if so are auto animations enabled? Is the Canvas using pixel perfect mode? Is a single Canvas being used or multiple Canvases? If single, does it also contain many other UI elements? If so, it might help to put the graph on its own separate canvas. Are the UI elements used in the Canvas / graph all using a single Atlas (texture import settings)? If you're still having troubles, feel free to send me email with example and I can see if there is a better way.
     
    Last edited: Nov 23, 2016
  37. HardRockz

    HardRockz

    Joined:
    Feb 24, 2015
    Posts:
    11
    Hi, sorry for the late reply. my x-axis is horizontal line. And i tried to use two series from the prefab and i just changed the values from the inspection windows. below is the result I got. What could be wrong?
     

    Attached Files:

    • 111.PNG
      111.PNG
      File size:
      13 KB
      Views:
      861
  38. xiazzh

    xiazzh

    Joined:
    Aug 19, 2013
    Posts:
    13
    Just purchased current version. Can I display the graph on mesh instead of canvas? I could not get it work.

    Thanks!
     
  39. Invisible-Eyes

    Invisible-Eyes

    Joined:
    Nov 27, 2016
    Posts:
    22
    Any news on graphs with 3 dimensions ?
     
  40. hierro__

    hierro__

    Joined:
    Sep 22, 2014
    Posts:
    59
    Hi, is this package usable on UICanvas panels ? I need to make it fit on my Ui interface that actually is rendered as Screen Space Camera.

    Thank you very much.
     
  41. rorakin3

    rorakin3

    Joined:
    Jan 2, 2013
    Posts:
    464
    Hi, for a side by side bar chart, the number of bars (number of points) for both series should be the same. If you have no data for one of the them you can give it a value of 0. Lastly, if you want both series to be on top of eachother but one goes up and one goes down, there isn't really a graph type that supports that. However, you can achieve the same effect by creating the second series as a second graph overlay-ed on top of the first graph where everything on the second graph is turned off except for the series itself.

    Hi, you can use a worldspace canvas, refer to position section here:
    https://docs.unity3d.com/Manual/HOWTO-UIWorldSpace.html

    You can place graph on 3d objects like cubes, but there aren't plans to create 3d graphs.

    Yes, there is no problem using with screen space overlay canvas.
     
  42. SkynetIsACat

    SkynetIsACat

    Joined:
    Nov 29, 2016
    Posts:
    1
    The tooltip off screen detection was not working for me at all. Why do you subtract screen coordinates from world coordinates? Got it to work after converting screen.width to world coordinates. Am I just using an outdated version (debugging a project from someone else) or is there any reasoning behind this?

    line 82 in WMG_Graph_Tooltip: float distPastX = position.x + offsetX + width - Screen.width;
     
  43. rorakin3

    rorakin3

    Joined:
    Jan 2, 2013
    Posts:
    464
    Hmm, I think it's outdated, looking at the code, it looks like this now:
    float distPastX = position.x + offsetX + width - (screenTopRight.x - screenBotLeft.x);
    So, yes, you are correct, the Screen.Width / Height should be converted to world coordinates, this should be done / fixed in latest version
     
    Last edited: Dec 4, 2016
  44. Niller007

    Niller007

    Joined:
    Dec 3, 2014
    Posts:
    14
    Hi,

    I'm having an issue with area shading. I have a setup where a line graph is generated at runtime from 100+ data points. It takes a long time to draw this graph if area shading is turned on, so I have it set to None, and then once the graph has been generated, I set it to Gradient and lerp the alpha up from 0 to fade it in. This worked perfectly fine, until I added my graph to a UI Scroll View. Now the scroll view masking somehow blocks the area shading when it isn't turned on from the beginning.
    There are three cases:
    1) Area shading set to gradient from the beginning: Rendering works fine
    2) Area shading set to none from the beginning and changed to gradient at runtime: Rendering doesn't work
    3) Area shading set to gradient and alpha = 0 from the beginning, alpha animated up at runtime: Rendering doesn't work

    If there's some way to fix this, it would be awesome!
     
  45. rorakin3

    rorakin3

    Joined:
    Jan 2, 2013
    Posts:
    464
    Hi, I recall some of these being an issue in the past, which version of Graph Maker, and which version of Unity are you using? Also, have you tried out the compute shader version of area shading? Do you have the same issues with that? It is recommended to use compute shader for 100+ points since it is a single rectangle and single draw call with all the pixels calculated and drawn in parallel on the GPU.
     
  46. felipemoreno

    felipemoreno

    Joined:
    Oct 23, 2013
    Posts:
    4
    Man, you should add Bubble graph for this asset, that would save my life
     
  47. Niller007

    Niller007

    Joined:
    Dec 3, 2014
    Posts:
    14
    I'm using the latest version of both Graph Maker and Unity (5.5.0f3). Unfortunately the target platform is WebGL, which doesn't support compute shading, so that solution is a no go :/
     
  48. rorakin3

    rorakin3

    Joined:
    Jan 2, 2013
    Posts:
    464
    Ah, that's actually a good idea. I will probably add one as an example for the next update. It should be easy since I recently added a way to make it easy for custom code to override rendering behavior.

    Ah, ok. I think I have fixed some / all of these issues (definitely #3) in the latest version that I am currently working on, please feel free to email me with your invoice # and I can send you the latest version.
     
  49. Sujil-V-S

    Sujil-V-S

    Joined:
    Dec 3, 2015
    Posts:
    2
    Hello all,
    What is the platform support for this plugin?
    I need to use graph for my project and i need it for the following platforms
    • WebGL
    • Android
    • iOs
    • Mac
    • Windows

    Will this plugin supports for all of above?
     
  50. rorakin3

    rorakin3

    Joined:
    Jan 2, 2013
    Posts:
    464
    Hi, yes all those platforms are supported. You may get poor performance with the "Area Shading" on mobile platforms, which uses N-1 rectangles with instanced materials, where N is the number of points in the graph. It sounds like support for Compute Shader on Metal platform is on Unity's roadmap for Unity version 5.6, at which point you will be able to use the compute shader for shading instead.