LiveCode Widgets: The Line Chart

There’s nothing quite like a good chart for presenting data in a way that is easy for people to quickly understand. A few of us around the office even get strangely excited by chart bling so it’s no surprise that the Line Chart was high on the agenda for LiveCode 8. For someone like me that has spent many hours implementing charts in LiveCode over the years having a chart right there in the tool palette to drag onto my stack is just lovely. Today I will introduce the functionality of the widget (as it is in LiveCode 8.1 RC1) and over the next couple of posts I’ll be detailing what I needed to do to add some features. There’s also a few more features worked through at the end of the Widgets One course for those of you taking that.

When you first drag the Line Chart 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. All of the properties of the Line Chart are available via the inspector as seen in the image below but I will discuss how to interact with them in code as many of you will want to when using it in your application.

Unarguably the most important property you will need to know about as you start using the Line Chart 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, using maximum temperature averages (°C) for Edinburgh, Scotland and Geeveston, Tasmania will allow you to easily see why I’m happy I’m allowed to work from home:

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

Actually Kevin I’m available to come over any time between mid-May and the end of August 😉

At the moment our chart looks a little busy so it would be nice to clean it up a bit with 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

What we are doing here is removing the grid behind the chart and removing the markers from the lines as seen in the following image:

While we are discussing the markerStyles property I’ll just point out that the next post in this series will cover what I needed to do to implement the markerStyles and the showLines properties. These properties are both new in LiveCode 8.1. For now I’ll just explain what you can use these properties for. A marker style may be empty, circle, diamond, square, filled circle, filled diamond or filled square. The showLines 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

Now we end up with a chart like this:

It doesn’t work very well for this data but it’s certainly helpful for some use cases if you want a scatterplot type chart.

We can set the line/marker colors with the graphColors property. For example:

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

I won’t add the image because it’s not pretty 😉

The other cool feature that the Line Chart currently has is a hilitedCoordinates property. You can set the hilitedCoordinates to a point on any of the lines on the chart. For example:

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

I’d love to hear how you plan to use the Line Chart so let me know in your comments!