Using data in HTML to display ChartJS Doughnut chart

Question

I have a method where I am display products and when those products are filtered it shows X (amount that matches the filter) OF X (total number in that category)

I want a corresponding doughnut chart us ChartJS, I need it to use the data points which I currently have set in the html as...

<h4>
<strong>17</strong>
of 17            
</h4>

I was thinking od possibly wrapping these 2 numbers in a div and giving it a dataset but I am unsure how I would correspond this to ChartJS.

You can see this my current progress here above the filters sidebar - http://bootsandlaces.net/products/footballs/

Can anyone help me ?

Answer 1

Well if you have to pull data from the DOM here is the possible solution (not the prettiest one, but it works... ). Give the corresponding HTML elements ids eg amount and total.

var total = document.getElementById("total").innerText;
var amount = document.getElementById("amount").innerText / total * 100;
var left = 100 - amount;

if ( amount && total ) {
 data.datasets[0].data = [amount, left];
}

See this working fiddle

And do some styling...