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

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

 

Yes, that makes more sense, thanks for letting me know I've changed it

 

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.

 

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

 

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

 

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.

 

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​

 

Is there a way to plot only a line?, i dont want any points.

Thanks

 

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.

 

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

 

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

 

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 -

 

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

 

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.

 

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:





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.

 

Ooh, very nice! Quite an improvement
Does it automatically fall back to the old method on unsupported platforms?

 

Yeah I added a check for platform support, if unsupported it will fall back to the old method.

 

Hi rorakin3 -

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

 

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.  

 

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

 

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.

 

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!

 

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

 

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.

 

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.

 

intereseted in that too

 

Hey,
Yes, have you checked out this demo?
http://stew-soft.com/GraphMaker/Plot_Overtime/index.html

Sorry there is not a trial version.

 

Thank you

 

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?

 

HI there,
Yes, you can create a script that will create items in a list view, where each item is a chart.

 

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?

 

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.

 

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

 

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.

 

I have this graph:


And i want the red bar more wide like this:

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.

 

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.

 

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

}​

}

 

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

}

 

It worked great, thanks a lot!!

 

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

 

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.

 

It worked great, thanks for the help!

 

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

 

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.

 

Any example scene for playmaker?

 

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.

 

Thanks for reply

 

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


Thanks
Fabien

 

Hey, try doing graph.Init() first in your script.

 

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;
}