Highcharts Demo

author(s): Torstein Hønsi

by Fusher

HTML

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

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

JavaScript

$(function() {
    var customImage,extremes;
    var chart = new Highcharts.Chart({

        chart: {
            renderTo: 'container',
            zoomType: 'x',
            height: 300,
            width: 500,
            events: {
                selection: function() {
                    var x = extremes.max == this.xAxis[0].getExtremes().max ? 2 : 1;
                    customImage.attr({
                        transform: 'scale(' + x + ',1)',
                    });
                },
                load: function() {
                    extremes = this.xAxis[0].getExtremes();
                    customImage = this.renderer.image('http://highsoft.com/images/media/Highsoft-Solutions-143px.png', 100, 100, 140, 50).add();
                }
            }
        },

        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },

        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]}],

        exporting: {
            enableImages: true
        }

    });
});