How to display time-based Machine Statuses using HTML5, CSS and SVG ?

[bhanu_smile]

We need to display machine statuses based on time according to the attached screenshot using HTML5, CSS and SVG ?

I thought of using Stack Bar chart but in the current context, a status can be repeated multiple times in a given timespan.
For ex, In a given timespan, 11PM - 11:30Pm, what are the different statuses a machine is transitioned into ?
Each state is represnted by a color.

Can any one suggest how to generate this chart ?

[Ingolme]

If you want to generate a chart from real data you're going to need a programming language. Browsers have Javascript built in,  but you could also generate it using a sever-side language. 

With HTML, CSS and SVG on their own, all you can do is manually "draw" the shapes using SVG elements or HTML elements styled with CSS.