s-Dashboard features two panels that let you display data on a map, as well as a panel that lets you display multiple datasets of bubbles.
Panel | Benefits |
---|---|
Pan & Zoom panel | Offers more options for both map and marker appearance. |
World Events panel | Greater flexibility in terms of displaying specific states, countries, or regions.Ability to develop a choropleth map. |
3D Bubble Chart | Lets you display two datasets at once in a bubble chart. |
Both panels require that you have latitude and longitude values in your data. The name of the latitude column needs to start with “lat”. The name of the longitude column needs to start with “lon” or “lng”.
You can change preferences for the panel by clicking the Panel Preferences icon in the upper right corner of the panel. Preferences include:
Lat: <%= lat %> Lon: <%= lon %>
<%= speed %> kph, <%= parseInt(speed * 5/8) %> mph
Driver: <%= name %><br/>Speed: <%= speed %> kph (<%= speed_cat %>). <%= highway %><br/>Lat: <%= lat %> Lon: <%= lon %>
<table><tr><td>Driver</td><td><a href="http://sqlstream.com"><%= name %></a></td></tr><tr><td>Speed</td><td><%= speed %> kph <%= speed_cat %></td></tr><tr><td>Highway</td><td><%= highway %></td></tr><tr><td>Lat</td><td><%= lat %></td></tr><tr><td>Lon</td><td><%= lon %></td></tr></table>
In preferences for the Pan and Zoom map, you can select Custom for Marker Icons. When you do, several additional fields appear in the Preferences dialog box.
The most important of these is called Icon URL. Here, you can specify a location for your custom icons, and use variables so that this URL changes depending on the current row.
To do so, you set up a template that is evaluated for each row to create the URL for the custom icon. In other words, you can use columns from a stream, such as columns with lists of colors or numbers, to determine the icon that appears for a particular row. You reference column values using <%= column_name %>. For example, to reference a column called “bearing”, you would write <%= bearing %>. You can use any accessible location for these icons, but if you use your own location, it must begin with http:// or https:// and be served by a web server. A value called <%= builtin_path %> points to a directory with pre-installed custom icons. This location corresponds to <StreamLab installation dir>/StreamLab/static/js/sand/panels/geo_v2/tiled/images Another variable, <%= key_map_color %>, lets you reference the color for the current key map–the one that you set up in the Preferences dialog box. This is the color the map would use if you selected flags instead of custom.
StreamLab ships with a set of built-in icons. These are a set of arrows for showing bearing on the map. We will use these icons to walk you through the process of setting up custom icons.
To use the arrow icons, for example, you will need to write a template that generates a URL that looks like this:
<%= builtin_path %>/arrows/large/blue/45.gif
That would select a large blue arrow pointing northeast.
To begin, make sure that you have
Taking these steps will ensure that you only see custom icons on the map.
In order to create a URL that changes for each row, you need to have columns with meaningful information. If you are using StreamLab, you can use the Categorize Analytic to set these up. For example, you could duplicate a column called Speed, and then use Categorize to create a column with sizes: small, medium, large, extra large. Otherwise, you will need to work with a SQL programmer to make sure these columns are available.
For this demonstration, you will need three columns:
You can use these to create an Icon URL that fully selects the arrow’s size, color, and direction.
<%= builtin_path %>/arrows/<%= size %>/<%= color %>/<%= bearing %>.gif
<StreamLab-installation-dir>/StreamLab/static/js/sand/panels/geo_v2/tiled/images/arrows/small/violet/145.gif
The rest of the settings for custom icons select the image size and anchor point. For the arrows, the width and height are 100 and the anchor point is in the center, x = 50 and y = 50.
We recommend providing the true (unscaled) size of the image files and the center as the anchor.
If you are using custom icons, you need to be able to serve them, preferably without interfering with the StreamLab / s-Dashboard installation.
There are several approaches to serving custom icons. You could serve them from the same server that StreamLab / s-Dashboard is running on, or from somewhere else.
apt-get install -y lighttpd
) taking around 1MB.
http://localhost:/i/\<your-image-file>.png
(or .ico or .jpg)https://github.com/OwnerName/icons/blob/master/fast.png
https://github.com/OwnerName/icons/blob/master/fast.png?raw=true
https://raw.githubusercontent.com/OwnerName/icons/master/fast.png
https://raw.githubusercontent.com/OwnerName/icons/master/<%= speed_cat %>.png
In all cases using a remote server or cloud service, make sure that the icon server can be seen by the StreamLab or s-Dashboard client, both when you are developing the dashboard and then later when you deploy it into ptoduction.
This panel features data marked on a world, regional, country, or US state map. These maps appear as blocks of color, but you can change the color scheme. The World Events map below displays Australia only, with data events occurring near Sydney.
For the World Events panel, you can use Panel preferences to change the color scheme, and, more importantly, to choose the specific country, US state, or region that you want to display. Areas can be colored according to a value (choropleth map) by providing a key column containing text that matches the IDs used by the map, and a corresponding value column.
Key values should list ids for the map. When a row is sent to the map, it looks at the key. If it matches an id on the map, the value (0..100) is used to select the color for that area.
You can choose which map to display from the Panel Preferences. The options are:
Group | Map | Description |
---|---|---|
Regions | World | Contains all countries, using the ISO-3166 3 character code |
USA 50 States | All US states + DC and Puerto Rico; see state IDs | |
USA 48 States | Only the continental 48 states plus DC; excludes AK/Alaska, HI/Hawaii and PR/Puerto Rico | |
USA, Canada, and Mexico | USA is divided by state - see state IDs - plus ‘CAN’ for Canada and ‘MEX’ for Mexico | |
Africa | All countries in the continent of Africa | |
Asia | All countries in Asia | |
Eurasia | All countries in Eurasia | |
Europe | All countries in Europe | |
North America | USA, Canada, Mexico and the Carribean | |
Oceania | All countries around Australasia and the Pacific | |
South America | All countries in the South American continent | |
Western Europe | All Western European countries | |
US States | Alabama to Wyoming | One state map divided by county for each of the 50 states + DC and Puerto Rico. Use the county name as the key column - so for Cook County, IL use ‘Cook’ as the key. See County Names by US state |
Countries | Afghanistan to Zimbabwe, grouped as A-C, D-H, I-L, M-P, Q-S, T-Z | Each map represents a single country without subdivision. Use the 3 letter ISO-3166 country code as key |
s-Dashboard has a simple messaging system, known as the blackboard, for panels to communicate with each other implemented as a blackboard containing JSON messages. You can use the Blackboard to change the output for a panel by modifying that panel’s query template. Both geographical stream panels let you send click information to Blackboard. For Pan & Zoom, you can send event clicks only; for World Events, you can send events and region clicks.
See Using the Inter Panel Blackboard for more details.
The 3D Bubble Chart draws overlapping bubbles in multiple sets. It requires three columns formatted as follows: _x, _y, and _z, as well as ROWTIME.
A simple example would be the following:
The z values determine the radius of a bubble drawn at (x,y). Each set of three columns with the same prefix becomes a separate dataset. So in the above examples, a set of bubbles will be drawn for n and for m.
You need to format the names of these columns before you open this chart in s-Dashboard or StreamLab.