Graficos

by Maycon Brito

HTML

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

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

JavaScript

GraficoBarra (
    {id: 'container', title: 'Grafico de Compras', subtitle: 'De: 01/01/2013 até 31/01/2014', labelDados: 'moeda', dataLabels: '', width: '800', height: '400',xAxis: 'Meses', yAxis: 'Valor da Compra', xAxisCategories: ['01/2013', '01/2014', '02/2013', '03/2013', '04/2013', '05/2013', '06/2013', '07/2013', '08/2013', '09/2013', '10/2013', '11/2013', '12/2013'], yAxisCategories: [], rotacaoDataLabels: '0',rotacaoXAxis: 0, legend:{}} , 
    [{name:"Valor da Compra",data:[25827.0000,54817.2400,33331.5200,28386.8000,32374.7600,36857.4000,36078.6000,36725.0000,35865.2000,35926.0000,117101.0800,16911.1200,42685.1000]}], null);

Highcharts.setOptions({
    lang: {
        decimalPoint: ',',
        thousandsSep: '.'
    },
    tooltip: {
        yDecimals: 2
    }
});

function GraficoBarra(arrayPropriedades, arrayDados, arrayDrillDown) {

    //Inicializa o gráfico
    inicializarGrafico(arrayDrillDown);

    // Cria o gráfico com as devidas configurações personalizadas
    $('#' + arrayPropriedades.id).highcharts({
        chart: {
            type: 'column',
            width: arrayPropriedades.width,
            height: arrayPropriedades.height,
        },
        title: {
            text: arrayPropriedades.title
        },
        subtitle: {
            text: arrayPropriedades.subtitle
        },
        xAxis: {
            type: arrayPropriedades.xAxis,
            categories: arrayPropriedades.xAxisCategories,
            labels: {
                rotation: arrayPropriedades.rotacaoXAxis
            }
        },
        yAxis: {
            title: {
                text: arrayPropriedades.yAxis
            },
            labels: {
                formatter: function() {
                    return formatarValor(arrayPropriedades.labelDados, this.value);
                }
            },
        },
        legend: arrayPropriedades.legend,
        plotOptions: {
            series: {
                borderWidth: 0.5,
                groupPadding:...