Small Basic – Chart Extension


I added a chart object to the LitDev extension, LDChart.

So far it just has a pie and doughnut variant.  The C# extension source code is also available for download if you want to see how it is done or even modify to create your own.

Sample Code

GraphicsWindow.Width = 800
GraphicsWindow.Height = 400
GraphicsWindow.Title = "Click a segment"
 
data = ""
For i = 1 To 12
  data["My Test Data "+i] = Math.GetRandomNumber(10)
EndFor
 
GraphicsWindow.BackgroundColor = "Black"
GraphicsWindow.FontName = "Segoe UI"
GraphicsWindow.FontBold = "False"
GraphicsWindow.PenColor = "White"
chart1 = LDChart.AddChart(400,400)
LDChart.Properties(chart1,"doughnut",1)
LDChart.Legend(chart1,1,"legend_percent","false")
LDChart.ColourMap(chart1,0,0.3,0.6,"hue",0,1,"LightBlue")
LDChart.SetData(chart1,data)
 
GraphicsWindow.BackgroundColor = LDColours.WhiteSmoke
GraphicsWindow.FontName = "Segoe UI"
GraphicsWindow.FontBold = "False"
GraphicsWindow.PenColor = "Red"
chart2 = LDChart.AddChart(400,400)
Shapes.Move(chart2,400,0)
LDChart.Properties(chart2,"pie",1.1)
LDChart.Legend(chart2,1.5,"percent","false")
LDChart.ColourMap(chart2,0,0,0.6,"lightness",0.8,0.2,"")
LDChart.SetData(chart2,data)
 
LDChart.ValueClicked = OnValueClicked
Sub OnValueClicked
  LDChart.Highlight(LDChart.LastChart,LDChart.LastLabel,0.1)
EndSub
LDShapes.SetShapeEvent(chart1)
LDShapes.SetShapeEvent(chart2)
LDShapes.ShapeEvent = OnShapeEvent
Sub OnShapeEvent
  If (LDShapes.LastEventType = "MouseLeave") Then
    LDChart.Update(LDShapes.LastEventShape)
  EndIf
EndSub

Here is a screen shot of the sample that comes with the extension download (other-samples/LDChart,sb).

The LDChart object includes lots of customisation and colour control (using HSL colour tables) and an event to detect a segment clicked as well as highlighting segments like the 10.1% segment on the right hand chart.

Here is the API

AddChart(width,height)
Create a chart control.
The current GraphicsWindow.BackgroundColor will be used for the background.
The current GraphicsWindow.PenColor and Font properties will be used for the label text.
For Example:
GraphicsWindow.FontName = “Segoe UI”
GraphicsWindow.FontBold = “False”
width The width of the chart.
height The height of the chart.
returns The chart shape name.

ColourMap(chartName,hue,saturation,lightness,hsl,start,end,centralColour)
Set colour mapping for the chart.
chartName The chart name.
hue A hue (colour 0 to 360), default 0 (red).
saturation A saturation (intensity 0 to 1), default 0.5.
lightness A lightness (brightness 0 to 1), default 0.5.
hsl The parameter to change for different segments, options are:
“Hue” (default) rainbow colours
“Saturation” increasing intensity of colour
“Lightness” increasing brightness
start Starting value for colour variation in the range [0 to 1], default 0.
end Ending value for colour variation in the range [0 to 1], default 1.
centralColour An optional circular gradient color centered on chart, default “”.

DoughnutFraction
Radius fraction removed for doughnut chart, default 0.7.

Highlight(chartName,label,fraction)
Highlight a chart value (move segment out).
chartName The chart name.
label The segment label.
fraction A fraction of the radius to move segment out (0 to return it).

LastChart
The last clicked chart.

LastLabel
The last clicked chart segment label.

Legend(chartName,scale,legend,background)
Set legend properties.
chartName The chart name.
scale A scale factor for the legend and text labels, default 1
legend A legend style, options are:
“None” no legend
“Legend” separate legend
“Overlay” names overlaying chart
“Percent” percentages overlaying chart
“Legend_Percent” (default) separate legend and percentages overlaying chart”
background The legend label text background is coloured, “True” or “False” (default).

Properties(chartName,style,scale)
Set chart properties.
chartName The chart name.
style A style for the chart, options are:
“Pie” (default)
“Doughnut”
scale A scale factor for the chart, default 1.

SetData(chartName,data)
Set data for a chart.
chartName The chart name.
data The data to set, which is a 1D array, indices are item names.
Example:
data[“Fred”] = 25
data[“Mary”] = 15
data[“John”] = 40

Update(chartName)
Redraw (update) a chart.
This restoring any highlighted segments or applies any modified chart properties.
chartName The chart name.

ValueClicked
Event when a chart segment is clicked.

Comments (2)

  1. Wow, what a great extension! Thanks, LitDev!

  2. litdev says:

    Thanks, I also extended to add some other chart types like bubble, bar, column – and fixed bad link in blog.

Skip to main content