McBasic™Get McBasic™ ↗
Build 881
Hands-on tutorial · Media & graphics

Show a compact trend

Plot a small sequence without turning it into a full chart.

1 Form / control designs1 complete BASIC filesGuided sample project

A sparkline communicates direction and shape. It needs surrounding context: what is measured and in what order. Preserve the ordering of samples, and test short or empty sequences before using live data.

Step 1Prepare a safe practice project#

Extract the archive into a new writable folder, separate from your own application. Open Sparkline.mcproj in McBasic™. Keep every declared source, layout, resource and migration file together.

To reconstruct it yourself, create a DesktopApp project and add the files declared below. In the complete project, follow these steps as a guided rebuild: replace each named source file once and Check after all its procedures are present.

Exact project configuration
Sparkline.mcproj
{
  "schemaVersion": 1,
  "projectId": "73c0de3e-4e0a-4ea0-bd71-2d35b0b7d3b0",
  "name": "SparklineSample",
  "kind": "DesktopApp",
  "language": {
    "dialect": "McBasic1",
    "requireExplicit": true,
    "compare": "Binary",
    "defaultArrayBase": 0
  },
  "application": {
    "bundleIdentifier": "com.mcbasic.samples.sparkline",
    "version": "0.1.0",
    "buildNumber": "1",
    "startupFormId": "form-main",
    "shutdownMode": "OnStartupFormClosed"
  },
  "forms": [
    {
      "id": "form-main",
      "typeName": "frmMain",
      "layout": "Forms/frmMain.form.json",
      "code": "Forms/frmMain.bas"
    }
  ],
  "modules": [],
  "classes": [],
  "tests": [],
  "references": [],
  "resources": [],
  "targets": [
    "osx-arm64"
  ],
  "capabilities": []
}

Step 2Build the Form and set its properties#

frmMain

Select the Form first and set its properties. Add containers before their children. These are initial Designer values, not statements to paste into a procedure.

Form propertyValue
Caption"Sparkline — McBasic"
Width560
Height300
MinWidth440
MinHeight240
TypeNameParent
SparklinesparklineSalesForm
LabellblHelpForm
sparklineSales · exact Inspector values
PropertyValue
Left48
Top60
Width450
Height128
Values"12,18,16,25,22,31,28,40"
Minimum0
Maximum50
Caption"Weekly activity"
ShowPointsTrue
TabIndex0
VisibleTrue
EnabledTrue
Anchor edgesLeft, Top, Right
lblHelp · exact Inspector values
PropertyValue
Left48
Top212
Width450
Height40
Caption"Sparkline is a McBasic-owned chart composed from Avalonia primitives."
TabIndex1
VisibleTrue
EnabledTrue
Anchor edgesLeft, Top, Right

Step 3Connect the events explicitly#

frmMain

ObjectEventProcedureParameters
sparklineSalesChangesparklineSales_ChangeChange()
FormLoadForm_Load()

Step 4Enter the complete behavior#

Open the named source file. Enter declarations first, then every procedure. Expand a procedure for its full body, or copy the complete file. Helpers are required: do not stop after entering the first Click handler.

Forms/frmMain.bas

Enter these declarations at file scope, before the procedures.

Forms/frmMain.bas · declarations
Option Explicit
Private Sub Form_Load()

Initialize state before enabling dependent actions. Keep the shared declarations and startup dependencies with this procedure.

Forms/frmMain.bas · Form_Load
Private Sub Form_Load()
    sparklineSales.Minimum = 0
    sparklineSales.Maximum = 50
    sparklineSales.Values = "12,18,16,25,22,31,28,40"
    sparklineSales.Caption = "Weekly activity"
    sparklineSales.ShowPoints = True
    lblHelp.Caption = "Sparkline is a McBasic-owned chart composed from Avalonia primitives."
End Sub
Private Sub sparklineSales_Change()

Read the current value or selection and update its dependent interface. The binding above determines which object calls this handler.

Forms/frmMain.bas · sparklineSales_Change
Private Sub sparklineSales_Change()
    lblHelp.Caption = "Weekly activity updated."
End Sub
Copy the complete Forms/frmMain.bas file

Replace the file once; do not append duplicate procedures.

Forms/frmMain.bas
Option Explicit

Private Sub Form_Load()
    sparklineSales.Minimum = 0
    sparklineSales.Maximum = 50
    sparklineSales.Values = "12,18,16,25,22,31,28,40"
    sparklineSales.Caption = "Weekly activity"
    sparklineSales.ShowPoints = True
    lblHelp.Caption = "Sparkline is a McBasic-owned chart composed from Avalonia primitives."
End Sub

Private Sub sparklineSales_Change()
    lblHelp.Caption = "Weekly activity updated."
End Sub

Step 5Keep resources and storage reproducible#

No external resource or migration files are declared. Any inline migration, seed data or local JSON is present in the code above. Runtime application data and private preferences are not included in the archive.

Step 6Check, run and test the result#

Save all files and run Check. Resolve diagnostics before Run. Developer CLI users can work from the extracted folder:

Developer CLI
mcbasic check Sparkline.mcproj
mcbasic run Sparkline.mcproj

Acceptance checklist

  • Run with the authored series and inspect its trend.
  • Change the sequence and compare the result.
  • Test a short series through the documented Values property.

Step 7Make one change and repeat the tests#

Pair the sparkline with a label describing the most recent measurement.

Save a working Git checkpoint first. Change one behavior, Check again and repeat the acceptance checklist. Compare with the downloaded solution if a regression appears.

Source baseline 20f4bfed6b · Build manifest