Highcharts Demo

author(s): Torstein Hønsi

HTML

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

<div id="container" style="height: 300px; min-width: 300px"></div>
<div id="reporting"></div>

CSS

#reporting {
    position: absolute; 
    top: 55px; 
    right: 20px; 
    font: 12px Arial, Verdana; 
    color: #666;
}

JavaScript

$(function() {
    var $reporting = $('#reporting');

    var chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            type: 'line'
        },

        xAxis: {},

        plotOptions: {
            series: {
                point: {
                    events: {
                        mouseOver: function() {
                            var x = this.x;
                            var rep = '';
                            $(this.series.chart.series).each(function(i, e) {
                                rep += ' ' + e.name + ': ' + e.data[x].y;
                            });
                            alert(rep);
                            $reporting.html('x: ' + x + rep);
                        }
                    }
                },
                events: {
                    mouseOut: function() {
                        $reporting.empty();
                    }
                },
                marker: {
                    enabled: false
                }
            }
        },

        tooltip: {
            enabled: false
        },

        series: [{
            data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]},
        {
            data: [71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 12.4]}]
    });
});