Live data format

You can display live data in your Sprites infographics by using live data feeds. This is achieved by connecting selected infographic elements (such as charts, tables, images, etc.) to third-party data sources. The data then will be automatically loaded every time somebody views your infographic.

Connecting your Sprites elements to live data feeds makes it possible to display various real-time data such as competition results, voting results, live feeds from the various events and so on. This, in turn, will make your infographics much more engaging and up-to-date with latest information.

Supported elements

Out of the current twelve Sprites elements (or building blocks) ten support connecting live data. Here they are:

• Text
• Fact
• Image
• Figure
• Map
• Chart
• Table
• Bars
• Callout
• Events

The only two elements that don't support live data feeds are Line and Widget.

Data format overview

Every Sprites element works with its own data format. For example, Fact element, among other things, accepts (or "understands") three properties: quantity, measure and description that can be set by using the respective form fields when you're composing your infographic inside the editor.

When using live data feeds, Sprites expects the data in a same format to be returned from the feed. For example, when you connect your Fact element to Google Sheets, you will need to define three columns in your spreadsheet: "quantity", "measure" and "description". This way Sprites can easily pick up cell values for each of the columns and display them to the user.

Currently, we support connecting elements to Google Sheets as well as to a custom URL (which must return a valid JSON objects).

Example data

We've put together a set of spreadsheets, one for each element, to illustrate how your live feed should look like. The spreadsheets are available here: Sprites - Live data feeds. If you'd like to test elements yourself, feel free to use the links to the respective sample spreadsheets in your infographics (open the spreadsheet in your browser, copy the URL from the browser address bar and use that URL when configuring your element).

In the following sections we are going to cover live data format for each of the elements mentioned above.

Text

Below is the data format which is recognized (and expected) by the Text element:

Property (column) name	Data type	Required?	Example value
text	text	Yes	Hello, world!

The Text element doesn't support multi-row spreadsheets - only the first row will be processed.

Live data feed example: Sprites - Live data feeds - Text

Fact

Below is the data format which is recognized (and expected) by the Fact element:

Property (column) name	Data type	Required?	Example value
quantity	text	No	7
measure	text	No	hours
description	text	No	is an average sleep duration

The Fact element doesn't support multi-row spreadsheets - only the first row will be processed.

Live data feed example: Sprites - Live data feeds - Fact

Image

Below is the data format which is recognized (and expected) by the Image element:

Property (column) name	Data type	Required?	Example value
url	text	Yes	spritesapp.com/Assets/img/sprites-128x128.jpg
width	width scale (see below)	No	2

The Image element doesn't support multi-row spreadsheets - only the first row will be processed.

Column width may take the following values:

• "1" - 10% width.
• "2" - 25% width.
• "3" - 35% width.
• "4" - 50% width.
• "0" - Auto.

Live data feed example: Sprites - Live data feeds - Image

Figure

Below is the data format which is recognized (and expected) by the Figure element:

Property (column) name	Data type	Required?	Example value
icon	text	No	cloud-download
size	set size (see below)	No	20
highlight	number	No	12
highlightColor	accent color (see below)	No	2

The Figure element doesn't support multi-row spreadsheets - only the first row will be processed.

For complete list of all available icon codes, visit Font Awesome Icons (3.2.1) (use them without the "icon-" prefix).

Column size may take the following values:

• "5" - Five elements.
• "10" - Ten elements.
• "20" - Twenty elements.
• "30" - Thirty elements.
• "40" - Forty elements.

Column highlightColor may take the following values:

• "0" - Accent color 1.
• "1" - Accent color 2.
• "2" - Accent color 3.
• "3" - Accent color 4.

Live data feed example: Sprites - Live data feeds - Figure

Map

Below is the data format which is recognized (and expected) by the Map element:

Property (column) name	Data type	Required?	Example value
areaName	text	No	Canada
areaCode	text	Yes	CA
density	area density (see below)	No	2
baseColor	accent color (see below)	No	2
tooltip	text	No	The land of Canada

Column density may take the following values:

• "0" - No density.
• "1" - Low density.
• "2" - Medium density.
• "3" - High density.
• "4" - Highest density.

Column baseColor may take the following values:

• "0" - Accent color 1.
• "1" - Accent color 2.
• "2" - Accent color 3.
• "3" - Accent color 4.

Live data feed example: Sprites - Live data feeds - Map

Chart

Chart element supports any tabular data.

Live data feed example: Sprites - Live data feeds - Chart

Table

Table element supports any tabular data.

Live data feed example: Sprites - Live data feeds - Table

Bars

Below is the data format which is recognized (and expected) by the Bars element:

Property (column) name	Data type	Required?	Example value
description	text	No	Homework completion
percentage	number (from 0 to 100)	Yes	85
color	accent color (see below)	No	2

Column color may take the following values:

• "0" - Accent color 1.
• "1" - Accent color 2.
• "2" - Accent color 3.
• "3" - Accent color 4.

Live data feed example: Sprites - Live data feeds - Bars

Callout

Below is the data format which is recognized (and expected) by the Callout element:

Property (column) name	Data type	Required?	Example value
text	text	Yes	Hello, world!

The Callout element doesn't support multi-row spreadsheets - only the first row will be processed.

Live data feed example: Sprites - Live data feeds - Callout

Events

Below is the data format which is recognized (and expected) by the Events element:

Property (column) name	Data type	Required?	Example value
label	text	Yes	2014
size	number (from 0 to 100)	Yes	75
description	text	No	Working on Sprites
style	bar style (see below)	No	2

Column style may take the following values:

• "0" - Active.
• "1" - Dimmed.

Live data feed example: Sprites - Live data feeds - Events

See also

• Embedding infographics
• Adding rich content using widgets
• Your feedback