Display statistics on an HTML page using PiHole API

[Hyper]

Hello.

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:

<label>Stats:</label>
<span id="var"></span>

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

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

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

[chrislph]

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.

[rdwebdesign]

You can access the API using the URL:

http://pi.hole/admin/api.php?summaryRaw&auth=<API_TOKEN>

or

http://<PIHOLE_IP>/admin/api.php?summaryRaw&auth=<API_TOKEN>

You can replace summaryRaw to get different information.

---

Note:

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

[Hyper]

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

[rdwebdesign]

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

[Hyper]

Thanks!

It works!

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

[rdwebdesign]

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.

[Hyper]

@rdwebdesign

http://pi.hole/admin/api.php?summaryRaw&auth=

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

[Hyper]

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

[rdwebdesign]

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.

[Hyper]

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?