Highcharts Demo

author(s): Torstein Hønsi

by dirtyd77

HTML

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

<div id="container" style="height: 400px"></div>

<button id="name">Toggle name</button>
<button id="data-labels">Toggle data labels</button>
<button id="markers">Toggle point markers</button>
<button id="color">Toggle color</button>

<button id="line" style="margin-left: 2em">Line</button>
<button id="column">Column</button>
<button id="spline">Spline</button>
<button id="area">Area</button>
<button id="areaspline">Areaspline</button>
<button id="scatter">Scatter</button>
<button id="pie">Pie</button>

JavaScript

$(function () {
    $('#container').highcharts({
        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
            showEmpty: false
        },

        yAxis: {
            showEmpty: false
        },

        series: [{
            allowPointSelect: true,
            data: [ // use names for display in pie data labels
                ['January',    29.9],
                ['February',   71.5],
                ['March',     106.4],
                ['April',     129.2],
                ['May',       144.0],
                ['June',      176.0],
                ['July',      135.6],
                ['August',    148.5],
                {
                    name: 'September',
                    y: 216.4,
                    selected: true,
                    sliced: true
                },
                ['October',   194.1],
                ['November',   95.6],
                ['December',   54.4]
            ],
            showInLegend: true
        }]
    });

    var chart = $('#container').highcharts();
        
    // Toggle names
    var name = false;
    $('#name').click(function() {
        chart.series[0].update({
            name: name ? null : 'First'
        });
        name = !name;
    });

    // Toggle data labels
    var enableDataLabels = true;
    $('#data-labels').click(function() {
        chart.series[0].update({
            dataLabels: {
                enabled: enableDataLabels
            }
        });
        enableDataLabels = !enableDataLabels;
    });

    // Toggle point markers
    var enableMarkers = false;
    $('#markers').click(function() {
        chart.series[0].update({
            marker: {
                enabled: enableMarkers
            }
        });
        enableMarkers = !enableMarkers;
    });

    // Toggle point markers
    var color = false;
    $('#color').click(function() {
        chart.series[0].update({
            color: color ? null...