Demo Channel: Example charts
Our 'Example charts' demo channel sends toasts with 7 different types of chart - one for each day of the week. We break down the different examples below.
Basic line chart
The first example is a basic line chart. The type set to 'chart', the chartType is set to 'line' and dataset contains the x, y data.
The dataset is an array of arrays with each part of the array representing the x, y data point. The first data point is [1, 7.06] representing x = 1, y = 7.06.
It's important to note that the x values must be provided in ascending order, otherwise you'll get an error. This is true for all chart types except pie charts.
{
type: "chart",
chartType: "line",
dataset: [[1, 7.06], [2, 6.99], [3, 7.34], [4, 9.49], [5, 10.99], [6, 10.81], [7, 10.5], [8, 9.99], [9, 9.49], [10, 8.92], [11, 8.24], [12, 7.02], [13, 5.73], [14, 4.79], [15, 4.72], [16, 4.85], [17, 5.18], [18, 5.85], [19, 6.48], [20, 6.48], [21, 5.89], [22, 5.04], [23, 4.58], [24, 4.5], [25, 4.67], [26, 4.92], [27, 5.15], [28, 5.25], [29, 5.09], [30, 4.81], [31, 4.38], [32, 3.86], [33, 3.13], [34, 2.39], [35, 1.8], [36, 1.75], [37, 2.14], [38, 2.71], [39, 3.48], [40, 4.23], [41, 4.6], [42, 4.41], [43, 3.99], [44, 3.49], [45, 3.03], [46, 2.48], [47, 2.23], [48, 2.27], [49, 2.49]]
}Line chart with two data series and axis titles
In the second example we've added a second data series and also included chart title and x and y-axis titles. The extra series is provided as an extra value in each data item. The first data point is [1, 7.06, 3.4] representing x = 1, y1 = 7.06, y2 = 3.4.
The axis labels are set in the xAxis and yAxis fields and the chart title in the title field.
{
type: "chart",
chartType: "line",
dataset: [[1, 7.06, 3.4], [2, 6.99, 3.74], [3, 7.34, 4.12], [4, 9.49, 4.32], [5, 10.99, 4.53], [6, 10.81, 4.69], [7, 10.5, 4.91], [8, 9.99, 5.08], [9, 9.49, 5.51], [10, 8.92, 5.99], [11, 8.24, 6.16], [12, 7.02, 6.15], [13, 5.73, 5.95], [14, 4.79, 5.63], [15, 4.72, 5.3], [16, 4.85, 4.64], [17, 5.18, 4.17], [18, 5.85, 4.03], [19, 6.48, 4.23], [20, 6.48, 4.23], [21, 5.89, 4.07], [22, 5.04, 3.85], [23, 4.58, 3.65], [24, 4.5, 3.68], [25, 4.67, 3.68], [26, 4.92, 3.64], [27, 5.15, 3.52], [28, 5.25, 3.47], [29, 5.09, 3.31], [30, 4.81, 3.18], [31, 4.38, 3.05], [32, 3.86, 3.1], [33, 3.13, 3.45], [34, 2.39, 4.17], [35, 1.8, 4.75], [36, 1.75, 5.17], [37, 2.14, 5.23], [38, 2.71, 5.02], [39, 3.48, 4.46], [40, 4.23, 3.92], [41, 4.6, 3.4], [42, 4.41, 3.11], [43, 3.99, 2.89], [44, 3.49, 2.68], [45, 3.03, 2.32], [46, 2.48, 2.06], [47, 2.23, 1.88], [48, 2.27, 1.72], [49, 2.49, 1.45]],
xAxis: "Hours ahead",
yAxis: "Temperature, °C",
title: "Temperature forecast"
}Line chart with timestamps for x-axis data and a chart legend
The third example shows time series data with timestamps for the x-axis data. To show time series data, provide unix timestamps in seconds for the x values and set the xAxisType field to the appropriate time duration. The options are 'sec', 'min', 'hour', 'day' or 'month'. This controls the formatting of the x-axis values.
In this example, the first data point is [1607133600, 7.06, 3.4, 14.76] with 1607133600 representing the unix timestamp for this data point. the xAxisType is set to 'hour' and the x-axis formatting shows hours like '17:20'.
To include a legend, provide the data series labels as the first data item in the chart dataset. In this eample this is set to ["Time", "New York", "London", "Hong Kong"]. The first value is the xAxis title ("Time") and then the three series labels - "New York", "London" and "Hong Kong". Also set the legend flag to true.
{
type: "chart",
chartType: "line",
dataset: [["Time", "New York", "London", "Hong Kong"], [1607133600, 7.06, 3.4, 14.76], [1607137200, 6.99, 3.74, 16.15], [1607140800, 7.34, 4.12, 17.33], [1607144400, 9.49, 4.32, 18.39], [1607148000, 10.99, 4.53, 19.25], [1607151600, 10.81, 4.69, 19.71], [1607155200, 10.5, 4.91, 19.71], [1607158800, 9.99, 5.08, 19.19], [1607162400, 9.49, 5.51, 18.31], [1607166000, 8.92, 5.99, 17.52], [1607169600, 8.24, 6.16, 16.86], [1607173200, 7.02, 6.15, 16.39], [1607176800, 5.73, 5.95, 16.08], [1607180400, 4.79, 5.63, 15.93], [1607184000, 4.72, 5.3, 15.54], [1607187600, 4.85, 4.64, 15.45], [1607191200, 5.18, 4.17, 15.13], [1607194800, 5.85, 4.03, 14.73], [1607198400, 6.48, 4.23, 14.29], [1607202000, 6.48, 4.23, 13.97], [1607205600, 5.89, 4.07, 13.79], [1607209200, 5.04, 3.85, 13.72], [1607212800, 4.58, 3.65, 14.39], [1607216400, 4.5, 3.68, 15.84], [1607220000, 4.67, 3.68, 17.47], [1607223600, 4.92, 3.64, 18.96], [1607227200, 5.15, 3.52, 20.04], [1607230800, 5.25, 3.47, 20.88], [1607234400, 5.09, 3.31, 21.4], [1607238000, 4.81, 3.18, 21.65], [1607241600, 4.38, 3.05, 21.38], [1607245200, 3.86, 3.1, 20.76], [1607248800, 3.13, 3.45, 19.83], [1607252400, 2.39, 4.17, 19.06], [1607256000, 1.8, 4.75, 18.4], [1607259600, 1.75, 5.17, 18.03], [1607263200, 2.14, 5.23, 17.76], [1607266800, 2.71, 5.02, 17.57], [1607270400, 3.48, 4.46, 17.43], [1607274000, 4.23, 3.92, 17.27], [1607277600, 4.6, 3.4, 17.02], [1607281200, 4.41, 3.11, 16.85], [1607284800, 3.99, 2.89, 16.79], [1607288400, 3.49, 2.68, 16.75], [1607292000, 3.03, 2.32, 16.77], [1607295600, 2.48, 2.06, 16.85], [1607299200, 2.23, 1.88, 17.4], [1607302800, 2.27, 1.72, 18.44], [1607306400, 2.49, 1.44, 19.62]],
xAxisType: "hour",
legend: true,
yAxis: "Temperature, °C",
title: "Temperature forecast"
}Line chart without markers and with custom colors
The final line chart example shows marker and color formatting.
Marker size is controlled by the markerSize field measured in pixels. The default is 3 pixels. To hide the markers set this to zero - as shown here.
Customer colors are provide as an array of hexadecimal color values in the colors field. RGB format like standard HTML color codes. No need for a # at the start of the string.
{
type: "chart",
chartType: "line",
dataset: [["Time", "New York", "London", "Hong Kong"], [1607133600, 7.06, 3.4, 14.76], [1607137200, 6.99, 3.74, 16.15], [1607140800, 7.34, 4.12, 17.33], [1607144400, 9.49, 4.32, 18.39], [1607148000, 10.99, 4.53, 19.25], [1607151600, 10.81, 4.69, 19.71], [1607155200, 10.5, 4.91, 19.71], [1607158800, 9.99, 5.08, 19.19], [1607162400, 9.49, 5.51, 18.31], [1607166000, 8.92, 5.99, 17.52], [1607169600, 8.24, 6.16, 16.86], [1607173200, 7.02, 6.15, 16.39], [1607176800, 5.73, 5.95, 16.08], [1607180400, 4.79, 5.63, 15.93], [1607184000, 4.72, 5.3, 15.54], [1607187600, 4.85, 4.64, 15.45], [1607191200, 5.18, 4.17, 15.13], [1607194800, 5.85, 4.03, 14.73], [1607198400, 6.48, 4.23, 14.29], [1607202000, 6.48, 4.23, 13.97], [1607205600, 5.89, 4.07, 13.79], [1607209200, 5.04, 3.85, 13.72], [1607212800, 4.58, 3.65, 14.39], [1607216400, 4.5, 3.68, 15.84], [1607220000, 4.67, 3.68, 17.47], [1607223600, 4.92, 3.64, 18.96], [1607227200, 5.15, 3.52, 20.04], [1607230800, 5.25, 3.47, 20.88], [1607234400, 5.09, 3.31, 21.4], [1607238000, 4.81, 3.18, 21.65], [1607241600, 4.38, 3.05, 21.38], [1607245200, 3.86, 3.1, 20.76], [1607248800, 3.13, 3.45, 19.83], [1607252400, 2.39, 4.17, 19.06], [1607256000, 1.8, 4.75, 18.4], [1607259600, 1.75, 5.17, 18.03], [1607263200, 2.14, 5.23, 17.76], [1607266800, 2.71, 5.02, 17.57], [1607270400, 3.48, 4.46, 17.43], [1607274000, 4.23, 3.92, 17.27], [1607277600, 4.6, 3.4, 17.02], [1607281200, 4.41, 3.11, 16.85], [1607284800, 3.99, 2.89, 16.79], [1607288400, 3.49, 2.68, 16.75], [1607292000, 3.03, 2.32, 16.77], [1607295600, 2.48, 2.06, 16.85], [1607299200, 2.23, 1.88, 17.4], [1607302800, 2.27, 1.72, 18.44], [1607306400, 2.49, 1.44, 19.62]],
xAxisType: "hour",
legend: true,
yAxis: "Temperature, °C",
title: "Temperature forecast",
markerSize: 0,
colors: ["CB4335", "2980B9", "8E44AD"]
}Basic bar chart with data labels and custom colors
The fifth example is a basic bar chart. The chartType is set to 'bar'. We've included data labels on the bars by setting the dataLabels flag to true. We're also setting custom colors for the bars.
{
type: "chart",
chartType: "bar",
dataset: [["City", "New York", "London", "Hong Kong"], [0, 7.06, 0,0], [1,0, 3.4, 0], [2, 0, 0, 14.76]],
legend: true,
yAxis: "Temperature, °C",
title: "Temperature now",
dataLabels: true,
colors: ["CB4335", "2980B9", "8E44AD"]
}Pie chart with custom colors
The next example is a pie chart. The chartType is set to 'pie'. The format of the dataset has the value followed by the label - like [7.06, "New York"] for the first data point. We've provided custom colors for the pie segments.
{
type: "chart",
chartType: "pie",
dataset: [[7.06, "New York"], [3.4, "London"], [14.76, "Hong Kong"]],
colors: ["F7DC6F", "D35400", "73C6B6"]
}Scatter chart
The final example is a scatter chart. The chartType is set to 'scatter'. Like the line chart, the x and y data are provided in arrays so [1.44, 19.62] represents a data point at x = 1.44, y = 19.62. Also like the line chart, please make sure to provide the x values in ascending order.
{
type: "chart",
chartType: "scatter",
dataset: [[1.44, 19.62], [1.72, 18.44], [1.88, 17.4], [2.06, 16.85], [2.32, 16.77], [2.68, 16.75], [2.89, 16.79], [3.05, 21.38], [3.1, 20.76], [3.11, 16.84], [3.18, 21.65], [3.31, 21.4], [3.4, 14.76], [3.4, 17.02], [3.45, 19.83], [3.47, 20.88], [3.52, 20.04], [3.64, 18.96], [3.65, 14.39], [3.68, 15.84], [3.68, 17.47], [3.74, 16.15], [3.85, 13.71], [3.92, 17.27], [4.03, 14.73], [4.07, 13.79], [4.12, 17.33], [4.17, 15.13], [4.17, 19.06], [4.23, 14.29], [4.23, 13.97], [4.32, 18.39], [4.46, 17.43], [4.53, 19.25], [4.64, 15.45], [4.69, 19.71], [4.75, 18.4], [4.91, 19.71], [5.02, 17.57], [5.08, 19.19], [5.17, 18.03], [5.23, 17.76], [5.3, 15.54], [5.51, 18.31], [5.63, 15.93], [5.95, 16.08], [5.99, 17.52], [6.15, 16.39], [6.16, 16.86]],
xAxis: "Temperature in London, °C",
yAxis: "Temperature in Hong Kong, °C"
}Full code example
The chart along with any other elements of the toast are combined into an array and this is set as the toast content.
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').
Here's an example of how you could create a toast containing the first example chart 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: "Chart demo: basic line chart",
sound: "register",
content: [
{
type: "chart",
chartType: "line",
dataset: [[1, 7.06], [2, 6.99], [3, 7.34], [4, 9.49], [5, 10.99], [6, 10.81], [7, 10.5], [8, 9.99], [9, 9.49], [10, 8.92], [11, 8.24], [12, 7.02], [13, 5.73], [14, 4.79], [15, 4.72], [16, 4.85], [17, 5.18], [18, 5.85], [19, 6.48], [20, 6.48], [21, 5.89], [22, 5.04], [23, 4.58], [24, 4.5], [25, 4.67], [26, 4.92], [27, 5.15], [28, 5.25], [29, 5.09], [30, 4.81], [31, 4.38], [32, 3.86], [33, 3.13], [34, 2.39], [35, 1.8], [36, 1.75], [37, 2.14], [38, 2.71], [39, 3.48], [40, 4.23], [41, 4.6], [42, 4.41], [43, 3.99], [44, 3.49], [45, 3.03], [46, 2.48], [47, 2.23], [48, 2.27], [49, 2.49]]
}
]
};
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.
