Highcharts JS tworzenie wykresów

Highcharts JS to biblioteka javascript ułatwiająca tworzenie różnego rodzaju wykresów. Obsługuje dużo typów wykresów np. liniowy, słupkowy, kołowy, powierzchniowy, wykres 3D.

Na początku należy załączyć skrypty highcharts do strony www. Jeśli używamy jQuery:

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

lub jako niezależną bibliotekę:

<script src="http://code.highcharts.com/adapters/standalone-framework.js"></script>

W kodzie html należy jeszcze utworzyć kontener na wykres.

<div id="container" style="width:100%; height:400px;"></div>

Poniżek kod javascript (ja używam jQuery) tworzący prosty wykres słupkowy. Opcje wykresu przekazujemy w notacji obiektowej.

$(function () { 
    $('#container').highcharts({
        chart: {
            type: 'bar'
        },
        title: {
            text: 'Fruit Consumption'
        },
        xAxis: {
            categories: ['Apples', 'Bananas', 'Oranges']
        },
        yAxis: {
            title: {
                text: 'Fruit eaten'
            }
        },
        series: [{
            name: 'Jane',
            data: [1, 0, 4]
        }, {
            name: 'John',
            data: [5, 7, 3]
        }]
    });
});

demo - wykres słupkowy