Line Graph Widget

The line graph widget provides the ability to display data quickly and easily. When the Line Graph is first dragged out from the tools palette onto your stack, you will see it is pre-initialised with a few series of data so you already have something that looks like a chart.

Default line graph

Creating a Line Graph

A line graph widget can be created by dragging it out from the Tools Palette, where it appears with the following icon:

Alternatively it can be created in script using:

create widget as "com.livecode.widget.linegraph"

Properties

Unarguably the most important property you will need to know about as you start using the line graph is the graphData. The graphData is comma and line delimited with the first item of each line being a point on the x-axis and each subsequent item on a line being a point on the y-axis of a data series.

For example:

local tData
put "Jan,6,22" & return & \
    "Feb,6,22" & return & \
    "Mar,8,20" & return & \
    "Apr,11,17" & return & \
    "May,14,15" & return & \
    "Jun,17,12" & return & \
    "Jul,11,18" & return & \
    "Aug,18,13" & return & \
    "Sep,16,15" & return & \
    "Oct,12,16" & return & \
    "Nov,9,18" & return & \
    "Dec,7,20" into tData

set the graphData of widget "Line Graph" to tData

Line graph with data

The graphXLines and graphYLines properties control whether the graph displays the horizontal and vertical lines respectively. The markerStyles property controls the shapes of the data markers. This can be set to empty to remove the markers entirely. For example, to remove all extraneous parts of the graph other than the data line, use the following:

set the graphXLines of widget "Line Graph" to false
set the graphYLines of widget "Line Graph" to false
set the markerStyles of widget "Line Graph" to empty

Line graph with no grid or markers

A marker style may be empty, "circle", "diamond", "square", "filled circle", "filled diamond" or "filled square". The showLines property governs the line visibility so that you can just show markers:

local tMarkers
put "filled circle" & return & "filled diamond" into tMarkers
set the markerStyles of widget "Line Graph" to tMarkers
set the showLines of widget "Line Graph" to false

Line graph with no grid or markers

We can set the line/marker colors with the graphColors property. This is a return-delimited list of colors in RGB(A) format. For example:

local tLineColors
put "255,0,0,128" & return & "0,255,0,128" into tLineColors
set the graphColors of widget "Line Graph" to tLineColors

The final property of the Line Graph is the hilitedCoordinates property. You can set the hilitedCoordinates to a point on any of the lines on the chart. For example:

local tHilitedDataPoint
put "Jul,18" into tHilitedDataPoint
set the hilitedCoordinates of widget "Line Graph" to tHilitedDataPoint

Line graph with hilited coordinates