Steps to implement TelemetryApp in Windows Store apps using API:

 

1. Create Telemetry account (telemetryapp.com)
There are two types of telemetry accounts
Telemetry Enterprise Edition – It is a premium account offering by telemetry. For more information Enterprise Edition account page.
Telemetry Community Edition – It is a free account which has very limited features to provide a preview of telemetry for new organizations. For more information please see our Community Edition account page.

2. After Successful login in to the telemetryapp.com, initially you will be prompted to add a Board.

Board:
A Board (dashboard) is a collection of widgets linked to metrics organized across a user determined layout. Below is an example screenshot how a board looks after adding widgets.

Agents:

After successful creation of board now we need an agent to communicate with the board.

– Go to Agents tab and select Add agent

– Give a name and click on create

– Copy the Agent token to secure place, you will not be able to see it again.

Widgets:

Boards contain widgets. A widget may be a chart, a number or simply a box to contain other widgets

Adding a widget to the board:

a. Select Add Widget option right above board properties

b. Now select a widget which is suitable for your application.

c. After adding widget the board looks like below

Flows:

Flows are objects that represent the flow of metrics within Telemetry.

Adjusting Board Properties:

Here you can title your Board and adjust the settings, or properties, of your Board.

Widget Properties:

After adding Flows to your Board, you can select a Flow and edit the properties of the selected Flow.

Layers:

• All your widgets on a board can be found as a list of layers under the Layers tab.

Boxes:

• Each widget box can be moved around, resized, and even layered.
• Select a widget you want to adjust, and on hover you can see options to drag out and resize your box or to move it.
• You can even have just one or two very large widgets on a board.

Adding a Logo:

• The best way to personalize and brand your board, is to add a custom logo to your board.
• From our Image widget, upload an image of your logo directly to your board if you have a paid plan with us.
• You can then change the background color of the Image widget so your logo looks its best.

Board Backgrounds:

• Add an image or color background to give your board(s) a custom theme.
• Adjust your widget background color and opacity so your widgets and background are visible.

Widget Background:

• Adjust your widget background color and opacity so your widgets and background are visible.

Board Layout:

• Do you want to create 5 tidy columns on your board but notice you have extra space or one column is smaller or larger than the others? You can adjust the number of rows and columns your widgets snap to under Board Properties.

3. API
a. Accounts:

The account object represents your account. Typically you’ll see this referenced by other objects. This is a read only object.

Account Object

Parameter	Description
Id	A globally unique static string identifying the object.
name	The name of your account.
contact_email	The contact email address.
contact_phone	The contact phone number.
api_soft_limit	API soft limit.
api_hard_limit	API hard limit.
api_use_last_24	API usage of the last 24 hours.
api_limit_use	API usage of the last hour.
user_limit	Users limit.
board_limit	Boards limit.
agent_limit	Agents limit.
viewer_limit	Viewers limit.
api_version	API version.
Plan	The plan of your account.
plan_expires_at	The plan expiry date (if any).

To read Account Details

GET https://api.telemetryapp.com/account

This method will return your current account.

For Account Update

PATCH https://api.telemetryapp.com/account

This method will update your current account.

b. Boards

The boards object represent the boards (dashboards) within your account.

Boards are collections of widgets and their flows contained together for display.

Board Object

Parameter	Description
id	A globally unique static string identifying the object.
name	The name of the board.
theme	The theme for the board.
columns	The number of columns in the board grid.
rows	The number of rows in the board grid.
size	An array representing the native size of the board.
aspect_ratio	A string with the aspect ratio of the board.
display_board_name	Whether to show the board name at the top of the board or not.
channel_tag	The tag for the default channel for the board.
widget_margins	The external margin of a widget, defaults to 3.
widget_padding	The internal padding of a widget, defaults to 8.
font_size	The size of the font to use, can be ‘small’, ‘normal’ or ‘large’.
font_family	The font family to use, defaults to ‘normal’ which uses the theme default.
background_color	The background color of the board.
background_url	The background image URL of the board.
widget_color	The background color of the widgets.
widget_title_color	The color of the widgets’ titles.
widget_title_size	The size of the widgets’ titles.

Boards Listing

GET https://api.telemetryapp.com/boards

This method will return a list of all boards on your account.

Board Details

GET https://api.telemetryapp.com/boards/:id

This method will return a specific board on your account by id.

Export Board

GET https://api.telemetryapp.com/boards/:id/export

This method will return a specific board on your account by id and also its widgets details.

Create a Board

POST https://api.telemetryapp.com/boards

This method will create a new board.

Import a Board

POST https://api.telemetryapp.com/boards/import

This method will create a new board and widgets based on the json input.

Update a Board

PATCH https://api.telemetryapp.com/boards/:id

This method will update a board object.

Delete a Board

DELETE https://api.telemetryapp.com/boards/:id

This method will delete a board object.

c. Widgets

Widgets are mostly hidden from the Telemetry web interface however they’re

Critical elements to position flows within a board.

Widget Object

Parameter	Description
id	A globally unique static string identifying the object.
board_id	A globally unique static string identifying the board that the widget belongs to.
variant	The variant of the widget: barchart, box, bulletchart, clock, compass, countdown, funnelchart, gauge, graph, grid, icon, iframe, image, log, map, multigauge, multivalue, piechart, scatterplot, servers, status, table, text, tickertape, timeline, timeseries, upstatus, value, video, waterfall, weather.
column	The column of the top left of the widget on a board.
row	The row of the top left of the widget on a board.
width	The width of a widget in columns.
height	The height of a widget in rows.
in_board_index	The layer sorting order of the widget within the board.
background	The background color of the widget. Possible values are: “default” => The background will be dark/light depends on the selected theme of the board “none” => Transparent background Hex code (e.g. #09ab3f) => Hex code of a color.
renderer	An optional parameter that specifies a specific renderer to use. Things like changing a line chart from a spline to an area. See the renderer options below.

List all Widgets

GET https://api.telemetryapp.com/widgets

This method will return a list of all widgets on your account.

Display a Widget

GET https://api.telemetryapp.com/widgets/:id

This method will return a specific widget on your account by id. It also return an array of flows for the default channel of the board. There’s an optional channel_id parameter to return the flows for that channel instead of the default.

Create a Widget

POST https://api.telemetryapp.com/widgets

This method will create a new widget.

Update a Widget

PATCH https://api.telemetryapp.com/widgets/:id

This method will update a widget object.

Delete a Widget

DELETE https://api.telemetryapp.com/widgets/:id

This method will delete a widget object.

Renderer Options

Different Widgets support different renderer options. You can select the renderer using the Telemetry Manager when designing a board. When embedding a specific widget however in order to use something other than the default renderer you must specify it in the embed tag.

The following renderer options are supported for the following flow variants:

Variant	Options
compass	gauge, heading
gauge	circle, combined, vertical, horizontal
linechart	line, spline, area, bar, scatter
number	equal, number, label, icon
sparkline	spline, line, bar, area
timeseries	line, spline, area, bar, scatter

4. Implement telemetry in Windows store or Phone app using API

In this article I am using bar chart to explain how to implement in windows store apps. The procedure is same for all widgets.
Bar Chart:

A bar chart is a stack of horizontal bars, each with a label, value and colour. The value determines the length of the bar. The bars will be sorted from top to bottom in terms of length by default. You can choose to turn off sorting. Send data with a hash of bars containing an array with each bar as a hash. Bar charts can display a maximum of 20 bars. There may be less than 20 shown if your widget box is too small. Resize your widget box if all your data is not being displayed.

Parameters

Parameter	Notes	Type	Description
bars	Required	array of objects	The bars
bars[]color	Required	CSS color	The color of the bar.
bars[]label	Required	string	The text to overlay on top of the bar.
bars[]value	Required	number	A number representing the value of the barchart. This will determine the length of the bar.
max		integer	The min possible value of the bar.
min		integer	The max possible value of the bar.
sort		boolean	Whether to sort the bars by value or not. The default is true.

– Adding a Bar Chart into board.
Log in into telemetryapp.com, go to boards and select edit board.

– Now click on add widget, under charts select Bar Chart.

After adding Bar chart into board, select the bar chart on board, now go to widget tab in properties window and expand general tab.

Copy the Flow Tag to a note pad.

Now we have a widget to display the flow data on board.

5. Create a Windows store or Phone app (Phone 8.1 or Windows 8.1) project in visual studio to send flows to bar chart from windows app, in my example I created a Universal Hub App project.

Open HubPage.xaml.cs, under load state method write the following code to send the flow data to recently created Bar Chart.

To use API we need the following information

• URI
• API Token (refer step 2 under Agents)
• Flow Tag (In earlier step we copied flow tag for bar chart)

URI = “https://api.telemetryapp.com/flows/Flow Tag/”;

For Authentication/Authorization we need to pass Agent Token as user name and password as blank in POST method.

Prepare list of bars information:

In this example I am using bar chart 

public class Bar
        {
            public string color { get; set; }
            public string label { get; set; }
            public int value { get; set; }
        }

        public class BarRootObject
        {
            public List<Bar> bars { get; set; }
        }

 

BarRootObject barRootObject = new BarRootObject();
            barRootObject.bars = new List<Bar>();
            var bar = new Bar();
            bar.color = "#66CC00";
            bar.label = "Users";
            bar.value = 4;
            barRootObject.bars.Add(bar);

            bar = new Bar();
            bar.color = "#FF8900";
            bar.label = "Sessions";
            bar.value = 30;
            barRootObject.bars.Add(bar);

            bar = new Bar();
            bar.color = "#FFFF33";
            bar.label = "Crashes";
            bar.value = 26;
            barRootObject.bars.Add(bar);

            bar = new Bar();
            bar.color = "#FF0000";
            bar.label = "Exceptions";
            bar.value = 75;
            barRootObject.bars.Add(bar);

In above code I am passing four bars information which include colour, label and value (If you want to know/pass more properties info please refer Bar charts Flow Object table above).

POST Method:

string URI = "https://api.telemetryapp.com/flows/testtelemetry_piechart_1/&quot;;
            HttpClient httpClient = new HttpClient();
            httpClient.DefaultRequestHeaders.Authorization = CreateBasicHeader("**Replce with Agent Token**", "");
            metrics metric= new metrics();
            metric.values =new int[]{10,70,25,5};
            metric.labels = new string[] { "A", "B", "C", "D" };
            metric.colors = new string[] { "#1F1F33", "#669900", "#7A0000", "#334C4C" };
            string postData = JsonConvert.SerializeObject(metric);
            StringContent c = new StringContent(postData, Encoding.UTF8, "application/json");
            httpClient.MaxResponseContentBufferSize = 100000;
            var result = await httpClient.PostAsync(URI, c);
            var content = await result.Content.ReadAsStringAsync();

 

Method for creating Authentication Header Value:

public static AuthenticationHeaderValue CreateBasicHeader(string username, string password)
        {
            byte[] byteArray = System.Text.Encoding.UTF8.GetBytes(username + ":" + password);
            return new AuthenticationHeaderValue("Basic", Convert.ToBase64String(byteArray));
        }

6. Run the App

Now go to telemetry dashboard and check the bar chart has added four new bars with values.