Highcharts Demo

author(s): Torstein Hønsi

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="height: 300px"></div>

JavaScript

$(function () {
    var myElement = "";
    $('#container').highcharts({
        chart: {
            style: {
                fontFamily: 'Arial'
            },
            events: {
                load: function () {
                    var image = new Image();
                    var adresse_image = "http://highcharts.com/demo/gfx/sun.png";
                    image.src = adresse_image;

                    if (image.width === 0) {
                        var height_image = 50;
                        var width_image = 50;
                        var textX = this.plotLeft + (this.plotWidth * 0.5);
                        var textY = this.plotTop + (this.plotHeight * 0.5);
                        var position_x = textX - width_image / 2;
                        var position_y = textY - height_image / 2;
                        myElement = this.renderer.image(adresse_image, position_x, position_y, width_image, height_image)
                            .css({
                            position: 'relative',
                            opacity: 1
                        })
                            .attr({
                            zIndex: 1
                        })
                            .add();
                    }
                },
                redraw: function () {
                    var height_image = 50;
                    var width_image = 50;
                    var textX = this.plotLeft + (this.plotWidth * 0.5);
                    var textY = this.plotTop + (this.plotHeight * 0.5);
                    var position_x = textX - width_image / 2;
                    var position_y = textY - height_image / 2;
                    myElement.attr({
                        x: position_x,
                        y: position_y
                    });
                }
            }
        },

        yAxis: {
            minorGridLineColor: '#E0E0E0',
            minorGridLineWidth: 1,
            minorTickLength: 0,
           ...