Archive of Geckoboard's legacy Line Chart widget documentation

line-v1.md

Line Chart (V1)

The line chart visualisation is best suited for showing how a metric changes over time. An example use would be a number of visitors per day or sales per month.

You can specify labels for the X and/or Y axis of the chart.

Supported Sizes

• 1 × 1
• 2 × 1
• 2 × 2

Parameters

Item

The item array should only contain numbers. If it contains elements which can't be reliably converted the payload will be rejected. You can send up to 120 points.

Settings

The settings key controls the colour of the chart and the X- and Y-axis labels:

axisx : optional Displays labels on the X axis. If supplied, it must be an array of labels.

axisy : optional Displays labels on the Y axis. If supplied, it must be an array of labels.

color/colour : optional Changes the color of the chart. Must be a valid hex triplet. For example #00ff00 would make the line chart green.

{
  "item" : [
    10, 20, 30, 5, 5, 1, 25, 15
  ],
  "settings" : {
    "axisx" : [
      "02/04",
      "02/05",
      "02/06",
      "02/07",
      "02/08",
      "02/09",
      "02/11",
      "02/10"
    ],
    "axisy" : [],
    "color" : "#ff00aa"
  }
}

<?xml version="1.0" encoding="UTF-8"?>
<root>
  <item>10</item>
  <item>20</item>
  <item>30</item>
  <item>5</item>
  <item>5</item>
  <item>1</item>
  <item>25</item>
  <item>15</item>
  <settings>
    <axisx>2014/02/04</axisx>
    <axisx>2014/02/05</axisx>
    <axisx>2014/02/06</axisx>
    <axisx>2014/02/07</axisx>
    <axisx>2014/02/08</axisx>
    <axisx>2014/02/09</axisx>
    <axisx>2014/02/10</axisx>
    <axisx>2014/02/11</axisx>
    <axisy></axisy>
    <color>#ff00aa</color>
  </settings>
</root>

Simple Example

Here's a simple example of a chart which renders just the trend line.

While there are no axis labels to be displayed, they still need to be included in the payload.

{
  "item" : [
    1, 16, 9, 16, 25, 9, 36, 64
  ],
  "settings" : {
    "axisx" : [],
    "axisy" : []
  }
}

<?xml version="1.0" encoding="UTF-8"?>
<root>
  <item>1</item>
  <item>16</item>
  <item>9</item>
  <item>16</item>
  <item>25</item>
  <item>9</item>
  <item>36</item>
  <item>64</item>
  <settings>
    <axisx></axisx>
    <axisy></axisy>
  </settings>
</root>

Labels Example

When specifying axis labels each label array should only contain strings. Send an empty array if you want to disable labels for a given axis.

{
  "item" : [
    10, 2, 24, 18, 35
  ],
  "settings" : {
    "axisx" : ["May", "Jun", "Jul", "Aug", "Sep"],
    "axisy" : ["Low", "Mid", "High"]
  }
}

<?xml version="1.0" encoding="UTF-8"?>
<root>
  <item>10</item>
  <item>2</item>
  <item>24</item>
  <item>18</item>
  <item>35</item>
  <settings>
    <axisx>May</axisx>
    <axisx>Jun</axisx>
    <axisx>Jul</axisx>
    <axisx>Aug</axisx>
    <axisx>Sep</axisx>
    <axisy>Low</axisy>
    <axisy>Mid</axisy>
    <axisy>High</axisy>
  </settings>
</root>