Radar charts module

Having made this for my FPS game several months ago to display weapon stats, I decided to open-source it as I haven’t seen anything like this publicly available, that looked good. Rather than struggling with UI’s and trigonometry, leading to a messy pile of frames, my approach uses attachments, beams and billboard GUIs.

Example code
local RS = game:GetService("ReplicatedStorage")
local plr = game:GetService("Players").LocalPlayer
local radarCharts = require(RS.RadarCharts)
task.wait(3)
local new = radarCharts.new("Gun ??", CFrame.new(-22.8, 6.5, 19.4)*CFrame.Angles(0,math.rad(90), math.rad(-90)), workspace)
new.mySettings = {
	TweenInfo = TweenInfo.new(0.3, Enum.EasingStyle.Cubic, Enum.EasingDirection.Out),
	Scale = 1.2,
	TitleFont = Enum.Font.Michroma,
	StatTextFont = Enum.Font.Michroma,
	StatValueFont = Enum.Font.Michroma,
	StatValueTextColor = Color3.new(157, 237, 255),
	RadarLineColor = ColorSequence.new(Color3.fromRGB(212, 0, 255), Color3.fromRGB(255, 217, 0))
}
new.stats = {
	{Name = "Damage", Val = 0.5, Lim = 10},
	{Name = "Headshot damage", Val = 3, Lim = 2},
	{Name = "Range", Val = 15, Lim = 50},
	{Name = "Mag size", Val = 1, Lim = 4},
	{Name = "Armor penetration", Val = 70, Lim = 20},
}
new:update()
task.wait(5)
local rand = Random.new()
for i = 1, 10 do
	new.mySettings = {
		Name = "Player"..tostring(rand:NextInteger(1000,9999));
		TweenInfo = TweenInfo.new(0.3, Enum.EasingStyle.Cubic, Enum.EasingDirection.Out),
		TitleFont = Enum.Font:GetEnumItems()[math.random(1, #Enum.Font:GetEnumItems())],
		StatTextFont = Enum.Font:GetEnumItems()[math.random(1, #Enum.Font:GetEnumItems())],
		StatValueFont = Enum.Font:GetEnumItems()[math.random(1, #Enum.Font:GetEnumItems())],
		StatValueTextColor = Color3.new(math.random(), math.random(), math.random()),
		RadarLineColor = ColorSequence.new(Color3.new(math.random(), math.random(), math.random()))
	}
	new.stats = {
		{Name = "Pace", Val = rand:NextInteger(20,99), Lim = rand:NextInteger(20,99)},
		{Name = "Shooting", Val = rand:NextInteger(20,99), Lim = rand:NextInteger(20,99)},
		{Name = "Passing", Val = rand:NextInteger(20,99), Lim = rand:NextInteger(20,99)},
		{Name = "Physical", Val = rand:NextInteger(20,99), Lim = rand:NextInteger(20,99)},
		{Name = "Defending", Val = rand:NextInteger(20,99), Lim = rand:NextInteger(20,99)},
	}
	
	new:update()
	task.wait(1)
end

Result of above code:

Documentation (kind of)

local radarCharts = require(game:GetService("ReplicatedStorage").RadarCharts)
local new = radarCharts.new(<Name>, <CFrame>, <Parent>) -- new radar chart

new.mySettings = {
    Name: string, -- name of the chart, also displayed on top
	TweenInfo = TweenInfo, -- tweening information for the lines on stat updates
	Scale = number, -- scale the chart
	TitleFont = font, -- font of the chart's title
	StatTextFont = font, -- font of the text that displays the stats' names
	StatValueFont = font, -- font of the text that displays the stats' values
	StatValueTextColor = Color3, -- color of the text that displays the stats' values
	RadarLineColor = ColorSequence -- color of the radar stat lines
}

new.stats = {
	{Name = "Stat 1", Val = <current stat>, Lim = <min/max>, Multi <number>}, -- the latter multi is 
--optional and will display text below the current stat text with "x" in front
--for example if you're displaying a shotgun's damage, you'd display the damage per pellet
--and then add "x12"
	{Name = "Stat 2", Val = ..., Lim = ...},
	{Name = "Stat 3", Val = ..., Lim = ...},
	{Name = "Stat 4", Val = ..., Lim = ...},
	{Name = "Stat 5", Val = ..., Lim = ...},
}
-- "Val" can be greater than "Lim" to display stats' greatness in reverse;
-- for example, the higher a gun's damage the better, but the higher the recoil, the worse

new:update() -- update stats and settings after applying them

:warning: Limitations

  • ViewportFrames seem to not support Beams and BillboardGui’s, so if you want to pair this with your interface you’ll have to position the radar chart model in front of the client’s camera.
  • If you want more or less than 5 statistics on the chart, you’ll have to manually edit the code and all the attachments. I apologize in advance for the messy object names.
  • There is some hard-coding in terms of how attachments’ positions are handled to suit my usage in the past, feel free to adjust things to your likings if needed.

Get the module here

Credit is optional.

Thanks for reading and let me know of any issues.

5 Likes

I recommend using instead of Beams and 3D effects just a simple Path2D instance

1 Like