Criando gráficos responsivos com Highcharts usando JavaScript | Café ++
Publicado: 27/09/2017 - Everson Vansoski

Criando gráficos responsivos com Highcharts usando JavaScript

Gráficos de linha, coluna, pizza, etc.

O Highcharts é uma biblioteca desenvolvida para a criação de gráficos em JavaScript. São mais de 80 tipos de gráficos, sendo que cada modelo ainda possui 4 templates diferentes. Confira a seguir um modelo básico de gráfico de colunas.

HTML

<div id="graf_vendas"></div>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

Javascript

$(function () {
    Highcharts.chart('graf_vendas', {
        chart: {type: 'column'},
        title: {text: 'Vendas'},
        legend: {enabled: false},
        xAxis: {
                categories: ['1/8','2/8','3/8','4/8','5/8','6/8','7/8','8/8','9/8','10/8','11/8','12/8','13/8','14/8','15/8','16/8','17/8','18/8','19/8','20/8','21/8'],
                type: 'datetime'
        },
        yAxis: {
            min: 0,
            labels: { enabled: false },
            title: {enabled: false},
            stackLabels: {
                enabled: true,
            }
        },
        tooltip: {enabled: true, formatter: function () {return this.y}},
        plotOptions: {series: {borderWidth: 0,dataLabels: {enabled: true, formatter: function (){ return this.y},align: 'center'}}
        },                                                                                   
        credits: { enabled: false },
        series: [{data: [3,1,5,7,7,7,7,9,9,5,3,22,13,11,14,13,20,19,16,14,23,29],
                    color: '#00A2E8'}]
    });
});

Esse código retorna exatamente o gráfico acima, porém você pode customizar de acordo com sua necessidade utilizando a API Highcharts Open Reference.

Everson Vansoski
Analista de Sistemas no setor de contact center em São Paulo - SP