Charts and Graphs for unity3d [Released]

You can put the bar chart into a scroll view , and then set


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 ?

 

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.

 

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.

 

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.

 

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.

 

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?

 

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?

 

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.

 

Looking into the code , this should work properly.

 

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.

• Bubble Chart

 

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...

 

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.

 

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.

 

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 :

• How to rotate a single bar in the bar chart

var pie = GetComponent<PieInfo>();
pie.pieObject.ItemLabel.UIText.SetActive(true/false).

You can then activate and deactivate each one on pieclick event

 

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?

 

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

 

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?

 

if you add the script to the pie prefab. It would affect the length of each one separately.

 

Sorry but, could you make an example of that? Cant follow you ....

 

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

 

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.

 

Answered in email

 

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.

 

please contact me at support@bitsplash.io . I'll send you the new shader files that will be available in the next version

 

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!

 

Hi there. You can set the axis measure to Data Units:

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.

 

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?

 

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.

 

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:

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):

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!

 

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.

 

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.

 

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.

 

All right, no problem. I wrote you an Email two days ago. Thanks

 

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.

 

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!

 

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.

 

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

 

you can change the item format of the graph chart:

 

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?

 

Hi there. Look at tutorials/bar/barmaterialselection for refernce. This scene changes the color of bar based on mouse click.

 

Hi,
It that possible have the different colors in the group labels/bars for BarChart?

 

Hi there. Look at tutorials/bar/barmaterialselection for refernce. This scene changes the color of bar based on mouse click.

 

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?

 

How to change the date.

 

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)

 

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();

 

Hm.. it seems that the upgrade cause some broken script connection. Perhaps try reimporting the asset to solve them.

 

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

 

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.

 

This issue is now fixed in version 1.6 that has just been made available for update.