Highcharts test tool

by Salehin Modasiya

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/offline-exporting.js"></script>
<script src="http://blacklabel.github.io/grouped_categories/grouped-categories.js"></script>
<script src="https://highcharts.github.io/pattern-fill/pattern-fill-v2.js"></script>

<div id="container" style="height: 600px"></div>

JavaScript

// mapping between SVG attributes and the corresponding options
// Highcharts.seriesTypes.bar.prototype.pointAttrToOptions.dashstyle = 'dashStyle';

var colors = ["#FF0000", "#FF8C00", "#FFFF00", "#00FF00", "#3366FF"];

var series = [{
  "color": "#FF0000",
  "name": "High",
  "data": [298, 199, 448, 271, 772, 494, 935, 562]
}, {
  "color": "#FF8C00",
  "name": "Medium High",
  "data": [130, 32, 234, 172, 159, 134, 218, 160]
}, {
  "color": "#FFFF00",
  "name": "Medium",
  "data": [141, 163, 95, 63, 71, 22, 26, 13]
}, {
  "color": "#00FF00",
  "name": "Medium Low",
  "data": [42, 8, 34, 19, 16, 20, 21, 26]
}, {
  "color": "#3366FF",
  "name": "Low",
  "data": [4, 4, 0, 0, 0, 0, 0, 0]
}];

function getPatterns(colors) {
  return colors.map(function(color, i) {
    return {
      id: 'custom-pattern-' + i,
      path: {
        d: 'M 10 0 L 0 0 M 10 0 L 0 0 M 10 0 L 0 0',
        stroke: color
      }
    };
  });
}

function getMappedSeries(series) {
  return series.map(function(serie, i) {
    return {
      color: colors[i],
      name: serie.name,
      data: serie.data.map(function(value, j) {
        return j % 2 ? {
          y: value,
          color: 'url(#custom-pattern-' + i + ')'
        } : value;
      })
    };
  });
}

$(function() {
  Highcharts.chart('container', {
    defs: {
      patterns: getPatterns(colors)
    },

    "chart": {
      "renderTo": 'container',
      "type": 'column'
    },

    "style": {
      " fontFamily": "Arial"
    },
    "credits": {
      "enabled": false
    },
    "navigation": {
      "menuItemStyle": {
        "fontFamily": "Arial",
        "fontsize": "12px"
      }
    },
    "chart": {
      "type": "column"
    },
    "lang": {
      "tooltip_key": "Show Risk Level View"
    },
    "exporting": {
      "fallbackToExportServer": false,
      "buttons": {
        "customButton": {
          "_titleKey": "tooltip_key",
          "text": "Show Risk Level View"
        }
      }
    },
   ...