highcharts polar

by abenrob

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/highcharts-more.js"></script>
<div id="container" style="width: 400px; height: 400px; margin: 0 auto"></div>

JavaScript

var myRenderDiv = 'container';
var myDataSeries = [2,1, 1, 0, 1, 2];

function drawChart(renderDiv, dataSeries) {

	window.chart = new Highcharts.Chart({
	            
	    chart: {
	        renderTo: renderDiv,
	        polar: true,
	        type: 'area'
	    },
        
        credits: {
            enabled: false
        },
	    
	    title: {
	        text: null
	    },
	    
	    pane: {
	    	size: '80%',
            
	    },
	    
        tooltip: {
            formatter: function() {
                if (this.y == 2) {return '<b>Very</b> '+ this.x}
                else if (this.y == 1) {return '<b>Slightly</b> '+ this.x}
                else {return false}
            }
        },
        
	    xAxis: {
	        categories: ['Hoppy', 'Malty', 'Grainy', 'Corny', 
	                'Bitter', 'Citrusy'],
	        tickmarkPlacement: 'on',
	        lineWidth: 0
	    },
	        
	    yAxis: {
	        gridLineInterpolation: 'polygon',
	        lineWidth: 0,
	        min: 0,
            max: 2,
            labels: {
                enabled: false
            }
	    },
	    
	    legend: {
            enabled: false
	    },
	    
	    series: [{
	        data: dataSeries,
	        pointPlacement: 'on',
            color: '#00FF00'
	    }]
	
	});
};

$(document).ready(function() {
    drawChart(myRenderDiv,myDataSeries);
});