Highchart Issues v2

Highchart Issues v2

by Dumine Stefan Daniel

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
      <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.12.2/bootstrap-table.min.css">
      <script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.12.2/bootstrap-table.min.js"></script>
      <script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.12.2/locale/bootstrap-table-zh-CN.min.js"></script>
      <script src="https://code.highcharts.com/highcharts.js"></script>
      <script src="https://code.highcharts.com/highcharts-more.js"></script>
      <script src="https://code.highcharts.com/modules/exporting.js"></script>
      <link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet">
      
      
      <script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>
      
      
  
<div id="container" style="min-width: 300px; height: 400px; margin: 0 auto"></div>
 <a id="generate" class="btn btn-default pull-left mobile" style="border-color: #428bca;margin-top: 2px;min-width: 100px;margin-right: 10px;">
<span class="glyphicon glyphicon-plus-sign" style="color: #428bca;"></span>
Generate
</a>

JavaScript

// db input
var data_ = [['PISON-9999', 30],
            ['PISON-10211', 21],
            ['PISON-10212', 1],
            ['PISON-8745', 1],
            ['PISON-9555', 5]];
            



// generate chart
$('#generate').click(function() {

// sort desc
 data_ = data_.sort(function(a, b) {
    return b[1] - a[1];
});

   $('#container').highcharts({
       chart: {
        type: 'column'
    },
    title: {
        text: 'Issues that affects failing scenarios'
    },
    subtitle: {
        text: ''
    },
    xAxis: {
        type: 'category',
        labels: {
            rotation: -45,
            style: {
                fontSize: '13px',
                fontFamily: 'Verdana, sans-serif'
            }
        },
         title: {
            text: 'Issue'
        }
    },
    yAxis: {
        min: 0,
        title: {
            text: 'Failing scenarios'
        }
    },
      plotOptions: {
                            series: {
                                cursor: 'pointer',
                                point: {
                                    events: {
                                        click: function () {
                                            var index = this.series.xData.indexOf(event.point.x);
                                            var issue_url =  'https://jira.piworks.net/browse/' + (data_[index])[0];
                                          
 							 var win = window.open(issue_url, '_blank');
               if (win) {
                   win.focus();
               }
                                        }
                                    }
                                }
                            }
                        },
    legend: {
        enabled: false
    },
    tooltip: {
    
        pointFormat: ' is affecting <b>{point.y}</b> failing scenarios',
                                    headerFormat: '<b>{point.key}</b>',

    },
    series: [{
        name: 'Issues',
        data: data_,
       ...