Top 10 with external errors dashed style with up- and downstream colors

by Sascha

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://highcharts.github.io/pattern-fill/pattern-fill-v2.js"></script>
<div id="report">
  Test
</div>
<footer>
  <div class="report-info" style="display: block;">Based on production times.</div>
  <div class="legend">
    <span class="legend-color color-technical"></span>
    <span class="to-be-translated" data-translation-key="technical">technical</span>

    <span class="legend-color color-organizational"></span>
    <span class="to-be-translated" data-translation-key="organizational">organizational</span>

    <span class="legend-color color-waiting"></span>
    <span class="to-be-translated" data-translation-key="waiting">waiting</span>

    <span class="legend-color color-downstream"></span>
    <span class="to-be-translated" data-translation-key="external">behind outfeed</span>
    
    <span class="legend-color color-upstream"></span>
    <span class="to-be-translated" data-translation-key="external">before infeed</span>

    <span class="legend-color color-uncategorized"></span>
    <span class="to-be-translated" data-translation-key="uncategorized">uncategorized</span>
    
    <span class="legend-color color-commented"></span>
    <span class="to-be-translated" data-translation-key="uncategorized">Commented</span>
  </div>
</footer>

CSS

body {
  font-family: "Open Sans", sans-serif;
  font-size: 12px;
}

.color-technical {
  background-color: #F0A446;
}

.color-organizational {
  background-color: #527BD4;
}

.color-waiting {
  background-color: #2F983D;
}


.color-uncategorized {
  background-color: #999999;
}

.color-downstream {
  background-color: #bd15ac;
}

.color-upstream {
  background-color: #f24b80;
}

footer {
  position: absolute;
  bottom: 0;
  width: 100%;
}

.report-info {
  border: 1px solid #ddd;
  border-bottom: none;
  background-color: #eee;
  padding: 3px;
  color: #666;
  width: auto;
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  border-top-right-radius: 10px;
}

.legend {
  padding: 5px;
  background: white;
  width: 100%;
  position: fixed;
  bottom: 30px;
  left: 0;
}

.legend-color {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin: 0 5px;
  border-radius: 5px;
}

.color-commented {
  background-image: linear-gradient(45deg, #ffffff 32.35%, #9c9c9c 32.35%, #9c9c9c 50%, #ffffff 50%, #ffffff 82.35%, #9c9c9c 82.35%, #9c9c9c 100%);
background-size: 8px 8px;
}

JavaScript

var _reportData = [];
var _containerId = '#report';

data = {
  "resultElement0": {
    "title": "Empty product tank",
    "percentage": "11.4407046642684",
    "frequency": "1039",
    "machine": "L9_COMBISMILE",
    "category": "Technical",
    "duration": "01:25:33",
    "code": "332289",
    "units": "Track01, Track02, Track03, Track04, Track05, Track06",
    "responsible": "Upstream",
    "comment": ""
  },
  "resultElement1": {
    "title": "Track 3 manual switched off",
    "percentage": "10.0163501235002",
    "frequency": "28",
    "machine": "L9_COMBISMILE",
    "category": "Organizational",
    "duration": "01:14:54",
    "code": "85249",
    "units": "Track03",
    "responsible": "Self",
    "comment": "Leaking nozzles"
  },
  "resultElement2": {
    "title": "Track 4 manual switched off",
    "percentage": "10.0163322932424",
    "frequency": "28",
    "machine": "L9_COMBISMILE",
    "category": "Organizational",
    "duration": "01:14:54",
    "code": "85505",
    "units": "Track04",
    "responsible": "Self",
    "comment": ""
  },
  "resultElement3": {
    "title": "Track 5 manual switched off",
    "percentage": "10.0163278356779",
    "frequency": "28",
    "machine": "L9_COMBISMILE",
    "category": "Organizational",
    "duration": "01:14:54",
    "code": "85761",
    "units": "Track05",
    "responsible": "Self",
    "comment": "Jammed nozzles"
  },
  "resultElement4": {
    "title": "Track 6 manual switched off",
    "percentage": "9.98671177751601",
    "frequency": "27",
    "machine": "L9_COMBISMILE",
    "category": "Organizational",
    "duration": "01:14:40",
    "code": "86017",
    "units": "Track06",
    "responsible": "Self",
    "comment": ""
  },
  "resultElement5": {
    "title": "Off-Conveyor belt stopped due backlog into machine",
    "percentage": "3.55505251445527",
    "frequency": "24",
    "machine": "L9_COMBISMILE",
    "category": "Technical",
    "duration": "00:26:35",
    "code": "195329",
    "units": "Track01,...