Search Unity

  1. Welcome to the Unity Forums! Please take the time to read our Code of Conduct to familiarize yourself with the forum rules and how to post constructively.
  2. Join us on Dec 8, 2022, between 7 am & 7 pm EST, in the DOTS Dev Blitz Day 2022 - Q&A forum, Discord, and Unity3D Subreddit to learn more about DOTS directly from the Unity Developers.
    Dismiss Notice
  3. Have a look at our Games Focus blog post series which will show what Unity is doing for all game developers – now, next year, and in the future.
    Dismiss Notice

Charts and Graphs for unity3d [Released]

Discussion in 'Assets and Asset Store' started by BitsplashIO, Jan 11, 2017.

  1. BitsplashIO

    BitsplashIO

    Joined:
    Dec 9, 2016
    Posts:
    220
    You can put the bar chart into a scroll view , and then set
    upload_2021-10-1_13-39-59.png

    This would make the chart not shrink. it will fit exacly to the height of the container.
    Regarding the group labels ,I can't reproduce this. Are you using the latest version of Graph and Chart ?
     
  2. iSinner

    iSinner

    Joined:
    Dec 5, 2013
    Posts:
    174
    I'm using Version 1.954

    You are correct, setting "Bar Fit Align" to height doesn't shrink the graph.

    If I put the graph in the scroll view, which i have, it is only scrollable if the "Container"(the gameobject from the gif) of the scroll view extends beyond the scroll view viewport, which is the "Viewport" gameobject in the gif. But the problem is, the CanvasBarChart doesn't resize it's own UIElement based on the amount of groups it has, so it doesn't become scrollable.

    The bar chart UI Element doesn't resize itself based on the amount of groups in the chart, hence it won't become scrollable because the "Content" UI Element remains fit entirely within the "Viewport" UIElement. https://i.imgur.com/I2LLx8H.gif

    As for the group labels, here is another illustration of them moving when the UI element of the chart is being resized. https://i.imgur.com/u9XJJFV.gif

    I figured that if i change the "Breadth" property of the group label component to be half of the RectTransform width of the UI Element of the chart, they will position correctly.
     
    Last edited: Oct 1, 2021
  3. BitsplashIO

    BitsplashIO

    Joined:
    Dec 9, 2016
    Posts:
    220
    Regarding the container. You can add a script that updates the scrollview to the actual size of the chart. you can obtain the size of the chart by calling barChart.TotalWidth.

    Regarding the labels.After seeing your inspector settings , I have tried some more and was able to reproduce the issue when the depth value of the chart is non 0. For your use case , both breadth and depth should be set to 0 , because you want to place the labels exactly at the center of the group.
     
  4. iSinner

    iSinner

    Joined:
    Dec 5, 2013
    Posts:
    174
    TotalWidth is of no help, here is an illustration: https://i.imgur.com/4vhs2Ze.gif
    It shows me that TotalWidth is 270, but i need the UIElement of the chart to be about 1500 (you can see it in the RectTransform) to match the chart width.

    Regarding group labels, setting depth and breadth to 0 doesn't place them at the center of the group. But if i set the breadth to be half of the rect transform width, then they are placed at the correct position. Maybe it has something to do with the UIElement pivot? the chart UIElement pivot is in top left corner.

    I noticed that if i put the pivot of the UIElement to be in the center on the X axis, at 0 breadth the labels are positioned where they should be. Is this(the pivot not being in the center messing up the positioning of the labels) intended behaviour or is this an oversight? https://i.imgur.com/5zPkxxd.png

    Here is at half the width: https://i.imgur.com/3W4rYHx.png
    Here is at 0: https://i.imgur.com/ytYnC8h.png
    Notice in these screens i have the pivot of the graph UIElement at top left.
     
    Last edited: Oct 1, 2021
  5. BitsplashIO

    BitsplashIO

    Joined:
    Dec 9, 2016
    Posts:
    220
    Regarding the labels , I have attached a fix to this post. The issue i found was a little different from yours , so i'll be happy to receive feedback from you regarding this.

    Regarding the container , try doing this :
    containerHeight * (bar.TotalWidth/bar.TotalHieght)

    As far as i have checked both should work.
     

    Attached Files:

  6. RealWyldhunt

    RealWyldhunt

    Joined:
    Dec 5, 2017
    Posts:
    30
    What would be the easiest way to build a 3d scatter plot graph?
    Does Chart and Graph do scatter plots natively, or do I need to add them in myself?
     
  7. iSinner

    iSinner

    Joined:
    Dec 5, 2013
    Posts:
    174
    The labels now work as expected, when my pivot is top left and the breadth of labels is 0, they are under each group as they should be. Thank you for the fix!

    As for how to calculate the width of the container, this formula doesn't quite work
    containerHeight * (bar.TotalWidth/bar.TotalHieght)
    , it works if i have the FitMargin all at 0, but i don't. Here are my FitMargin values for the chart https://i.imgur.com/JjQk5aP.png

    If i modify the formula to
    (containerHeight - bar.FitMargin.Top - bar.FitMargin.Bottom)* (bar.TotalWidth/bar.TotalHieght)
    then the calculated size is way better, the container doesn't fit the chart perfectly because i am not sure how to account for the left and right margin values, but if i set the left and right margin values to 0, then it fits perfectly.

    Could you account for the margin left and right and give me a formula?

    Update: after more experimenting, this seems to do the work:
    (containerHeight - bar.FitMargin.Top - bar.FitMargin.Bottom) * (bar.TotalWidth / bar.TotalHieght) + bar.FitMargin.Left

    Could you confirm if this is accurate?
     
    Last edited: Oct 4, 2021
  8. RealWyldhunt

    RealWyldhunt

    Joined:
    Dec 5, 2017
    Posts:
    30
    Scatter plots.
    I'm not seeing any...
    What would be the best way to implement scatter plots?
    I'd love to have 2d and 3d scatter plots.
     
  9. BitsplashIO

    BitsplashIO

    Joined:
    Dec 9, 2016
    Posts:
    220
    Looking into the code , this should work properly.
     
  10. BitsplashIO

    BitsplashIO

    Joined:
    Dec 9, 2016
    Posts:
    220
    3d scatter plots are not supported , unless you have them all on one planne. you may be able to create a 2D scatter plot
    using the bubble chart.
     
  11. RealWyldhunt

    RealWyldhunt

    Joined:
    Dec 5, 2017
    Posts:
    30
    That's unfortunate.
    Charts and Graphs has been a life saver for me. It's an amazing work.
    Might I make a feature request that scatter plots be added in some future version?
    As far as I can tell so far, it's about the only thing that Charts and Graphs can't do...
     
  12. BitsplashIO

    BitsplashIO

    Joined:
    Dec 9, 2016
    Posts:
    220
    It is planned eventually. for quite some time i have been working hard on a completely new version of Graph and Chart. The first part of it should be released soon in an extended version of this asset. Only after finishing the basics in the new version could i have time to add new types of charts. So it will eventually happen , but it may take quite some time until it does.
     
  13. fraeri

    fraeri

    Joined:
    Nov 8, 2018
    Posts:
    64
    Sorry, for the late feedback. I'm very happy with that solution! Thanks a lot!! Only Issue, I'd like to rotate the graph the other way around. Is that possible? So the bars should start from the left.

    Any update on the fullscreen pie chart topic? :)

    EDIT: Another Issue we recognized are the horizontal labels of an bar chart. If there are to many bars the texts are overlapping, see picture. Is it possible to avoid this? What would be acceptable is to hide every second label or something. THANKS!

    EDIT2: Same goes for the pie chart, if there are many small slices text are overlapping, even if it could be avoided. Any solution for that? What came to our mind would be the option to tap on the slices to enable/disable each label, would that be a simple task? Other Option is to manipulate the "length" variable of the "Text Direction"-Component.
     

    Attached Files:

    Last edited: Oct 14, 2021
  14. BitsplashIO

    BitsplashIO

    Joined:
    Dec 9, 2016
    Posts:
    220
    Hi there.
    I am attaching a patch for the pie and bar chart fitting. You can now set "Vertical" and "VerticalOpposite" for the bar chart. and you can set "FitToContainer" option for pie charts.

    Regarding the label issue.
    In the bar chart you can a rotated text prefab. So you can have to rotated by 45 degrees on the z axis , and it will fit better.
    In the pie chart. you can create your own script and attach it to the pie prefab. Then you can manipulate the prefab by calling GetComponent<PieInfo> and obtaining PieObject. It contains a reference to all labels and graphics specific to a category. This is similar to the bar chart example right here :
    var pie = GetComponent<PieInfo>();
    pie.pieObject.ItemLabel.UIText.SetActive(true/false).

    You can then activate and deactivate each one on pieclick event
     

    Attached Files:

    fraeri likes this.
  15. fraeri

    fraeri

    Joined:
    Nov 8, 2018
    Posts:
    64

    Awesome, thank you very much!
    Regarding the overlapping issue: Do you think it would be possible for the asset to calculate if some labels are overlapping and rotate them accordingly? For the Barchart it maybe would be not so difficult.

    With this method I'm only able to set all Labels active/inactive or each individually? If I could access every "TextDirection" individually I can manipulate the "Length" property, so none of them is overlapping. Possible?
     
    Last edited: Oct 16, 2021
  16. BitsplashIO

    BitsplashIO

    Joined:
    Dec 9, 2016
    Posts:
    220
    1. currently all the bar chart lables are created in the same manner, for simplicity. The way to approach this would be either to rotate the text prefab or to add newlines to the text.

    2. yes. you can access each one individually this way . you can access it like this :
    pie.pieObject.ItemLabel.Direction.Length
    pie.pieObject.Category.Direction.Length
     
  17. fraeri

    fraeri

    Joined:
    Nov 8, 2018
    Posts:
    64
    But by changing "pie.pieObject.ItemLabel.Direction.Length" I change the length of all labels, don't it? But what if I have 10 labels (one for each pie "slice") and I only want to change the length of one of them?
     
  18. BitsplashIO

    BitsplashIO

    Joined:
    Dec 9, 2016
    Posts:
    220
    if you add the script to the pie prefab. It would affect the length of each one separately.
     
  19. fraeri

    fraeri

    Joined:
    Nov 8, 2018
    Posts:
    64
    Sorry but, could you make an example of that? Cant follow you ....
     
  20. BitsplashIO

    BitsplashIO

    Joined:
    Dec 9, 2016
    Posts:
    220
    Try this. This shows you how to can be done. You can replace the dictionary with your own function to determine the length of each category
     

    Attached Files:

  21. robertAtWork

    robertAtWork

    Joined:
    Oct 31, 2021
    Posts:
    1
    Hi I'm trying to use a 2D graph chart on the Hololens device and I'm encountering a couple of issues.

    First, the lines and points on the chart are rendered just on one eye, are there any predefined materials that can be used to solve this issue?

    Second, I'm haven't been able to turn of billboarding for the charts, is there anyway of doing this? I'd to be able to manually rotate the canvases in 3D without the charts rotating based on the camera. I've tried Paper Effect Text but this didn't help in anyway. Do you have any suggestion?

    Thank you.
     
  22. BitsplashIO

    BitsplashIO

    Joined:
    Dec 9, 2016
    Posts:
    220
    Answered in email
     
  23. MINJU-KANG

    MINJU-KANG

    Joined:
    Mar 24, 2016
    Posts:
    8
    Hello
    I am developing in a VR environment.
    Like robertAtWork, I also have the problem that the chart is rendered in only one eye.
    It seems to be a SinglePass rendering problem.
    There is no problem when I switch to MultiPass, but I have to develop with Singlepass.
    Any solution?
    please help

    Currently developing Unity2021.1.28f1/URP/VIVE Pro/SinglePass Instanced.
     
  24. BitsplashIO

    BitsplashIO

    Joined:
    Dec 9, 2016
    Posts:
    220
    please contact me at support@bitsplash.io . I'll send you the new shader files that will be available in the next version
     
  25. fraeri

    fraeri

    Joined:
    Nov 8, 2018
    Posts:
    64
    Hi BitsplashIO,
    sorry for bother you again. Short question: in the Graph Chart we are using mainly the date format for the Horizontal Axis. Would it be possible to change the divisions to each day, each week, each month or each year?

    Thank you!
     
  26. BitsplashIO

    BitsplashIO

    Joined:
    Dec 9, 2016
    Posts:
    220
    Hi there. You can set the axis measure to Data Units:
    upload_2021-12-2_19-21-23.png
    and then set the time in seconds for each division. So if you want to have 1 division per day , set the number to 86400
    which is the number of seconds in a day.
     
  27. fraeri

    fraeri

    Joined:
    Nov 8, 2018
    Posts:
    64
    Hi, thank you for the fast response. By implementing your suggestion I get from "Fixed Division" to "Data Unit", please see pictures attached. (Units per Division set to 86400*30, which is also not correct because of the day-difference of the months

    This is not ideal. For this example I would like two have monthly divisions from May, June, July, August, September, October, November. Is that possible?
     

    Attached Files:

  28. BitsplashIO

    BitsplashIO

    Joined:
    Dec 9, 2016
    Posts:
    220
    Hi there.

    If you wish to distribute the divisions evenly. Than use integers instead. 1 for january 2 for february etc.
    Then use
    graph.HorizontalValueToStringMap[1] = "January"; etc.
    for more information see the following page :
    http://bitsplash.io/docs/graph-chart/use-string-values-in-axis-or-points

    Let me know if you need any further assitance.
     
  29. fraeri

    fraeri

    Joined:
    Nov 8, 2018
    Posts:
    64
    Sorry @BitsplashIO , I'm at not sure if we mean the same thing. Let me try to explain it more clearly:

    I have a percentage-value for each day in a custom timeframe. In the examples below its from 26th of August to 7th of December. I plot them with the graph chart, each day as a point with a certain percentage. Which works perfectly by the way!
    With your asset I now have the option to decide how many divisions I have on the Horizontalaxis(for the dates) or I can use the data units as we discussed before. Both Options are kinda looking like this, when I do it: GraphWithDate.png

    None of these options are giving me the ability to create something more like this (its done with Photoshop, I don't know how to create this in Unity): GraphWithMonthPhotoshop.png

    So what I want is to have a division on every 1st of the month from the timeframe which is plotted.

    The Best would be an Dropdown in the inspector of the HorizontalAxis-Component, which lets me choose between monthly divisions, weekly division or yearly division, or even daily divisions.

    If there is a solution for that an example would be useful for me.


    Thanks a ton for your patience!
     

    Attached Files:

    Last edited: Dec 14, 2021
  30. julioibanezbertrand

    julioibanezbertrand

    Joined:
    Oct 30, 2021
    Posts:
    2
    the Chart has an invisible zone that is blocking part of UI far beyond its container. (it is not text)
    Great package by the way.
    I have disabled all Raycaster booleans and also even disabled raycast from all prefabs, including text, lines, dots, etc. The problem remains. The only solution is to change the chart parent hierarchy but I don't want to do this.
    As a Note, the chart is inside a Parent Rect Transform with LayoutGroup and Layout Element. But this doesn't seem the problem.
    Another quick question, how to disable vertical/horizontal text? my solution is just to use a text prefab with no text, but this seems not very elegant.
    Thank you for your support.
     
  31. BitsplashIO

    BitsplashIO

    Joined:
    Dec 9, 2016
    Posts:
    220
    Hi there. Please contact me at support@bitsplash.io with images demonstrating the issue. The blocking container should not be larger then the rect transform of the chart object. Regarding disabling text , you have done it correct ,you can use the notext prefab that comes with graph and chart.
     
  32. BitsplashIO

    BitsplashIO

    Joined:
    Dec 9, 2016
    Posts:
    220
    Hi there. Sorry for the late replay time. I missed your message on the forum. It is best to contact me at support@bitsplash.io. Regarding you questions , you can use date months or anything else in the method i described. Having the division on the first of the month makes the divisions look uneven, so it is not the best way to do that.
     
  33. fraeri

    fraeri

    Joined:
    Nov 8, 2018
    Posts:
    64
    All right, no problem. I wrote you an Email two days ago. Thanks
     
  34. BitsplashIO

    BitsplashIO

    Joined:
    Dec 9, 2016
    Posts:
    220
    Hi there. It seems your email server rejects my mails. Anyway, I have uploaded a new version of Graph and Chart. It allows you to set custom axis divisions by value. You can go to Tutorials/Misc/CustomAxisDivision for an example that adds a division for each month.
     
  35. julioibanezbertrand

    julioibanezbertrand

    Joined:
    Oct 30, 2021
    Posts:
    2
    Hi!
    It seems there is a little issue with the text size on the X/Y axis when changing camera Orthographic Projection Size (zooming in and out in 2d camera). The chart remains in place as expected... so far so good... but the text on the axis scales up and down depending on the camera projection value.
    Note: The graph charts are placed in a screen space overlay canvas.


    I could force on updating the text prefab to remain in a consistent size, but I would try to avoid this expensive operation if I can. and regarding performance... I am disabling some text values with null prefabs... but I wonder how much performance is wasted? as I can still see all rect-transform being calculated?

    One approach to fix those two problems are exposing the axis values on a list to make my own X/Y axis:
    for (int i = 0; i < number of points; i++)
    {
    DoubleVector3 point = graph.DataSource.GetPoint("my graph", PointOnY);
    MyList((float)point.y);
    }
    But I am concerned about performance...
    Thank you so much!
     
  36. BitsplashIO

    BitsplashIO

    Joined:
    Dec 9, 2016
    Posts:
    220
    Hi there. Just tried using orthographic camera with the chart. It does not produce the bug. please contact me at support@bitsplash.io with a video of the issue, and elaboration of the scene setup.
     
  37. fraeri

    fraeri

    Joined:
    Nov 8, 2018
    Posts:
    64
    Hi,
    Regarding the "Item Labels"-Component: Normally the label shows the value of a GraphChart point in the following format: "<Value on X-Axis>:<Value of Y-Axis>" e.g: "6:43PM: 3". Is it possible to set the Label to show only the value (e.g: 3) of the Y-Axis?

    Regards,
    Eric
     
  38. BitsplashIO

    BitsplashIO

    Joined:
    Dec 9, 2016
    Posts:
    220
    you can change the item format of the graph chart:
    upload_2022-1-3_17-36-52.png
     
    fraeri likes this.
  39. wzy31124513

    wzy31124513

    Joined:
    Oct 28, 2021
    Posts:
    1
    Hi, I would like to know how to change the color of one of the bars individually without changing the whole category when creating a bar graph with multiple groups and categories?
     
  40. BitsplashIO

    BitsplashIO

    Joined:
    Dec 9, 2016
    Posts:
    220
    Hi there. Look at tutorials/bar/barmaterialselection for refernce. This scene changes the color of bar based on mouse click.
     
  41. pickerweng

    pickerweng

    Joined:
    Jan 21, 2015
    Posts:
    1
    Hi,
    It that possible have the different colors in the group labels/bars for BarChart?
     
    Last edited: Feb 6, 2022
  42. BitsplashIO

    BitsplashIO

    Joined:
    Dec 9, 2016
    Posts:
    220
    Hi there. Look at tutorials/bar/barmaterialselection for refernce. This scene changes the color of bar based on mouse click.
     
  43. fraeri

    fraeri

    Joined:
    Nov 8, 2018
    Posts:
    64
    Hi Sir,
    another small issue (at least for me it is one) I found at the stacked bar chart would be the Item labels. As you can see in the picture the label of the green part of KW41 is showing the sum of green+yellow (25%). In my case I would like to show only the percentage of the green part, which is 12%.
    Could you show me how to fix/change it?
     

    Attached Files:

  44. TheFlyHawk

    TheFlyHawk

    Joined:
    Mar 23, 2016
    Posts:
    56
    Group.png
    How to change the date.
     
  45. AlexRinggaardCP

    AlexRinggaardCP

    Joined:
    Jan 20, 2020
    Posts:
    8
    Hi Bit
    We just upgrade from Unity 2019 LTS to 2020 LTS and it caused the Graph and Chart - Lite Edition to throw a lot of MissingComponentException: There is no 'CanvasRenderer' attached to the "xxx" game object. With xxx being various game object used by the package. I was able to fix all of them by just adding a CanwasRenderer to the complaining objects. Except for one. It's complaining about missing it on an "item" game object, which I've narrowed down to something used by a Pie Chart (and seems to be something with the labels) but I can't find any "item" game object to add a canvas renderer to fix the issue. Do you know why we're getting these errors or how I can fix the last item?

    Stack trace for the error:
    MissingComponentException: There is no 'CanvasRenderer' attached to the "item" game object, but a script is trying to access it.
    You probably need to add a CanvasRenderer to the game object "item". Or your script needs to check if the component is attached before using it.
    UnityEngine.CanvasRenderer.EnableRectClipping (UnityEngine.Rect rect) (at <a4bb6c1de2664f7eb2ae8a50eb8d72fd>:0)
    UnityEngine.UI.MaskableGraphic.SetClipRect (UnityEngine.Rect clipRect, System.Boolean validRect) (at Library/PackageCache/com.unity.ugui@1.0.0/Runtime/UI/Core/MaskableGraphic.cs:158)
    UnityEngine.UI.RectMask2D.PerformClipping () (at Library/PackageCache/com.unity.ugui@1.0.0/Runtime/UI/Core/RectMask2D.cs:245)
    UnityEngine.UI.ClipperRegistry.Cull () (at Library/PackageCache/com.unity.ugui@1.0.0/Runtime/UI/Core/Culling/ClipperRegistry.cs:47)
    UnityEngine.UI.CanvasUpdateRegistry.PerformUpdate () (at Library/PackageCache/com.unity.ugui@1.0.0/Runtime/UI/Core/CanvasUpdateRegistry.cs:201)
    UnityEngine.Canvas.SendWillRenderCanvases () (at /Users/bokken/buildslave/unity/build/Modules/UI/ScriptBindings/UICanvas.bindings.cs:84)
     
  46. BitsplashIO

    BitsplashIO

    Joined:
    Dec 9, 2016
    Posts:
    220
    The values of the labels can be set manually in the following way :
    bar.SetLabelOverride("category","group","override label");
    you can later call
    bar.ClearLabelOverride();
     
  47. BitsplashIO

    BitsplashIO

    Joined:
    Dec 9, 2016
    Posts:
    220
    Hm.. it seems that the upgrade cause some broken script connection. Perhaps try reimporting the asset to solve them.
     
  48. AlexRinggaardCP

    AlexRinggaardCP

    Joined:
    Jan 20, 2020
    Posts:
    8
    Thank you for the reply. I've spend a day more trying to solve this and I've found the issue (though no solution). I don't think it's a broken connection or even an update problem. I can recreate it in a completely new empty project with a fresh download (Unity 2020.3.29f1 / Graph and Chart - Lite Edition 1.55).
    1. Create a new project
    2. Add a canvas
    3. Add a RectMask2D (I believe this is the component that are causing the issue)
    4. Add a PieChart under the RectMask2D
    You now get the "MissingComponentException: There is no 'CanvasRenderer' attached to the "item" game object, but a script is trying to access it."

    Is there any chance that this is something you'll fix in an update or do you have any advice on how to solve this.
    We use RectMask to create soft "blurry" fadeouts on our scrollviews and I don't relish having to try to convince the designers to do without them :)
     

    Attached Files:

  49. BitsplashIO

    BitsplashIO

    Joined:
    Dec 9, 2016
    Posts:
    220
    I have tried to reproduce this with no success. It seems that the pie chart is masked without any error. Please contact me at support@bitsplash.io I'll help out.
    Edit: I have managed to reproduce this and checking this out. Please contact me via email.
     

    Attached Files:

    Last edited: Feb 24, 2022
  50. BitsplashIO

    BitsplashIO

    Joined:
    Dec 9, 2016
    Posts:
    220
    This issue is now fixed in version 1.6 that has just been made available for update.