Search Unity

  1. Good news ✨ We have more Unite Now videos available for you to watch on-demand! Come check them out and ask our experts any questions!
    Dismiss Notice
  2. Ever participated in one our Game Jams? Want pointers on your project? Our Evangelists will be available on Friday to give feedback. Come share your games with us!
    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. FunkyFancy

    FunkyFancy

    Joined:
    Nov 23, 2016
    Posts:
    9
    Hi Rorakin3 :)
    I had a problem changing the prefabs from UGUI to TMP until i finally saw that you are searching for a GameObject named "Canvas".
    Since my Canvas wasn't named "Canvas" and maybe other people will stumble over the same problem wouldn't it be better to search for a ObjectOfType<Canvas>() ?
     
  2. rorakin3

    rorakin3

    Joined:
    Jan 2, 2013
    Posts:
    457
    Yes, that makes more sense, thanks for letting me know I've changed it :)
     
    FunkyFancy likes this.
  3. DeJMan

    DeJMan

    Joined:
    Nov 26, 2013
    Posts:
    1
    Hi Rorakin3,

    How would I go about creating a broken line graph? You mentioned that it can handle null values.

    Im adding in data like so:

    pathData.Add(new Vector2(1, 10));
    pathData.Add(new Vector2(2, 15));
    pathData.Add(new Vector2(3, 10));

    I want to add something like:
    pathData.Add(new Vector2(4, null));

    and then continue with:
    pathData.Add(new Vector2(5, 83));
    pathData.Add(new Vector2(6, 23));

    In essence, there needs to be a gap between the line to represent the null value. Thanks.
     
  4. rorakin3

    rorakin3

    Joined:
    Jan 2, 2013
    Posts:
    457
    Hi,
    To do nulls, check out the example scene X_Tutorial_1, also the second half of the tutorial video. You basically want to enable the groups setting:
    http://stew-soft.com/GraphMaker/Doc..._graph.html#a4ca7da5b41e024303f81985aef2c7e8f
    And then add your possible x-values to the groups list. Then have your series points correspond to the groups. Any value in the groups list, but not in the series list will be automatically a NULL (no need to explicitly add null points to the series).
     
    Qais likes this.
  5. hitwicket

    hitwicket

    Joined:
    Jul 1, 2016
    Posts:
    7
    Hi,

    I need some help to create type of graphs needed for my game.. Screenshots of required UI are attached..

    Essentially I need the ability to add few circled in line and bar graphs..

    Thanks in advance..

    Screen Shot 2017-07-03 at 3.49.02 pm.png Screen Shot 2017-07-03 at 3.48.27 pm.png
     
  6. rorakin3

    rorakin3

    Joined:
    Jan 2, 2013
    Posts:
    457
    Hey there,

    You could do this by having another series for the points, or by getting the appropriate position and creating your own point. Why are there 2 points stacked on top of eachother, can there be more stacked like 3+ points?
    How does the label appear, is that when your mouse hovers over it?

    This might be easier to discuss via emails, feel free to send me an email.
     
  7. Jatapiaro

    Jatapiaro

    Joined:
    Aug 31, 2014
    Posts:
    12
    Is there a way to handle the clicks on the series names?

    The ones in the red circle, I need to handle clicks to able or disable ploted series
    Thanks​
     

    Attached Files:

    Last edited: Jul 10, 2017
  8. Jatapiaro

    Jatapiaro

    Joined:
    Aug 31, 2014
    Posts:
    12
    Is there a way to plot only a line?, i dont want any points.

    Thanks
     
  9. rorakin3

    rorakin3

    Joined:
    Jan 2, 2013
    Posts:
    457
    Thanks for emailing as well. Just for others:

    You can do line only plot by checking 'hide points' on the series.
    http://stew-soft.com/GraphMaker/Doc...series.html#a98667f425ec3ed0c74a67797024da1dd

    Handle clicks is possible on the legend swatch using this event:
    http://stew-soft.com/GraphMaker/Doc...events.html#a05d0898e0b3caafe82d8aba99aa73be2

    I will look to add an event for clicking on the legend text.
     
  10. Jatapiaro

    Jatapiaro

    Joined:
    Aug 31, 2014
    Posts:
    12
    Hi, I need to handle the legend click to hide or show the series. Is there a way to do it?, when I set active it looses the reference and you can't show the series again.

    Thanks
     
  11. Jatapiaro

    Jatapiaro

    Joined:
    Aug 31, 2014
    Posts:
    12

    Solve it, I just iterate the childs of the serie and just change the status of active.
     
  12. rorakin3

    rorakin3

    Joined:
    Jan 2, 2013
    Posts:
    457
    Hey guys,

    Next update will include some performance improvements, including an option to not create any lines (instead of just hiding lines).

    Additionally there will be a new example scene that shows how to split up points into multiple canvases. If you didn't already know when you update a RectTransform, Unity has to update everything on the canvas of that RectTransform, so splitting up a large number of points across multiple canvases nested under a parent canvas is much faster. Here is a a sample of the new scene showing points changing (animations) of many points on a huge scatter plot, without fps going below 60 -


    LargeScatterAnim.gif
     
  13. Sebioff

    Sebioff

    Joined:
    Dec 22, 2013
    Posts:
    185
    Nice :)
    For the line graphs a huge performance improvement would be not instantiating individual link segments for every single data point and having a single line mesh instead. Once you have a couple hundred links all the instantiation, parenting and canvas updating can easily take a second or so :/
    But that's probably a huge change...
     
  14. rorakin3

    rorakin3

    Joined:
    Jan 2, 2013
    Posts:
    457
    Ah, yes that is a good suggestion but would indeed be a big change. Probably before that I would make a compute shader driven graph similar to the area gradient shading except draw lines and points as well. The whole texture 4k resolution could be generated in parallel on the GPU using compute shader / render texture. The only downside is that you would not be able to interact with / click on points, and of course there is the issue of supported platforms.
     
  15. rorakin3

    rorakin3

    Joined:
    Jan 2, 2013
    Posts:
    457
    I was able to implement drawing lines using compute shader.
    Here is an example, the lines are not actually separate objects but rather part of the generated texture:

    upload_2017-7-21_19-0-32.png

    upload_2017-7-21_19-1-59.png

    Note that you don't have to use area shading with the lines, you can do them separately.

    I created another example scene, with 1500 lines, I was getting 20 fps for 200 point change animations without using compute shader.

    With compute shader I did 3000 lines with a 4096 texture resolution, and I had no fps change (still 70 fps) for 200 point change animations. I tried to do 3000 line test without compute shader but Unity gives the vertex limit error and displays nothing.

    So good news! With the next update I recommend drawing lines with compute shader if you can (your target platform supports compute shaders). It's just a single checkbox setting on the series to switch between regular line drawing with UI objects and compute shader line drawing.
     
    Last edited: Jul 22, 2017
  16. Sebioff

    Sebioff

    Joined:
    Dec 22, 2013
    Posts:
    185
    Ooh, very nice! Quite an improvement :)
    Does it automatically fall back to the old method on unsupported platforms?
     
  17. rorakin3

    rorakin3

    Joined:
    Jan 2, 2013
    Posts:
    457
    Yeah I added a check for platform support, if unsupported it will fall back to the old method.
     
  18. aCallum

    aCallum

    Joined:
    Oct 8, 2012
    Posts:
    5
    Hi rorakin3 -

    Currently making use of stacked bar graph layout but it appears that animations don't play when changing values in this mode?
     
  19. rorakin3

    rorakin3

    Joined:
    Jan 2, 2013
    Posts:
    457
    Hi there,

    Yeah the auto animations don't work at the moment for stacked charts. It's been awhile since I looked at it, so I will look again and see if it's not too much effort to do.

    It does seem to work if you're only changing the series on top, you can comment out this line:
    "if (theGraph.IsStacked) return;"
    in WMG_Series.cs here if you want to see:

    Code (csharp):
    1.  
    2.     public void setAnimatingFromPreviousData() {
    3.         // Automatic animations doesn't work for real time updating or stacked graphs
    4.         if (realTimeRunning) return;
    5. //        if (theGraph.IsStacked) return;
    6.  
     
  20. PeterShoferistov

    PeterShoferistov

    Joined:
    Sep 22, 2013
    Posts:
    59
    Hi.
    I want the graph to look like in the 1st picture. With Y axis in a 0 position, but with yMin = -10, yMax = 10. However, If I'm setting the Y min value to -10, the graph looks like on the 2nd picture. What should I set to look properly? Thanks
    P.S. the graph was taken from Graph_test scene
    https://1drv.ms/i/s!AuyHy4WnaMnUg-dXJGGZU-74W4qbHg
     
  21. rorakin3

    rorakin3

    Joined:
    Jan 2, 2013
    Posts:
    457
    Hey,

    You can set "Auto Update Bar Axis Value" to false. The bars move up and down relative to whatever the bar axis value is.
     
  22. Mukabr

    Mukabr

    Joined:
    Jun 10, 2013
    Posts:
    61
    Hey @rorakin3 how you doing?

    I just bought your asset and its awesome. thanks for this great tool.
    I would like to know if it's possible to work with very small numbers, like 0.001.

    I'm populating the line graph Series with vector2s that are very small, but this is what i'm getting:

    As you can see, the Y labels are showing only 0, and the points labels are also showing 0.

    I also would like to know if it is possible to only show the Y value when hovering in the point.

    Thanks!
     
  23. PeterShoferistov

    PeterShoferistov

    Joined:
    Sep 22, 2013
    Posts:
    59
    Thanks, that's much better! But is there a way to offset the x axis like on this picture?
    Upd. My bad, figured it out. Just changed axes type
    upload_2017-8-2_11-52-51.png
     
    Last edited: Aug 2, 2017
  24. rorakin3

    rorakin3

    Joined:
    Jan 2, 2013
    Posts:
    457
    Hey, so there are a variety of ways to go about changing labels. For the y-axis, if you just want to display it as 0.001, then you can set the number of decimals on y-axis labels to 3.
    http://stew-soft.com/GraphMaker/Docs/html/class_w_m_g___axis.html#add6f7c2f725faecf2537e9e12c464a2f

    Alternatively you can set the labels manually by setting the "Set Labels Using Max Min" setting to false. Lastly, you can override entirely the labeling function. There is code that shows how to do this in WMG_X_Plot_Overtime.cs. This is also how you can do the tooltip (override the tooltip function), this is also shown in that example.
     
  25. shrinath-kopare

    shrinath-kopare

    Joined:
    Feb 11, 2017
    Posts:
    5
    Hello,
    I want to create an area filled line graph.
    Can I do it using 'Graph maker' tool.
    Or can I free trial of a code before purchasing it.
     
  26. Nada101

    Nada101

    Joined:
    Aug 3, 2017
    Posts:
    2
    intereseted in that too
     
  27. rorakin3

    rorakin3

    Joined:
    Jan 2, 2013
    Posts:
    457
    Hey,
    Yes, have you checked out this demo?
    http://stew-soft.com/GraphMaker/Plot_Overtime/index.html

    Sorry there is not a trial version.
     
    shrinath-kopare likes this.
  28. shrinath-kopare

    shrinath-kopare

    Joined:
    Feb 11, 2017
    Posts:
    5
  29. lhktestacc

    lhktestacc

    Joined:
    Aug 24, 2017
    Posts:
    1
    Hi, I am finding a tools to create line charts in Unity. Graph Maker seems prefect. Is it possible to create multiple charts in a list view automatically by script?
     
  30. rorakin3

    rorakin3

    Joined:
    Jan 2, 2013
    Posts:
    457
    HI there,
    Yes, you can create a script that will create items in a list view, where each item is a chart.
     
  31. Xan-Ko

    Xan-Ko

    Joined:
    Apr 12, 2016
    Posts:
    14
    Hi,
    I have a problem when using the area shading, as you can see in the image the negative part is not filled out and in the scene view these red lines appear. I was trying to use two fill colors for the graph but as could not find the way to do it I have divided the data of the graph into two series and I have drawn 2 overlapping graphs each with a color. Another question, could do this differently and use multiple fill colors on a graph?
    error.jpg
     
  32. rorakin3

    rorakin3

    Joined:
    Jan 2, 2013
    Posts:
    457
    Hey there,
    Unfortunately the area shading can only go downwards. I have recently improved the area shading for compute shader to work with both upwards and downwards. If your platform supports compute shader, then it will work for you, feel free to email me with your invoice # for this updated package.
     
  33. Litow

    Litow

    Joined:
    Jan 8, 2015
    Posts:
    17
    Sorted by the GraphMaker developer himself!

    "
    Hello. Does any good soul have an example or written tutorial on how interface GraphMaker with Playmaker?
    It's really a fantastic asset (probably the best graph editor out there) and I seem to be able to change pretty much anything through Playmaker.... except a graph prefab's Point Values. I just need to collect the data from a PlayerPrefab and populate a couple of prebuilt Series.

    I spent about 7 hours today looking at the youtube tutorials, reading through manual and forum's posts, and trying a variety of solutions, but im still struggling to get even close... admittedly beyond my understanding of the tool. Id appreciate some help as Im running out of time on our project... :)

    I understand that some of the logic is shown into dynamicDataPopulationViaReflectionTests. But Im not a strong coder and to be fair, while the youtube video makes the basic quite easy to run, the way to implement this with PlayMaker is fairly complex in the docs for someone new to GraphMaker and Playmaker... :(
    So I apologize for the newbie question in advance..."
     
    Last edited: Sep 11, 2017
  34. rorakin3

    rorakin3

    Joined:
    Jan 2, 2013
    Posts:
    457
    Thanks Litow. This was resolved through some emails, but for anyone else using with Playmaker, expect a new easier way in the next update (1.5.9) along with some updated documentation for use with Playmaker. Cheers.
     
  35. Xan-Ko

    Xan-Ko

    Joined:
    Apr 12, 2016
    Posts:
    14
    I have this graph:
    Sin-título-2.jpg

    And i want the red bar more wide like this:
    Sin-título-3.jpg
    I need the rest of the bars adjust its width and spacing automaticaly because can i have more or less blocks of 3 bars and te red bar cover the 3 bars.
     
  36. rorakin3

    rorakin3

    Joined:
    Jan 2, 2013
    Posts:
    457
    Hey,

    The red bars are a separate series? You could subscribe to the "PointSpriteUpdated" event to manually modify the red bars width. I have had clients use this to make some interesting graphs. Here is the event:

    http://stew-soft.com/GraphMaker/Doc...series.html#a0f44f1ae6dfb552cde6185d7650bd1cc

    So for a given series you can subscribe your custom function to this event which will get called for each individual bar whenever there is a change that would affect the bar's visuals such as position or size.
     
  37. Xan-Ko

    Xan-Ko

    Joined:
    Apr 12, 2016
    Posts:
    14
    Yes the red bars are separated series, It worked but how modify the bar width? i want to get the red bar width and use this width to set the new red bar width (multiplying by 3). I have tried this but the width is too big because every time is executed it is multiplied by the previous width.

    void MyPointSpriteUpdatedFunc(WMG_Series series, GameObject point, int pointIndex)
    {
    foreach (Transform nodo in series.nodeParent.transform)
    {
    var nodoRectTransform = nodo as RectTransform;

    float width = nodoRectTransform.rect.width * 3;
    float height = nodoRectTransform.rect.height;
    nodoRectTransform.sizeDelta = new Vector2(width, height);​
    }​
    }
     
  38. rorakin3

    rorakin3

    Joined:
    Jan 2, 2013
    Posts:
    457
    The event is called for each individual bar, so no need to loop through the nodes. So something like this:

    void MyPointSpriteUpdatedFunc(WMG_Series series, GameObject point, int pointIndex)
    {
    var nodoRectTransform = point as RectTransform;

    float width = nodoRectTransform.rect.width * 3;
    float height = nodoRectTransform.rect.height;
    nodoRectTransform.sizeDelta = new Vector2(width, height);​
    }
     
  39. Xan-Ko

    Xan-Ko

    Joined:
    Apr 12, 2016
    Posts:
    14
    It worked great, thanks a lot!!
     
  40. Xan-Ko

    Xan-Ko

    Joined:
    Apr 12, 2016
    Posts:
    14
    Hi again,
    I have an error trying to draw a dotted line, I used the prefab Link_Dotted but it gives me the following error:

    Too many sprite tiles on Image "WMG_Link_89_90". The tile size will be increased. To remove the limit on the number of tiles, convert the Sprite to an Advanced texture, remove the borders, clear the Packing tag and set the Wrap mode to Repeat.
    UnityEngine.Canvas:SendWillRenderCanvases()
     
  41. rorakin3

    rorakin3

    Joined:
    Jan 2, 2013
    Posts:
    457
    Hey, yeah I tried it out and get the same error for really long line. Try doing as it says in the error and it will work. You remove the border by clicking sprite editor and dragging green boundary to edge of the sprite.
     
  42. Xan-Ko

    Xan-Ko

    Joined:
    Apr 12, 2016
    Posts:
    14
    It worked great, thanks for the help!
     
  43. Stijn_cts

    Stijn_cts

    Joined:
    Nov 14, 2016
    Posts:
    4
    Hello

    Firstly, this asset really works quite well! So good job on that.

    I have to implement a graph that uses a logarithmic scale on one of the axis (the Y-axis). Do you have any suggestions on how I could achieve that?
    (so the Y axis ticks go 10^-1, 10^0, 10^1, 10^2, ... but the ticks all have the same distance between them)

    Thanks in advance

    Stijn
     
  44. rorakin3

    rorakin3

    Joined:
    Jan 2, 2013
    Posts:
    457
    Hey, thanks!

    You can do log transformation or any other transformation with the use of custom labeling functions that override the Graph Maker default ones, and by storing transformed data into the graph. For example, for logarithmic 1, 10, 100 data, you would store it as 0, 1, 2 in the series. Your custom axis label function would then for example prefix "10^" to the number and output that as the string, giving 10^0, 10^1, 10^2. The plot overtime example scene shows how to override all the labeling behavior (including tooltip). In that example a $ is prefixed for all labels. So instead of prefixing $ you would either prefix "10^" or just apply mathematical transformation.
     
  45. TechnicalArtist

    TechnicalArtist

    Joined:
    Jul 9, 2012
    Posts:
    725
    Any example scene for playmaker?
     
  46. rorakin3

    rorakin3

    Joined:
    Jan 2, 2013
    Posts:
    457
    Hey, apologies for the delayed response.
    I actually recently worked with another customer integrating playmaker. Playmaker has changed / improved quite a bit, you can just call functions from the graph or series. I added some functions to make it easy to add / delete data from a series because of this. Feel free to email me your invoice # and I can send you the updated package.
     
  47. TechnicalArtist

    TechnicalArtist

    Joined:
    Jul 9, 2012
    Posts:
    725
    Thanks for reply
     
  48. Fab-London

    Fab-London

    Joined:
    Feb 6, 2013
    Posts:
    35
    Hello,

    I am having some problems with WMG_Axis_Graph.graphTypes, when it is set via the script with the line below it does not work
    graph.graphType = WMG_Axis_Graph.graphTypes.bar_stacked;

    I am getting what is in none_working_graph_type.

    When I am in play mode and change the graph type to another value it works fine, I can also change it back to bar_stacked and it still work.

    Any idea on what it might be, it does not make sense to me that the menu drop down change fixing it but when coded it does not look right
    none_working_graph_type.jpeg working_graph.jpeg

    Thanks
    Fabien
     
  49. rorakin3

    rorakin3

    Joined:
    Jan 2, 2013
    Posts:
    457
    Hey, try doing graph.Init() first in your script.
     
  50. Fab-London

    Fab-London

    Joined:
    Feb 6, 2013
    Posts:
    35
    Hi,

    Thanks for responding, no that did not do it.

    Added this
    //Create Graph from Prefab
    GameObject graphGO = GameObject.Instantiate(EyesDataCollectionPrefab);
    graphGO.transform.SetParent(this.transform, false);
    graph = graphGO.GetComponent<WMG_Axis_Graph>();
    graph.Init ();

    when in play mode switching graph type fixes the issue, switching between graph type in c-sharp does not help

    This is the full Start method

    void Start () {
    int numberOfXTicks;
    //Create Graph from Prefab
    GameObject graphGO = GameObject.Instantiate(EyesDataCollectionPrefab);
    graphGO.transform.SetParent(this.transform, false);
    graph = graphGO.GetComponent<WMG_Axis_Graph>();
    graph.Init ();

    FastSeries = graph.addSeries();
    MediumSeries = graph.addSeries();
    //SlowSeries = graph.addSeries();
    //TroubleshootingSeries = graph.addSeries();

    FastSeries.seriesName = "Fast";
    MediumSeries.seriesName = "Medium";
    // SlowSeries.seriesName = "Slow";
    // TroubleshootingSeries.seriesName = "Troubleshooting";

    FastSeries.pointColor = Color.yellow;
    MediumSeries.pointColor = Color.magenta;
    // SlowSeries.pointColor = Color.grey;
    // TroubleshootingSeries.pointColor = Color.cyan;

    //graph.xAxis.AxisMaxValue = 5;
    graph.xAxis.AxisLabelRotation = 90;
    graph.xAxis.LabelType = WMG_Axis.labelTypes.ticks;

    graph.yAxis.LabelType = WMG_Axis.labelTypes.ticks;
    graph.yAxis.AxisMinValue=0;
    graph.yAxis.AxisMaxValue=3;
    graph.yAxis.AxisNumTicks=2;
    graph.graphType = WMG_Axis_Graph.graphTypes.bar_stacked;
    //graph.autoPaddingProperties = WMG_Axis_Graph.AutoPaddingProperties.Legend;

    numberOfXTicks=CreateXAxisTimeLineMinutes (30, Until.now);

    //series1.UseXDistBetweenToSpace = true;

    //FAST DATA
    List<Vector2> fastdata = new List<Vector2>();

    for (int i = 0; i < numberOfXTicks; i++) {
    fastdata.Add (new Vector2 (i + 1, 1));
    }
    FastSeries.pointValues.SetList(fastdata);

    //MEDIUM DATA
    List<Vector2> mediumdata = new List<Vector2>();

    for (int i = 0; i < numberOfXTicks; i++) {
    if(i==0 || i==6 || i==20)
    mediumdata.Add (new Vector2 (i + 1, 1));
    }
    MediumSeries.pointValues.SetList(mediumdata);
    }

    private int CreateXAxisTimeLineMinutes(int DurationInMinutes, Until Until)
    {
    List<string> groups = new List<string>();

    DateTime currentDate = DateTime.Now;

    DateTime EndTime;
    DateTime StarTime;

    EndTime = currentDate;

    StarTime = EndTime.AddMinutes (-DurationInMinutes);

    TimeSpan span = EndTime.Subtract ( StarTime );
    //Now have the start time and end time, need to create the time line
    DateTime TempTime = StarTime;

    Debug.Log ("Start=" + StarTime.ToString("dd/mm/yyyy HH:mm:ss")+" End="+EndTime.ToString("dd/mm/yyyy HH:mm:ss"));
    Debug.Log ("Minutes between start and end " + span.Minutes);
    for(int i=0; i<span.TotalMinutes; i++)
    {
    //groups.Add(TempTime.ToString("dd/MM/yyyy HH:mm:ss"));
    groups.Add(TempTime.ToString("HH:mm:ss"));
    TempTime=TempTime.AddMinutes (1);
    }

    graph.groups.SetList(groups);
    graph.useGroups = true;

    graph.xAxis.LabelType = WMG_Axis.labelTypes.groups;
    graph.xAxis.AxisLabelSkipInterval = 9;
    graph.xAxis.AxisNumTicks = groups.Count;
    graph.xAxis.hideGrid = true;

    return (int)span.TotalMinutes;
    }
     
unityunity