Question

I wonder if there exist any library (jquery or css + php) to show the chart of the user space left.

Something like:

You are using already 35% out of 100% of slots.

And it should be done with a chart, but I don’t know if there exist such library for system like this.

Answer 1

Either it is me missing something in your question or you can use any charting library you want, e.g.

• pChart
• Google Chart Tools
• flot
• …

---

So you’re basically looking for a progressbar. You can achieve this quite easily using HTML and CSS, no need for a charting library, i.e.

<span class="progressbar"><span style="width: 140px;">70%</span>30%</span>

The outer <span /> will be 200px, so set the width of the inner span dynamicall (using php or JS) to percentage * 200px. (You can use whatever value you feel like instead of 200px.)

.progressbar, .progressbar span {
    display: inline-block;
}
.progressbar {
    background-color: #c60000;
    width: 200px;
}
.progressbar span {
    background-color: #00c600; 
}

Tada, now fiddle a bit with the CSS and you’ll have what you’ve painted.