HowTo: Using SD SparkLine Control for Smart Devices

Deprecated since: GeneXus X Evolution 3 U3

This article is a quick tutorial to learn how to use this control. It is often used to show high densitiy series of values.

Follow this steps through the example to undestand how this control works.

1. Create a Transaction object where you can save the data you want to show in your Spark Line Graph. In this case we created the following Transaction:

SDSParkTRN

Also we filled the Transactions with different values (30 registers aprox.; you can fill it with the amount you want, this is just an example).

The next Procedure object was used to load the values.

New
    SparkLineTrnValue = 10.2
EndNew
New
    SparkLineTrnValue = 13.8
EndNew
New
    SparkLineTrnValue = 18.4
EndNew
New
    SparkLineTrnValue = 15.9
EndNew
New
    SparkLineTrnValue = 10.2
EndNew
New
    SparkLineTrnValue = 13.8
EndNew
New
    SparkLineTrnValue = 18.4
EndNew
New
    SparkLineTrnValue = 15.9
EndNew
New
    SparkLineTrnValue = 10.2
EndNew
New
    SparkLineTrnValue = 13.8
EndNew
New
    SparkLineTrnValue = 18.4
EndNew

Now that we have the information we need, we will show this info in a Spark Line Graph.

The SD SParkLine control consumes the information from an Structured Data Type (SDT).

2. Create an SDT with the following structure:

SDSparkSDT

Or import the definition of this SDT (Xml)  from the directory of your GX instalation: "C:\GxwCardal\UserControls\SDSparkLine\SDSparkLine.xml".

3. Define a procedure or data provider to load the SDT with the information of step 1.

For this example a Data Provider object with the following code will work.

SDSparkDP

4. Create a new object  Work With for Smart Devices object (WWSD) where you want the graph to be shown. On the List node create a variable based on the SparkLineValues SDT.

sdSparkVar1

Drag and Drop this varaible to the layout: 

sdsparkvar2

Set the following properties of the Grid control:

SD Spark Line Properties

Properties

Auto Grow If this property is true then the field will adjust the length of the attribute.
Label Text The text that will be shown as the label of the graph.
ShowCurrentValue A flag that indicates if the last value of the series will be shown. (The last value would be the current value).
CurrentColorValue The background color, border color, border width are taken from the theme definition.

 

The final thing we need to do is to define an Start event in our Events tab of the WWSD. In that event we have to load our variable with the Data Provider object we have just defined.

sdsparkevent

Done! You'll now have a cool way to show series of numbers in a Smart Devices applicaction:

sdsparkipad

Considerations

Sparkline control will draw the first numeric value found in the Grid for Smart Devices.

Availability

For BlackBerry not yet implemented.

Videos

Start Video Work With for Smart Devices – General Aspects and List layout
Start Video WorkWith for Smart Devices – Detail Layout