JSFiddle - React, Tailwind, and code Playground

Top 10 Three Lines

by Sascha

HTML

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>

<div id="container" style="min-width: 310px; max-width: 800px; height: 400px; margin: 0 auto"></div>

JavaScript

var json = '{"resultElement0":{"title":"Aseptic zone drying zone track 1 open","percentage":"49.7559708083333","meanfrequency":"6","machine":"L8_COMBISMILE","category":"Organizational","meanduration":"1:59:24","code":"1234","responsible":"Self"},"resultElement1":{"title":"Agitator: Frequency converter fault","percentage":"0.201861111111111","meanfrequency":"6","machine":"L8_COMBISMILE","category":"Technical","meanduration":"0:0:29","code":"4711","responsible":"Self"},"resultElement2":{"title":"Pocket Chain drive OFF through process","percentage":"0.0497013888888889","meanfrequency":"12","machine":"L8_COMBISMILE","category":"Technical","meanduration":"0:0:7","code":"0815","responsible":"Self"},"resultElement3":{"title":"UHT not ready","percentage":"0.0254013888888889","meanfrequency":"4","machine":"L8_COMBISMILE","category":"Technical","meanduration":"0:0:3","code":"4321","responsible":"Upstream"}}';

var ColorDefinition = {
  technical: 'orange',
  organizational: 'blue',
  waiting: 'green',
  emptyCategory: '#999'
};


var showReport = function() {

  $.ajax('/echo/json', {
    type: 'POST',
    data: {
      'json': json
    },
    success: function(data) {

      barData = [];
      var eventLabel = '';
      if (typeof(data) !== "undefined") {
        for (var i in data) {
          var catColor = ColorDefinition.emptyCategory;

          switch (data[i].category.toLowerCase()) {
            case 'technical':
              catColor = ColorDefinition.technical;
              break;
            case 'organizational':
              catColor = ColorDefinition.organizational;
              break;
            case 'waiting':
              catColor = ColorDefinition.waiting;
              break;
          }

          eventLabel = data[i].title + '<br />';
          eventLabel += data[i].machine + '; ' + data[i].responsible + '<br />';
          eventLabel += '[Code ' + data[i].code + '; ' + data[i].meanduration + ' h; ' + data[i].meanfrequency + 'x]';


         ...