New chart | #ikVHtYEZ | AnyChart Playground

HTMLcopy

​x
 
<div style="height:300px; overflow:auto">
<table>
  <caption><h5>Liste des anomalies identifiees</h5></caption>
  <thead>
    <tr>
      <th scope="col">Segment</th>
      <th scope="col">Nombre de tickets sur periode N-1</th>
      <th scope="col">Nombre de tickets sur periode N</th>
      <th scope="col">Evolution en %</th>
      <th scope="col">Categorie</th>
      <th scope="col">Solution disponible</th>
      <th scope="col">Critique</th>
      <th scope="col">Evolution Chart</th>
      
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Demande d'acces a repertoire</th>
      <td>2</td>
      <td>21</td>
      <td>950%</td>
      <td>Securite</td>
      <td></td>
      <td><input type="checkbox" checked></td>
      <td></td>
    </tr>
    <tr>
      <th scope="row">PC lent</th>
      <td>10</td>
      <td>17</td>
      <td>70%</td>
      <td>Materiels</td>
      <td></td>
      <td><input type="checkbox" checked></td>
      <td></td>
    </tr>
​
    <tr>
      <th scope="row">Ap_Me_4</th>
      <td>20</td>
      <td>30</td>
      <td>50%</td>
      <td>Messagerie Outlook</td>
      <td></td>
      <td><input type="checkbox" checked></td>
      <td></td>
    </tr>
    <tr>
      <th scope="row">Espace disque insuffisant sur repertoire</th>
      <td>16</td>
      <td>24</td>
      <td>50%</td>
      <td>Infrastructure</td>
      <td></td>
      <td><input type="checkbox" checked></td>
      <td></td>
    </tr>
    <tr>
      <th scope="row">Message d'erreur a l'ouverture de ses fichiers</th>
      <td>10</td>
      <td>14</td>
      <td>20%</td>
      <td>Office</td>
      <td></td>
      <td><input type="checkbox"></td>
      <td></td>
    </tr>
  </tbody>
</table>
</div>

CSScopy

 
table {
  table-layout: auto;
  width: 100%;
  border-collapse: collapse;
}
​
thead th:nth-child(1) {
  width: 12%;
}
​
thead th:nth-child(2) {
  width: 12%;
}
​
thead th:nth-child(3) {
  width: 12%;
}
​
thead th:nth-child(4) {
  width: 12%;
}
​
thead th:nth-child(5) {
  width: 12%;
}
​
thead th:nth-child(6) {
  width: 12%;
}
​
thead th:nth-child(7) {
  width: 12%;
}
​
thead th:nth-child(8) {
  width: 16%;
}
​
th, td {
  padding: 10px;
  border: 1px solid #E9E9EA;
}
​
/* typographie */
​
html {
  font-family: sans-serif;
}
thead th, tfoot th{
  color: #fff
}
​
th {
  letter-spacing: 0.5px;
  font-size: 13px;
}
​
td {
  letter-spacing: 0.5px;
  font-size: 15px;
}
​
tbody td {
  text-align: center;
}
​
tfoot th {
  text-align: right;
}
​
tbody tr:nth-child(odd) {
  background-color: #fff;
}
​
tbody tr:nth-child(even) {
  background-color: #7DDBDA;
}
​
table {
  background-color: #007D82 ;
}
​
function fillListeAnomaliesIdentifiees(data){
  
}

JavaScriptAutocompletecopy

 
function fillBarChart(){
  /*
  var view = anychart.data.set(data).mapAs({'Project': [0], 'Milestone': [1], 'Due': [2]});
        var iterator = view.getIterator();
        var bulletScale = anychart.scales.linear().minimum(-20).maximum(20);
​
        var i = 0;
        while (iterator.advance()) {
            var dueDate = new Date(iterator.get('Due'));
            var diff = getDiffInDays(Today, dueDate);
            var bullet = anychart.bullet([{
                'value': diff,
                'type': 'bar',
                'gap': 0.2,
                'stroke': null,
                'fill': ((diff >= 0) ? '#D6D6D6' : '#1976d2')
            }]);
            bullet.scale(bulletScale).padding(0).margin(0);
            i++;
            bullet.container('majorProjectMilestonesBar' + i);
            bullet.draw();
        }
  */
  
  var axis = anychart.standalones.axes.linear();
  axis.orientation('bottom');
  axis.labels().fontSize('9px').padding(0);
  axis.scale(bulletScale);
  axis.minorTicks(false);
  axis.padding([0,5,0,5]);
  axis.draw()
}
anychart.theme({defaultTooltip: {allowLeaveStage: true}});
fillBarChart(data)

Sample meta

AnyChart Documentation