GraficoBarra

by Maycon Brito

HTML

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

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

JavaScript

var arrayPropriedades = {
    id: 'container', 
    title: 'Análise Comparativa', 
    subtitle: '', 
    labelDados: 'moeda', 
    legend: {enabled: '1', },
    dataLabels: '', 
    width: '600', 
    height: '450',
    xAxis: 'Mês', 
    yAxis: 'Valor',
    xAxisCategories:
    ['Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun', 'Jul', 'Ago', 'Set', 'Out', 'Nov', 'Dez', 'Média'],
    yAxisCategories: [], 
    rotacaoDataLabels: '0',
    rotacaoXAxis: 0};

var arrayDados = [{name:"2014",data:[[0,26075.890000000003],[1,43477.04000000001],[2,33908.08],[3,16474.139999999996],[4,41822.03999999998],[5,61527.06],[6,],[7,],[8,],[9,],[10,],[11,],[12,37214.041666667]]},{name:"2015",data:[[0,57203.82999999997],[1,23055.049999999992],[2,41316.33999999998],[3,61689.12999999996],[4,14047.880000000005],[5,19672.890000000014],[6,],[7,],[8,],[9,],[10,],[11,],[12,36164.186666667]]}];

Highcharts.theme = {
    colors: ['#058DC7', '#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4'],
    chart: {
        backgroundColor: {
            linearGradient: {x1: 0, y1: 0, x2: 1, y2: 1},
            stops: [
                [0, '#FFFFFF'],
                [1, '#BED0B6']
            ]
        },
        borderWidth: 2,
        borderColor: 'rgb(10, 90, 24)',
        plotBackgroundColor: 'rgba(255, 255, 255, .9)',
        plotShadow: true,
        plotBorderWidth: 1
    },
    title: {
        style: {
            color: '#000',
            font: 'bold 16px "Calibri", Verdana, sans-serif'
        }
    },
    subtitle: {
        style: {
            color: '#666666',
            font: 'bold 12px "Calibri", Verdana, sans-serif'
        }
    },
    xAxis: {
        gridLineWidth: 1,
        lineColor: '#000',
        tickColor: '#000',
        labels: {
            style: {
                color: '#000',
                font: '11px Calibri, Verdana, sans-serif'
            }
        },
        title: {
            style: {
                color: '#333',
            ...