js/highcharts-master/samples/highcharts/studies/combo-timeline-updated/demo.js
/**
 * Fires on chart load, called from the chart.events.load option.
 */
Fires on chart load, called from the chart.events.load option.
Fires on chart load called from the chart . events . load option .
function onChartLoad() {
    var centerX = 140,
        centerY = 110,
        path = [],
        angle,
        radius,
        badgeColor = Highcharts.Color(Highcharts.getOptions().colors[0]).brighten(-0.2).get(),
        spike,
        empImage,
        big5,
        label,
        left,
        right,
        years,
        renderer;
    if (this.chartWidth < 530) {
        return;
    }
    for (angle = 0; angle < 2 * Math.PI; angle += Math.PI / 24) {
        radius = spike ? 80 : 70;
        path.push(
            'L',
            centerX + radius * Math.cos(angle),
            centerY + radius * Math.sin(angle)
        );
        spike = !spike;
    }
    path[0] = 'M';
    path.push('z');
    this.renderer.path(path)
        .attr({
            fill: badgeColor,
            zIndex: 6
        })
        .add();
    empImage = this.renderer.path(path)
        .attr({
            zIndex: 7,
            opacity: 0,
            stroke: badgeColor,
            'stroke-width': 1
        })
        .add();
    big5 = this.renderer.text('5')
        .attr({
            zIndex: 6
        })
        .css({
            color: 'white',
            fontSize: '100px',
            fontStyle: 'italic',
            fontFamily: '\'Brush Script MT\', sans-serif'
        })
        .add();
    big5.attr({
        x: centerX - big5.getBBox().width / 2,
        y: centerY + 14
    });
    label = this.renderer.text('Highcharts Anniversary')
        .attr({
            zIndex: 6
        })
        .css({
            color: '#FFFFFF'
        })
        .add();
    left = centerX - label.getBBox().width / 2;
    right = centerX + label.getBBox().width / 2;
    label.attr({
        x: left,
        y: centerY + 44
    });
    left = centerX - 90;
    right = centerX + 90;
    this.renderer
        .path([
            'M', left, centerY + 30,
            'L', right, centerY + 30,
            right, centerY + 50,
            left, centerY + 50,
            'z',
            'M', left, centerY + 40,
            'L', left - 20, centerY + 40,
            left - 10, centerY + 50,
            left - 20, centerY + 60,
            left + 10, centerY + 60,
            left, centerY + 50,
            left + 10, centerY + 60,
            left + 10, centerY + 50,
            left, centerY + 50,
            'z',
            'M', right, centerY + 40,
            'L', right + 20, centerY + 40,
            right + 10, centerY + 50,
            right + 20, centerY + 60,
            right - 10, centerY + 60,
            right, centerY + 50,
            right - 10, centerY + 60,
            right - 10, centerY + 50,
            right, centerY + 50,
            'z'
        ])
        .attr({
            fill: badgeColor,
            stroke: '#FFFFFF',
            'stroke-width': 1,
            zIndex: 5
        })
        .add();
    years = this.renderer.text('2009-2014')
        .attr({
            zIndex: 6
        })
        .css({
            color: '#FFFFFF',
            fontStyle: 'italic',
            fontSize: '10px'
        })
        .add();
    years.attr({
        x: centerX - years.getBBox().width / 2,
        y: centerY + 62
    });
    renderer = this.renderer;
    if (renderer.defs) { 
        $.each(this.get('employees').points, function () {
            var point = this,
                pattern;
            if (point.image) {
                pattern = renderer.createElement('pattern').attr({
                    id: 'pattern-' + point.image,
                    patternUnits: 'userSpaceOnUse',
                    width: 400,
                    height: 400
                }).add(renderer.defs);
                renderer.image(
                    'https://www.highcharts.com/images/employees2014/' + point.image + '.jpg',
                    centerX - 80,
                    centerY - 80,
                    160,
                    213
                ).add(pattern);
                Highcharts.addEvent(point, 'mouseOver', function () {
                    empImage
                        .attr({
                            fill: 'url(#pattern-' + point.image + ')'
                        })
                        .animate({ opacity: 1 }, { duration: 500 });
                });
                Highcharts.addEvent(point, 'mouseOut', function () {
                    empImage.animate({ opacity: 0 }, { duration: 500 });
                });
            }
        });
    }
}
function onChartLoad ( ) { var centerX = 140 , centerY = 110 , path = [ ] , angle , radius , badgeColor = Highcharts . Color ( Highcharts . getOptions ( ) . colors [ 0 ] ) . brighten ( - 0.2 ) . get ( ) , spike , empImage , big5 , label , left , right , years , renderer ; if ( this . chartWidth < 530 ) { return ; } for ( angle = 0 ; angle < 2 * Math . PI ; angle += Math . PI / 24 ) { radius = spike ? 80 : 70 ; path . push ( 'L' , centerX + radius * Math . cos ( angle ) , centerY + radius * Math . sin ( angle ) ) ; spike = ! spike ; } path [ 0 ] = 'M' ; path . push ( 'z' ) ; this . renderer . path ( path ) . attr ( { fill : badgeColor , zIndex : 6 } ) . add ( ) ; empImage = this . renderer . path ( path ) . attr ( { zIndex : 7 , opacity : 0 , stroke : badgeColor , 'stroke-width' : 1 } ) . add ( ) ; big5 = this . renderer . text ( '5' ) . attr ( { zIndex : 6 } ) . css ( { color : 'white' , fontSize : '100px' , fontStyle : 'italic' , fontFamily : '\'Brush Script MT\', sans-serif' } ) . add ( ) ; big5 . attr ( { x : centerX - big5 . getBBox ( ) . width / 2 , y : centerY + 14 } ) ; label = this . renderer . text ( 'Highcharts Anniversary' ) . attr ( { zIndex : 6 } ) . css ( { color : '#FFFFFF' } ) . add ( ) ; left = centerX - label . getBBox ( ) . width / 2 ; right = centerX + label . getBBox ( ) . width / 2 ; label . attr ( { x : left , y : centerY + 44 } ) ; left = centerX - 90 ; right = centerX + 90 ; this . renderer . path ( [ 'M' , left , centerY + 30 , 'L' , right , centerY + 30 , right , centerY + 50 , left , centerY + 50 , 'z' , 'M' , left , centerY + 40 , 'L' , left - 20 , centerY + 40 , left - 10 , centerY + 50 , left - 20 , centerY + 60 , left + 10 , centerY + 60 , left , centerY + 50 , left + 10 , centerY + 60 , left + 10 , centerY + 50 , left , centerY + 50 , 'z' , 'M' , right , centerY + 40 , 'L' , right + 20 , centerY + 40 , right + 10 , centerY + 50 , right + 20 , centerY + 60 , right - 10 , centerY + 60 , right , centerY + 50 , right - 10 , centerY + 60 , right - 10 , centerY + 50 , right , centerY + 50 , 'z' ] ) . attr ( { fill : badgeColor , stroke : '#FFFFFF' , 'stroke-width' : 1 , zIndex : 5 } ) . add ( ) ; years = this . renderer . text ( '2009-2014' ) . attr ( { zIndex : 6 } ) . css ( { color : '#FFFFFF' , fontStyle : 'italic' , fontSize : '10px' } ) . add ( ) ; years . attr ( { x : centerX - years . getBBox ( ) . width / 2 , y : centerY + 62 } ) ; renderer = this . renderer ; if ( renderer . defs ) { $ . each ( this . get ( 'employees' ) . points , function ( ) { var point = this , pattern ; if ( point . image ) { pattern = renderer . createElement ( 'pattern' ) . attr ( { id : 'pattern-' + point . image , patternUnits : 'userSpaceOnUse' , width : 400 , height : 400 } ) . add ( renderer . defs ) ; renderer . image ( 'https://www.highcharts.com/images/employees2014/' + point . image + '.jpg' , centerX - 80 , centerY - 80 , 160 , 213 ) . add ( pattern ) ; Highcharts . addEvent ( point , 'mouseOver' , function ( ) { empImage . attr ( { fill : 'url(#pattern-' + point . image + ')' } ) . animate ( { opacity : 1 } , { duration : 500 } ) ; } ) ; Highcharts . addEvent ( point , 'mouseOut' , function ( ) { empImage . animate ( { opacity : 0 } , { duration : 500 } ) ; } ) ; } } ) ; } }
Fires on chart load, called from the chart.events.load option.
Fires on chart load called from the chart . events . load option .
// Draw the spiked disc // Employee image overlay // Big 5 // Draw the label // The band // 2009-2014 // Prepare mouseover // is SVG