Important: This documentation is about an older version. It's relevant only to the release noted, many of the features and functions have been updated or replaced. Please view the current version.

DocumentationPluginsInfinity data sourceHTML

Visualizing HTML data

In the below example, we are going to retrieve data from this sample html page.

In the Query editor, fill the following query details

1. Select HTML as query type
2. Select Default ( frontend ) as the parser
3. Select URL as the source
4. Select GET as the http method
5. Enter https://github.com/grafana/grafana-infinity-datasource/blob/main/testdata/users.html in the URL field of the query

Once the above initial setup is done, you need to configure the selectors.

1. In the root selector, you need to provide the selector which shall give you array of symmetrical elements. (This can be potentially rows in a table or repeating div elements with symmetrical structure ). In our case, we are entering table:nth-child(1) tbody tr (css selector) as our root selector. Alternatively, you can give tr as selector if your html content have only one table. Also If the table have any unique selectors such as id, use that as the selector instead.
2. From our html structure, we know that each row contain several div elements where each div represent a property of the user. So we need to uniquely identify the div elements corresponding to the user property.
3. Add a column and enter td:nth-child(1) as selector field. Also mark this as Name in the as/alias field. We can leave this as a string
4. Add another column and enter td:nth-child(2) as selector field. Also mark this as Age in the as/alias field. We know that this is a number, so we can change the field type to number.
5. Add another column and enter td:nth-child(3) as selector field. Also mark this as Country in the as/alias field
6. Likewise, add any other columns as per your need.

Example of the above query is given in the play.grafana site for reference.

Limitations

• Only symmetrical data can be queries. (Example: table with colspan or rowspan will break the scrapping)
• Only text element querying is supported. Retrieving other html attributes are not supported
• If you prefer to use backend parser for html query type, be aware that the backend html query parser is experimental and subject to breaking changes. Also, only the html pages compatible to XML syntax, can be used with html backend query type.
• Websites may block you/your IP address, If the scrapping is at high frequency/refresh rate. Be sensible and responsible about setting your refresh limits
• Caching is not implemented. So be aware of the rate limits