Highcharts Demo

author(s): Torstein Hønsi

by rarteaga

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>

<div id="grafico_avance"></div>

CSS

div#grafico_avance { 
    height: 180px; 
    margin: 17px 19px 0 80px;    
    position: absolute;
    width: 150px;
}

JavaScript

$(function () {
    graficoAvanceCosecha(100);
});

function graficoAvanceCosecha(porcentaje_avance) {
    $('#grafico_avance').highcharts({
	    chart: {
	        type: 'pie'
	    },
	    
	    plotOptions: {
	        pie: {
	            innerSize: 120,
                size: 100
	        },
	    },
        credits: { enabled: false },
	    title: {
                style: { color: '#00acec', fontFamily: 'Tahoma', fontSize: '32px', fontWeight: 'bold' },
                text: porcentaje_avance + '<span style="color:#999999;font-size:13px;font-weight: bold;">%</span>',
                useHTML: true,
                y: 110,
                x: 0
        },
	    series: [{
            data: [{
	            color: "#00acec",
                name: 'Liberadas',
                y: porcentaje_avance
            },
            {
                color: "#f2f2f2",
                name: 'Pendientes',
                y: 100 - porcentaje_avance
            }],
            dataLabels: {
                enabled: false
            },
            name: 'Cosechas'
	    }],
        tooltip: {
            valueSuffix: '%',
            positioner: function () {
                return { x: 20, y: 130 };
            }
        },
        yAxis: { title: { text: '' } }
	});
}