JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://www.dreamwire.nl/themes/Mustache/v1.1/Fixed/js/jquery.flot.js"></script>
<script src="http://www.dreamwire.nl/themes/Mustache/v1.1/Fixed/js/jquery.graphtable-0.2.js"></script>
<div class="chart-caption">Statistics 2012</div>
<table class="chart-dates" style="width : 100%;">
<thead>
<tr>
<th></th>
<th style="color : #e10000;">unique visitors</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th><td>10</td>
</tr>
<tr>
<th>2</th><td>40</td>
</tr>
<tr>
<th>3</th><td>70</td>
</tr>
<tr>
<th>4</th><td>100</td>
</tr>
<tr>
<th>5</th><td>130</td>
</tr>
</tbody>
</table>
CSS
html,body {
margin : 0;
padding : 0;
font : 12px/18px Arial;
}
.space {
display : block;
height : 19px;
}
.flot-graph {
display : inline-block;
margin : 5px 0 0;
line-height : normal;
}
.flot-graph .xAxis {
line-height : 7px;
}
.chart-caption {
float : left;
margin : 4px 0 0 21px;
line-height : normal;
font-weight : bold;
}
.legend {
line-height : 12px;
}
.legend table {
border : 0;
width : auto;
}
.legend table td {
border : 0;
padding : 2px 0 0 5px;
line-height : 18px;
white-space : nowrap;
width : auto;
}
#tooltip {
background-color : #1c1c1c;
padding : 0 8px;
color : #FFFFFF;
font-size : 11px;
line-height : 25px;
height: 25px;
}
JavaScript
$("table.chart-dates").each(function() {
var colors = [];
$("table.chart-dates thead th:not(:first)").each(function() {
colors.push($(this).css("color"));
});
$(this).graphTable({
series: 'columns',
position: 'replace',
width: '100%',
height: '200px',
colors: colors
}, {
xaxis: {
mode: "time",
timeformat: "%d"
},
yaxis: {
max: null,
autoscaleMargin: 0.02
}
});
});