Highcharts : Resume

by origineil

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/highcharts-more.js"></script>
<script src="http://code.highcharts.com/modules/data.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="min-width: 420px; max-width: 750px; height: 500px; margin: 0 auto"></div>

JavaScript

$(function () {

    var data = [
        {Java : 6.5},
        {Javascript : 4},
        {Knockout : 3},
        {Slickgrid : 3},
        {Liferay : 1},
        {'ReST Services': 3},
        {Spring: 2},
        {'Data Visualization': 6.5},
        {jQuery : 3},
        {Hibernate: 1},
        {'AlloyUI' : 1},
        {'YUI3' : 1},
        {'JSON' : 4},
        {'MooTools' : 3},
        {'Agile/Scrum' : 3}
        
    ]
    var vm = {
        experience: function(){return 6.5},
        headers: function(){
         var tmp = [null]
         for(d in data){
           tmp.push(Object.keys(data[d])[0])
         }
         return tmp
       },
      columns: function(){
        var tmp = [];
        tmp.push(this.headers())
        for(i = 0; i < data.length; ++i){
            tmp.push(this.series(i))
        }
        
        return tmp;
      },
      series: function(index){
       var tmp = [this.headers()[index+1]]
       var headers = this.headers();
     
         for(d in data){
             
             var obj = data[d]
             var key = Object.keys(obj)[0] 
             tmp.push(index==d ? (100 * obj[key] / vm.experience()) : 0)
             
       }
       
       return tmp;    
     }
  }
     
    $('#container').highcharts({
        data: {
            columns:  vm.columns(), 
        },
        credits: {enabled: false},
        chart: {
            polar: true,
            type: 'column'
        },

        title: {
            text: 'Professional Experience'
        },

        subtitle: {
            text: ''
        },

        pane: {
            size: '95%'
        },

        legend: {
            align: 'right',
            verticalAlign: 'top',
            y: 7,
            layout: 'vertical'
        },

        xAxis: {
            tickmarkPlacement: 'on'
        },

        yAxis: {
            min: 0,
            endOnTick: false,
            showLastLabel: true,
             
            labels: {
                formatter:...