var table = document.querySelector('#datatable'), graphs = document.querySelector('#graphs'); weights = table.querySelectorAll('#datatable thead th'), rows = table.querySelectorAll('tbody tr'), cells = null, bars = null, fields = null, oldbutton = null, osname = '', dataset = {}, out = '', outputs = {}; i = rows.length; while(i--){ cells = rows[i].querySelectorAll('td'); osname = rows[i].querySelector('th') j = cells.length; dataset[osname.innerHTML] = {}; while(j--){ dataset[osname.innerHTML][weights[j+1].innerHTML] = +cells[j].innerHTML; } } out = '<nav><ul>'; for(i = 1; i < weights.length; i++) { out += '<li><button>' + weights[i].innerHTML + '</button></li>'; } out += '</ul></nav>'; graphs.innerHTML += out; out = '<ul class="resultbars">'; for(i in dataset) { out += '<li><span class="os">' + i + '</span> '+ '<div class="progress"><span></span></div>'+ ' <span class="value">0</span></li>'; } out += '</ul></nav>'; graphs.innerHTML += out; bars = document.querySelectorAll('.resultbars .progress span'); fields = document.querySelectorAll('.resultbars .value'); document.querySelector('#graphs nav').addEventListener('click', function(ev){ if (ev.target.tagName === 'BUTTON') { if(oldbutton) {oldbutton.className = ''} ev.target.className = 'current'; oldbutton = ev.target; var elm = ev.target.innerHTML; out = 0; for(i in dataset) { fields[out].innerHTML = dataset[i][elm]; bars[out].style.width = dataset[i][elm]/2.5 + 'px'; out++; } } }, false); document.querySelector('#graphs button').click();
<h1>What platforms are you targeting with your apps? <span>Answers from 590 developers</span></h1> <div id="graphs"></div> <table summary="" id="datatable"> <thead> <tr> <th>Platform</th> <th>Focus</th> <th>Must have</th> <th>Supported</th> <th>Sometimes</th> <th>Not at all</th> </tr> </thead> <tbody> <tr> <th>Web</th><td>370</td><td>153</td><td>33</td><td>23</td><td>11</td> </tr> <tr> <th>iOS</th><td>261</td><td>207</td><td>53</td><td>28</td><td>41</td> </tr> <tr> <th>Android</th><td>182</td><td>221</td><td>102</td><td>47</td><td>38</td> </tr> <tr> <th>Windows</th><td>10</td><td>46</td><td>131</td><td>173</td><td>230</td> </tr> <tr> <th>Blackberry</th><td>8</td><td>15</td><td>100</td><td>164</td><td>303</td> </tr> </tbody> </table>
*{margin:0;padding:0} nav,output { display:block; } h1 { text-transform: uppercase; } h1 span { display: block; color: #999; font-size: 12px; } nav {float:left;padding-right:20px} body{padding: 0;font-family: "Open Sans",arial,sans-serif} button.current { background: #6cf; background:-webkit-linear-gradient(#369, #6cf); background:-moz-linear-gradient(#369, #6cf); background:-ms-linear-gradient(#369, #6cf); background:-o-linear-gradient(#369, #6cf); background:linear-gradient(#369, #6cf); } .resultbars { padding-top: 30px; } .progress { float: left; width: 236px; height: 1em; border: 1px solid #ccc; background:-webkit-linear-gradient(#ccc, #eee); background:-moz-linear-gradient(#ccc, #eee); background:-ms-linear-gradient(#ccc, #eee); background:-o-linear-gradient(#ccc, #eee); background:linear-gradient(#ccc, #eee); } button { padding: 5px 10px; font-size: 14px; width: 9em; border: none; background: #ccc; background:-webkit-linear-gradient(#ccc, #eee); background:-moz-linear-gradient(#ccc, #eee); background:-ms-linear-gradient(#ccc, #eee); background:-o-linear-gradient(#ccc, #eee); background:linear-gradient(#ccc, #eee); } li{ list-style: none; margin:0; padding: 0 0 5px 0; } .value {padding: 0 1em} ul{ margin: 1em 0;} h1{font-size: 20px;} .os { display: block; float:left; width: 100px; } .progress span { background:#ccc; background: -webkit-linear-gradient(0deg, #060, #0c0); background: -moz-linear-gradient(0deg, #060, #0c0); background: -ms-linear-gradient(0deg, #060, #0c0); background: -o-linear-gradient(0deg, #060, #0c0); background: linear-gradient(90deg, #060, #0c0); width:20px; height:1em; display: block; -webkit-transition: width 1s; -moz-transition: width 1s; -ms-transition: width 1s; -o-transition: width 1s; transition: width 1s; } table{ clear: both; border: none; border-collapse: collapse; } thead th{ border-bottom: 2px solid #000; } th, td { padding: 5px 10px; border: none; border-collapse: collapse; } tbody td{ text-align: center; } tbody tr > th { text-align: left; border-right: 2px solid #000; }