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

    Fab-London

    Joined:
    Feb 6, 2013
    Posts:
    35

    I have also tried Graph.Refresh(); but that does not help
     
  2. rorakin3

    rorakin3

    Joined:
    Jan 2, 2013
    Posts:
    464
    Hey, I tried it out and got the same issue, thanks for reporting it! To fix this issue for now, just move:

    Code (csharp):
    1.  
    2. graph.graphType = WMG_Axis_Graph.graphTypes.bar_stacked;
    3.  
    to before:

    Code (csharp):
    1.  
    2. FastSeries = graph.addSeries();
    3.  
    Alternatively, you can put a graph.Refresh() both before and after setting to bar_stacked.
     
  3. Fab-London

    Fab-London

    Joined:
    Feb 6, 2013
    Posts:
    35
    yes it is working now
    Thank you
     
  4. Fab-London

    Fab-London

    Joined:
    Feb 6, 2013
    Posts:
    35
    Hello again,

    When I make two charts of type WMG_Axis_Graph.axesTypes.DUAL_Y visible the FPS performance figure drop from 49FPS to 15FPS

    I had a look around to see if there is anything I could do on my side to improve the performance as at the moment I do not think it is very practical for me to release something with such a performance drop. I am hopping there is something that can be done.
    Please let me know if you have a tips that will improve the situation.

    Regards
    Fabien
     
  5. rorakin3

    rorakin3

    Joined:
    Jan 2, 2013
    Posts:
    464
    Hey,

    I think the latest Graph Maker has many improvements in this area, if you can email me your invoice #, I can send you the latest version.
     
  6. Fab-London

    Fab-London

    Joined:
    Feb 6, 2013
    Posts:
    35
    Hi,

    I have sent the email yesterday, I hope this was the right email address :)

    Regards
    Fabien
     
  7. rorakin3

    rorakin3

    Joined:
    Jan 2, 2013
    Posts:
    464
    Hi Fabien,
    I already emailed you back
     
  8. Fab-London

    Fab-London

    Joined:
    Feb 6, 2013
    Posts:
    35
    Sorry but could you try to resend, I do not see your email. Checked Junk and deleted, nothing
     
  9. rorakin3

    rorakin3

    Joined:
    Jan 2, 2013
    Posts:
    464
    Hi,

    Ok I emailed you again. Maybe your email is blocking emails with attachments? I attached latest Graph_Maker.unitypackage which is 2.6 megabytes.
     
  10. bitlab3

    bitlab3

    Joined:
    Jun 28, 2017
    Posts:
    1
    Hello, I want to offset the starting Y position of the series and also the same with the X axis grid lines. I also want to offset the X-axis marks. Any idea on how this can be achieved?

    Below is an image of the original and what I would like to achieve.

    Original
    upload_2018-1-12_16-3-55.png



    New
    upload_2018-1-12_16-3-31.png
     

    Attached Files:

  11. KoFree

    KoFree

    Joined:
    Feb 19, 2017
    Posts:
    9
    I am considering buying your fascinating asset. Can it do "Force Directed Graphs" like these?

    1)

    2)

    3)



     
    Last edited: Jan 13, 2018
  12. rorakin3

    rorakin3

    Joined:
    Jan 2, 2013
    Posts:
    464

    Hi,
    I was able to get what you're looking for, but I used the latest Graph Maker, please email me with your invoice # and I can send you the latest.

    upload_2018-1-15_10-38-26.png

    Steps:
    1. Under YAxis tab, set "Opposite Side Labels" = true, this moves the Y-axis labels to the other side of the axis line. The "Axis Label Space Offset" can be used to control the distance from the label to the axis line.
    2. Under background object in hierarchy, set Y position of GridLinesX, and set Y position of YAxisLabels
     
  13. rorakin3

    rorakin3

    Joined:
    Jan 2, 2013
    Posts:
    464
    Hi there,
    Looks cool, but Graph Maker can only produce 2D graphs, so it might be possible in 2D, but all those examples are 3D.
     
  14. KoFree

    KoFree

    Joined:
    Feb 19, 2017
    Posts:
    9
    Thank you for getting back to me. So, how would you do a 2D "Force Directed Graph"?
     
  15. rorakin3

    rorakin3

    Joined:
    Jan 2, 2013
    Posts:
    464
    I would have to research it more, but I imagine the model is something similar to having imaginary springs between the points. You could maybe replicate it using Unity physics engine with spheres, then use those spheres position data as input to the graph.
     
  16. AshwiniM

    AshwiniM

    Joined:
    Jan 23, 2018
    Posts:
    2
    Hi,
    Can I get example script or video tutorial to create pie chart using Graph maker.
    By seeing the tutorial video I achieved line and bar chart but im not able achieve pie chart can anyone send me the video sample or script.
     
  17. rorakin3

    rorakin3

    Joined:
    Jan 2, 2013
    Posts:
    464
    Hey, here are two different ways, one with the pie graph and one with the ring graph. Feel free to email me directly for assistance.

    Code (csharp):
    1.  
    2.  
    3. using UnityEngine;
    4. using System.Collections;
    5. using System.Collections.Generic;
    6.  
    7. public class WMG_X_Simple_Pie : MonoBehaviour {
    8.  
    9.     public GameObject emptyPiePrefab;
    10.     public WMG_Pie_Graph pieGraph;
    11.     public List<float> testData;
    12.     public List<string> testStrings;
    13.  
    14.     // Use this for initialization
    15.     void Start () {
    16.         GameObject graphGO = GameObject.Instantiate(emptyPiePrefab);
    17.         graphGO.transform.SetParent(this.transform, false);
    18.         pieGraph = graphGO.GetComponent<WMG_Pie_Graph>();
    19.  
    20.         pieGraph.Init(); // Important this gets called before setting data
    21.  
    22.         pieGraph.sliceValues.SetList(testData);
    23.         pieGraph.sliceLabels.SetList(testStrings);
    24.     }
    25. }
    26.  
    27.  
    Code (csharp):
    1.  
    2.  
    3. using UnityEngine;
    4. using System.Collections;
    5. using System.Collections.Generic;
    6.  
    7. public class WMG_X_Pie_Ring_Graph : WMG_GUI_Functions {
    8.  
    9.     public Object ringGraphPrefab;
    10.     private WMG_Ring_Graph graph;
    11.  
    12.     void Start () {
    13.         GameObject ringGO = GameObject.Instantiate(ringGraphPrefab) as GameObject;
    14.         changeSpriteParent(ringGO, this.gameObject);
    15.         graph = ringGO.GetComponent<WMG_Ring_Graph> ();
    16.         graph.Init (); // always initialize first (ensures Start() method on the graph gets called first)
    17.         graph.pieMode = true;
    18.         graph.pieModePaddingDegrees = 1; // the degree spacing between each slice
    19.         graph.pieModeDegreeOffset = 90; // the degree rotational offset of the entire graph
    20.         graph.innerRadiusPercentage = 0.75f; // the percentage of the graph that is empty
    21.         graph.autoUpdateBandAlphaReverse = true; // reverses the order of how the bandcolors are updated
    22.         graph.labelStartCenteredOnBand = true;
    23.         graph.animateData = false;
    24.         graph.useComputeShader = true; // makes for smoother anti-aliased edges on the slices, and better perfomance (but doesn't work on all platforms)
    25.  
    26.         graph.values.Clear ();
    27.         graph.values.Add (275);
    28.         graph.values.Add (240);
    29.         graph.values.Add (210);
    30.         graph.values.Add (200);
    31.         graph.values.Add (160);
    32.         graph.values.Add (130);
    33.         graph.values.Add (100);
    34.         graph.values.Add (50);
    35.  
    36.         changeSpriteSize (graph.gameObject, 700, 600);
    37.     }
    38. }
    39.  
    40.  
     
  18. DeepfieldVR

    DeepfieldVR

    Joined:
    Feb 15, 2017
    Posts:
    1
    Is there a way to have a stacked bar chart with a line chart overlay at the same time? Thanks!
     
  19. rorakin3

    rorakin3

    Joined:
    Jan 2, 2013
    Posts:
    464
    Hey, good question. The graph type of combo allows doing bars and lines in the same graph, but unfortunately there is not a stacked bar option for series combo type, only bar / line. As a workaround, perhaps creating 2 separate charts, one overlay-ed on the other can work.
     
  20. TareqProjects

    TareqProjects

    Joined:
    Jun 27, 2016
    Posts:
    55
    Hey there, just a qucik question; how do I change the x-axis to appear on the top rather than bottom?

    So I know I can change the Axes type of a graph. What I would like to use is the DUAL_Y type but I want the X-Axis to appear on tope, like how it's done in the axis type III.

    Thanks

    edit: I'm using a line graph by the way
     
  21. rorakin3

    rorakin3

    Joined:
    Jan 2, 2013
    Posts:
    464
    Hey, yeah I think I will need to add another axis type like DUAL_Y_TOP for this. If you can email me your invoice #, I can probably get you an updated version in a couple days with this added axis type option.
     
  22. Maxii

    Maxii

    Joined:
    May 28, 2012
    Posts:
    45
    Hi,

    Just bought Graph Maker 1.5.8 and set it up to work with Ngui. So far, I've discovered that the test scenes properly setup a UIRoot, but not all of the prefabs when dropped in. I've only tried the Graph prefabs so far, but HeirarchicalTree, HexGrid, RandomGraph and SquareGrid do not setup a UIRoot and of course then don't work.

    In addition, when importing the package, use of the auto updater is required on Unity 2017.3.0. After the auto updater runs, there are still a couple of deprecation warnings: OnLevelWasLoaded and EnumFlagDrawer if I remember correctly. OnLevelWasLoaded is a bit dated now.

    My initial interest in the package is for making a tech tree, aka using HeirarchicalTree functionality which currently doesn't appear to work, or at least the prefab doesn't. I would like to request that you give the Ngui version a review and update so I can proceed and invest some time in learning what I hope and expect is a great asset. Thanks
     
  23. rorakin3

    rorakin3

    Joined:
    Jan 2, 2013
    Posts:
    464
    Thanks for the email, hope the updated version solved your issues!
     
  24. TareqProjects

    TareqProjects

    Joined:
    Jun 27, 2016
    Posts:
    55
    Is there a way to clear the contents of a graph? I basically have a graph being toggled and what to show new values every time it's enabled, but the data that's been previously plotted remains.
     
  25. rorakin3

    rorakin3

    Joined:
    Jan 2, 2013
    Posts:
    464
    Hey, series.pointValues.clear() to clear out the data. For showing / hiding, I recommend to use a CanvasGroup on the graph from the UI system, and set it's alpha to show / hide as it is the recommended way / better performance.
     
  26. TareqProjects

    TareqProjects

    Joined:
    Jun 27, 2016
    Posts:
    55
    Hey, me again.

    I took your advice and I can toggle my graph's alpha value. I got another question though. Current I have 5 series being displayed on a graph but I managed to separate them into two catagories so that if one radiobutton (technically a checkbox) is enabled, only 2 of the series is visible, and if the other button is selected then the remaining 3 is visible. I'm toggling an enum value when a radiobutton is selected.

    My problem is that the option that shows the 3 series draws the lines on top of each other. Now the values that those series are associated with are quite close in range. My question is is there a way to force the graph to update its axes ranges so that the series don't overlap as much? Currently the graph's autoUpdateBarAxisValue property is set to true but the series being plotted is too low on graph and it's hard to distinguish between the 3 values.

    Hope I've explained my problem properly.

    Edit: Sorry! Please ignore, I just realised MaxAutoShrink + MinAutoShrink were disabled in the YAxis tab of WMG_Axis_Graph
     
    Last edited: Apr 6, 2018
  27. TareqProjects

    TareqProjects

    Joined:
    Jun 27, 2016
    Posts:
    55
    Is there a way to scale/ change the size of the tooltip that shows when you hover the mouse over a node point in the graph?
     
  28. rorakin3

    rorakin3

    Joined:
    Jan 2, 2013
    Posts:
    464
    Hey you could change it in the scene / prefab by changing the font size of the text component under the tooltip object under the graph. Or change it via code by accessing the tooltip label:

    graph.toolTipLabel.GetComponent<Text>().fontSize = ##;

    If you go the code route, remember to do
    using UnityEngine.UI;
     
  29. chlorine

    chlorine

    Joined:
    Jun 30, 2013
    Posts:
    3
    Hi rorakin,

    I would like to have the area under a shaded series to have hover function so I can use it to show specific events happening at a specific time (event duration).

    How do you make hover functions at the shaded area underneath the series between 2 points? I tried to add colliders into the series but it didn't work and adding an event trigger myself did not work either.
     
  30. rashea

    rashea

    Joined:
    Jan 11, 2018
    Posts:
    3
    Hello.
    Thank you for the great software!
    I love this.

    By the way, would you mind for one question?
    I would like to use the X_plot overtime , but I don't know how I could draw my original plot data
    (For example, I would like to make the graph as (1,2) , (2,3) , (3,4) plotting overtime)

    I know that I need to change the code listed below, but I don't have any clue ...

    //code
    animateAddPointFromEnd(new Vector2((series1.pointValues.Count == 0 ? 0 : (series1.pointValues[series1.pointValues.Count-1].x + xInterval)), Random.Range(graph.yAxis.AxisMinValue, graph.yAxis.AxisMaxValue*1.2f)), plotAnimationSeconds);


    It would be great if I could simply add the plot data by using "series" just like one in the WMG_Axis_Graph
    図1.png
     
  31. rorakin3

    rorakin3

    Joined:
    Jan 2, 2013
    Posts:
    464
    Hey so basically you want a hover over tooltip based on where your mouse is in on x-axis? There isn't an out of box solution for this so you will have to make something. I suggest one of these:

    -Create invisible vertical bars overlayed on top of each data point. You could do this outside of Graph Maker or with Graph Maker by for example making a second series that will be the invisible bars. Give them color of alpha = 0. You can use a combo type chart with your first series with the shading and comboType = line and the second series (the invisible bars) with comboType = bar. Set the bar data to be (x, y-axis maximum), and the bars should be vertical.

    -Create a simple invisible rectangle overlaying the part of the graph bounded by the axes. Create a hover over script for your rectangle, where you calculate based on mouse point position and rectangle position and width, the % of where you are on the x-axis. Then map that to corresponding data point in your graph and then have a tooltip display the correct information based on that data point. You essentially need to use your own tooltip system with this approach.
     
  32. rorakin3

    rorakin3

    Joined:
    Jan 2, 2013
    Posts:
    464
    Hey,
    I just added to the X_plot_overtime example the ability to specify your own data list. You can also choose whether to keep repeating your custom dataList, or to stop after your entire dataList has been plotted. Feel free to email me with your invoice # and I can send you this latest version.

    upload_2018-4-13_16-49-34.png
     
    Last edited: Apr 13, 2018
  33. AshwiniM

    AshwiniM

    Joined:
    Jan 23, 2018
    Posts:
    2
    How to plot line graph using dual_y axis? Can you send me the sample code
     
  34. rorakin3

    rorakin3

    Joined:
    Jan 2, 2013
    Posts:
    464
    Hey, set your graph axes type and then control which series goes to which axis like so -

    Code (csharp):
    1.  
    2. axisGraph.axesType = WMG_Axis_Graph.axesTypes.DUAL_Y;
    3. series1.useSecondYaxis = false;
    4. series2.useSecondYaxis = true;
    5.  
     
  35. Jatapiaro

    Jatapiaro

    Joined:
    Aug 31, 2014
    Posts:
    12
    Is it possible to use it with Vuforia?
     
  36. rorakin3

    rorakin3

    Joined:
    Jan 2, 2013
    Posts:
    464
    Hey,
    Yeah you should be able to use Graph Maker / other UI elements with Vuforia in VR. The process would be similar to creating any UI element in 3 dimensional space (e.g. using a World Space canvas). To get started I recommend try creating a simple UI element like a button in the place of where you would put the graph, and see how it looks.
     
    username132323232 likes this.
  37. ph4nt0ma5ter

    ph4nt0ma5ter

    Joined:
    Apr 13, 2015
    Posts:
    2
    Hi rorakin3,
    I'm having difficulties to use your asset with ngui. is there a process to import the Graph_Maker_NGUI.unitypackage ? As I open and import. some errors appear and I didn't managed to use any prefabs yet to work. Is there a guide around that specifically?
     
  38. annahofseth

    annahofseth

    Joined:
    Mar 16, 2018
    Posts:
    3
    Hi! Is there an easy way of changing the tooltip-parent? I'm creating graphs dynamically inside UI masks, and this causes the tooltip to disappear outside the mask.
     
  39. rorakin3

    rorakin3

    Joined:
    Jan 2, 2013
    Posts:
    464
    Hey, can you shoot me an email with your invoice #, so I can email you a new NGUI package? I have updated the NGUI package a bit since the one on the asset store.
     
  40. rorakin3

    rorakin3

    Joined:
    Jan 2, 2013
    Posts:
    464
    Hey there, Ah yes there is a function that you can use to set the tooltip object. The world space example scene code does this if you check out the code in WMG_X_WorldSpace.cs.
    The important part is:
    Code (csharp):
    1.  
    2. graph.theTooltip.SetTooltipObject (toolTipPanel, toolTipLabel);
    3.  
    Here we are essentially assigning the tooltip object to the graph. In this way you can actually have many graphs use the same tooltip, and then so you can have the tooltip on its own canvas with a different sorting order to ensure it's always in front of everything.
     
  41. konsnos

    konsnos

    Joined:
    Feb 13, 2012
    Posts:
    121
    Hey, @rorakin3
    Thanks for the great asset. We just bought it and trying it out. I have a couple of questions though.
    1) In a graph, is it possible to mirror the Max-Min in the yAxis with autogrow and autoshrink; So if max is 100, min will be -100, and if max changes to 79, min will also be -79. I haven't found something like that and I'm trying to hardcode it but so far I'm messing things up.
    2) In a really long list of points in a graph is it possible to show just a portion of it and require to move to check left or right?
     
  42. rorakin3

    rorakin3

    Joined:
    Jan 2, 2013
    Posts:
    464
    Hey there,
    1) Yeah, I actually implemented this pretty recently. If you want to shoot me an email with your invoice # I can send you the latest. Basically, there is a new option that changes how the auto grow / shrink works.

    upload_2018-7-18_10-27-43.png

    When set to "DATA_MIN_MAX", and the auto grow / shrink enabled, the axis will basically fit exactly to the max / min of the data in the series.

    2) There are a couple approaches. One would be to put all the data in the graph, and use a Rect 2D Mask UI component to mask out any points outside the axis boundaries. Then add an invisible UI element that listens for mouse scrolling / drag events. Based on those events you would "scroll" the graph left or right by changing the x-axis min / max values.

    Another possible approach would be to always only graph a portion of the list of data at any given time. For example, maybe the pointValues list in the series correspond with indices 200-300 out of 1000 index list of data you have. Then similar to the above, have a scroll event, but instead of changing the x-axis min / max values set the pointValues list of data to correspond with the new data. This in combination with the DATA_MIN_MAX auto grow / shrink will set the axes min / max automatically to correspond with the newly set data.

    Hope that was helpful!
     
    konsnos likes this.
  43. TareqProjects

    TareqProjects

    Joined:
    Jun 27, 2016
    Posts:
    55
    Hey there,

    It's been a while but I'm experiencing this weird visual bug that seems to happen to some of my series when they're being plotted over time. Basically as the line is being drawn, it would first appear outside of the graph until it reaches its point, after which it'll jump back to the graph. I've tried reimporting the package and went through the DOTween setup but that doesn't seem to fix the issue. Any ideas what's causing this?
     

    Attached Files:

    Last edited: Aug 1, 2018
  44. rorakin3

    rorakin3

    Joined:
    Jan 2, 2013
    Posts:
    464
    Hmm, not sure without looking at some code, can you email me some example code / project to reproduce the issue?
     
  45. TareqProjects

    TareqProjects

    Joined:
    Jun 27, 2016
    Posts:
    55
    Just sent you an email (sorry for the long wait). Would like to ask about something else; is there a way to get the indicator in your graph-overtime example, to work with a graph that already has data on it i.e. move between points?
     
  46. ghassan_unity602

    ghassan_unity602

    Joined:
    Aug 13, 2018
    Posts:
    2
    I keep getting this error on your Area Shader Example
    NullReferenceException
    UnityEngine.ComputeShader.SetTexture (System.Int32 kernelIndex, System.String name, UnityEngine.Texture texture) (at /Users/builduser/buildslave/unity/build/artifacts/generated/bindings_old/common/Core/ComputeShaderBindings.gen.cs:148)
    WMG_Compute_Shader.dispatchAndUpdateImage () (at Assets/Graph_Maker/Scripts/WMG_Compute_Shader.cs:40)
    WMG_Series.updateAreaShading () (at Assets/Graph_Maker/Scripts/WMG_Series.cs:1856)
    WMG_Series.UpdateVisuals (System.Collections.Generic.List`1[T] newPositions, System.Collections.Generic.List`1[T] newWidths, System.Collections.Generic.List`1[T] newHeights) (at Assets/Graph_Maker/Scripts/WMG_Series.cs:1595)
    WMG_Series.UpdateSprites () (at Assets/Graph_Maker/Scripts/WMG_Series.cs:1588)
    WMG_Series.createOrDeleteAreaShading (System.Int32 pointValuesCount) (at Assets/Graph_Maker/Scripts/WMG_Series.cs:1462)
    WMG_Series.CreateOrDeleteSpritesBasedOnPointValues () (at Assets/Graph_Maker/Scripts/WMG_Series.cs:1242)
    WMG_Series.pointValuesCountChanged () (at Assets/Graph_Maker/Scripts/WMG_Series.cs:858)
    WMG_Series.PointValuesCountChanged () (at Assets/Graph_Maker/Scripts/WMG_Series.cs:892)
    WMG_Change_Obj.Changed () (at Assets/Graph_Maker/Scripts/Utils/WMG_Change_Obj.cs:20)
    WMG_Axis_Graph.SeriesChanged (System.Boolean countChanged, System.Boolean instant) (at Assets/Graph_Maker/Scripts/Graphs/WMG_Axis_Graph.cs:895)
    WMG_Axis_Graph.SeriesCountChanged () (at Assets/Graph_Maker/Scripts/Graphs/WMG_Axis_Graph.cs:910)
    WMG_Change_Obj.Changed () (at Assets/Graph_Maker/Scripts/Utils/WMG_Change_Obj.cs:20)
    WMG_Axis_Graph.ResumeCallbacks () (at Assets/Graph_Maker/Scripts/Graphs/WMG_Axis_Graph.cs:833)
    WMG_Axis_Graph.Refresh () (at Assets/Graph_Maker/Scripts/Graphs/WMG_Axis_Graph.cs:773)
    WMG_Axis_Graph.Update () (at Assets/Graph_Maker/Scripts/Graphs/WMG_Axis_Graph.cs:765)
     
  47. rorakin3

    rorakin3

    Joined:
    Jan 2, 2013
    Posts:
    464
    Hey,

    Can you send me an email with info on how to reproduce the issue, what code you are running and Unity version? I can also email you an updated version of the package if you send me your invoice #, which may help.
     
  48. Nacho84

    Nacho84

    Joined:
    Jun 3, 2010
    Posts:
    8
    Hello rorakin3, is there any way to plot an axis graph in such a way that the data points don't stretch across the X axis? More specifically, I would like to plot the graph in such a way that the whole X axis is covered if I have 100 points but, if I only have 20 points, I want the graph to stretch across 20% of the surface only. Thanks in advance!
     
  49. rorakin3

    rorakin3

    Joined:
    Jan 2, 2013
    Posts:
    464
    Hey,
    Sure, first set the X axis max and min values to some range, for example 0 - 100. Next when you're creating the series points, assign the x-value you want for each point in the series (pointValues), for example if the points had x-values 20-40 they would appear in the 20-40% range of the x-axis. Lastly, make sure to disable "Use X Dist Between To Space" on the series (code: series.UseXDistBetweenToSpace = false)
     
    Nacho84 likes this.
  50. Nacho84

    Nacho84

    Joined:
    Jun 3, 2010
    Posts:
    8
    Perfect, that did the trick! Thank you very much!

    One more question: the values on my X axis are not strictly numerical. More specifically, they are the week number of a given year. For example: W1 1984, W2 1984, ...., W52 1984, W1 1985, W2 1985, etc.

    From what I can see in the CS files, the data type of WMG_Series.pointValues is a Vector2. Is there any way to create an alphanumeric series? I know how to modify the labels in the X axis order to display an alphanumeric value, but I want the points in the series themselves to be alphanumeric, so that I get the correct value when hovering the mouse cursor over them.

    BTW, this is an excellent package. Keep up the good work!