This demo shows how to connect to an MQTT broker and subscribe to a topic. The data is then displayed in a Highcharts chart and a Dashboards datagrid. The demo also shows how to implement a Custom Connector in Javascript, in his case MQTT. The Custom Connector establishes the connection with the MQTT broker, subscribes to a topic and receives the data. The received data are stored in the connector's data table for use in the chart and datagrid. The connector also supports callbacks for connection status, packet reception and error handling. The connector is a sub-class of the DataConnector and uses the JSON Converter to convert the received data to a format that can be used by the chart and datagrid.
MQTT data is delivered from a Highcharts server. It uses the broker broker.hivemq.com, port 8000 or 8884 (secure) and data is send every five seconds to the topics highcharts/topic1 and highcharts/topic2. The data is random and represents the wind speed in the North Sea and the Baltic Sea. The data is sent in JSON format and has the following structure:
{
"name": "North Sea",
"value": 35.69,
"timestamp": "2024-09-12T08:12:01.028Z"
}