Display statistics on an HTML page using PiHole API


I would like to display some statistics of my PiHole on an HTML page. I would like to display the whole thing in span's, so "< span >< /span >".

Since I'm a complete HTML noob and have no idea about the PiHole API I wanted to ask if someone can give me an HTML example code. I'm already working with the API of another service, maybe you can build it exactly like that:

<span id="var"></span>

document.addEventListener('DOMContentLoaded', () => {
        const var2 = document.getElementById("var");

        fetch('https://API-LINK/api.php?&format=json').then(response => response.json()).then((data) => {
            var2.innerText = data.stats["var"];

Is that possible? I would be very grateful for ready-made HTML codes :slight_smile:

I posted a guide on taking the Pi-hole Chronometer output (pihole -c) and displaying it inside a web page. That involved extracting the output into a text file, repeating this every minute by cron to keep it updated, and then using Pi-hole's own web server to display it with a refresh tag to read the updated file once a minute.

A bit hacky but it worked. It's not really what you're after but I mention it in case there's anything useful in there you can use in your application.

You can access the API using the URL:




You can replace summaryRaw to get different information.


There is no format=json option for the current API, but the output is already formatted as JSON.

okay thank you!
where can I get my api token?

On the web interface, Settings > API tab > Show API Token button:


It works!

But if I only enter http://pi.hole/api.php?summary I get the same output as with Authheader?

I think it's working because you are already logged in the web interface.

If you are not using a password for the web interface, the auth value is not needed.
The auth is needed if you have a password set and want to see the info without log in.

yes. if i dont login i need the auth header. thank you!

And how can I now display individual values, e.g. domains_being_blocked as <p></p> in an html file?

You already posted an example doing this.

The html has an element <span id="var"></span> and your javascript is populating this element:

        const var2 = document.getElementById("var");


            var2.innerText = data.stats["var"];

You just need to insert more elements and adjust your code.

Okay, then something is wrong with the access to the link. I get a fetch error.

How can I make the API link publicly accessible. Can i make this with Apache Virtual Hosts?