Demo Channel: Response time chart

Our 'Response time chart' demo channel sends toasts with content made up of two toast elements combined into one: a chart and a URL. We break down the different elements below.

Note: the alert at the top is not part of the toast content - it is the toast alert. The toast alert is the push notification message that subscribers receive. This is automatically added as a headline at the top of the toast.

Demo channel 3

The chart

Charts are shown with the type set to 'chart'. You must include chartType set to one of five supported chart types: 'line', 'bar', 'horizontalbar', 'pie' or 'scatter' chart types. The dataset is also required and contains the chart data provided as an array of [x, y] data values for the chart. There are seven optional fields you can set to customise the chart:

  • title provides a chart title.
  • xAxis sets the x-axis title.
  • yAxis sets the y-axis title.
  • xAxisType sets the x-axis type to use unix timestamps in seconds as the x-axis type. Set to one of 'sec', 'min', 'hour', 'day' or 'month' to use unix timestamps with values formatted to match the timeframe on the x-axis. By default the x-axis shows the numeric values provided.
  • markerSize sets the size of the chart markers in pixels - provided as an integer value. Defaults to 3px.
  • height sets the height of the chart in pixels - provided as an integer. Defaults to 300px.
  • legend sets whether to show a chart legend. Defaults to false.

For the demo channel we set the xAxisType, xAxis, yAxis, markerSize and dataLabels optional values.

For the dataset, we're providing a unix timestamp in seconds as the x value and the response time as the y value. We've included the first 10 chart data points below for simplicity. The actual chart is made up of 288 data points representing a response time reading every 5 minutes over 24 hours.

                  
  {
    type: "chart",
    chartType: "line",
    xAxisType: "hour",
    xAxis: "Hour",
    yAxis: "Response time, ms",
    markerSize: 0,
    dataLabels: false, 
    dataset: [
      [1606403040,149], [1606403340,122], [1606403640,161], [1606403940,177], [1606404240,158], [1606404540,171], [1606404840,90], [1606405140,288], [1606405440,140], [1606405740,129]
    ]
  }

The URL

URLs are shown with the type set to 'url'. You must set the url field to the URL link. There is an optional title field you can set to show a text string above the url.

                  
{ type: "url", title: "API Documentation", url: "https://www.toastworx.com/api" }

Bringing it all together

All of the elements of the toast are combined into an array and this is set as the toast content. 

                  
const content = [
  { type: "chart", chartType: "line", xAxisType: "hour", xAxis: "Hour", yAxis: "Response time, ms", markerSize: 0, dataLabels: false, dataset: [
      [1606403040,149], [1606403340,122], [1606403640,161], [1606403940,177], [1606404240,158], [1606404540,171], [1606404840,90], [1606405140,288], [1606405440,140], [1606405740,129]] },
  { type: "url", title: "API Documentation", url: "https://www.toastworx.com/api" }
];

A full toast also includes the toast alert which is the push notification message that subscribers see as well as an optional sound set to one of the sounds ('bell 1', 'bell 2', 'buzz', 'claps', 'glitch', 'klaxon', 'oops', 'register', 'toaster 1', 'toaster 2' or 'yippee'). The complete toast for the response time chart demo channel is below. POST to /channels/{channelUUID}/toasts with this as the POST body: 

                  
//POST body
{
  alert: "Response times last 24 hours",
  sound: "bell 1",
  content: [
    { type: "chart", chartType: "line", xAxisType: "hour", xAxis: "Hour", yAxis: "Response time, ms", markerSize: 0, dataLabels: false, dataset: [
      [1606403040,149], [1606403340,122], [1606403640,161], [1606403940,177], [1606404240,158], [1606404540,171], [1606404840,90], [1606405140,288], [1606405440,140], [1606405740,129]] },
    { type: "url", title: "API Documentation", url: "https://www.toastworx.com/api" }
  ]
};

Example Javascript code

Here's an example of how you could create this toast using Javascript. If you want to use this code make sure to change {your-api-key} to your API key and {channelUUID} to one of your channels. 

                  
const body = {
  alert: "Response times last 24 hours",
  sound: "bell 1",
  content: [
    { type: "chart", chartType: "line", xAxisType: "hour", xAxis: "Hour", yAxis: "Response time, ms", markerSize: 0, dataLabels: false, dataset: [
      [1606403040,149], [1606403340,122], [1606403640,161], [1606403940,177], [1606404240,158], [1606404540,171], [1606404840,90], [1606405140,288], [1606405440,140], [1606405740,129]] },
    { type: "url", title: "API Documentation", url: "https://www.toastworx.com/api" }
  ]
};

const headers = {
  'Content-Type': 'application/json',
  'Accept': 'application/json',
  'Authorization': 'Bearer {your-api-key}'
};

fetch('https://api.toastworx.com/channels/{channelUUID}/toasts',
{
  method: 'POST',
  headers: headers,
  body: JSON.stringify(body)
})
.then(function(res) {
    return res.json();
}).then(function(body) {
    console.log(body);
});

Subscribe to this channel

To subscribe to this channel scan the QR code below in the ToastWorx app.

Demo channel 3