add an image to that chart with an onClick event attached to it - Javascript highcharts

Javascript examples for highcharts:Chart Event

  1. HOME
  2. Javascript
  3. highcharts
  4. Chart Event

Description

add an image to that chart with an onClick event attached to it

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <title>Highcharts example</title> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://code.jquery.com/jquery-1.8.3.js"></script> 
   </head> 
   <body> 
      <script src="https://code.highcharts.com/highcharts.js"></script> 
      <script src="https://code.highcharts.com/modules/exporting.js"></script> 
      <div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div> 
      <script type="text/javascript">
var chart;//www  .  ja  va2s  .co  m
var options = {
    chart: {
        renderTo: 'container',
        type: 'line',
        marginRight: 130,
        marginBottom: 25,
        events: {
            load: function() {
                this.renderer.image('http://inadcod.com/img/zoom.png', 70, 10, 28, 28)
                .on('click', function() {
                    if(options.yAxis.max) {
                        delete options.yAxis.max; // return to default
                    } else {
                        options.yAxis.max = 25;
                    }
                    chart = new Highcharts.Chart(options);
                })
                .css({
                    cursor: 'pointer',
                    position: 'relative',
                    "margin-left": "-90px",
                    opacity: 0.75
                }).attr({
                    id: 'myImage',
                    zIndex: -100
                }).add();
            }
        }
    },
    title: {
        text: 'Test Chart',
        x: -20 //center
    },
    yAxis: {
        title: {
            text: 'some value'
        },
        plotLines: [{
            value: 0,
            width: 1,
            color: '#808080'}]
    },
    tooltip: {
        formatter: function() {
            return '<b>' + this.series.name + '</b><br/>' + this.x + ': ' + this.y;
        }
    },
    legend: {
        layout: 'vertical',
        align: 'right',
        verticalAlign: 'top',
        x: -10,
        y: 100,
        borderWidth: 0
    },
    series: [{
        name: 'Set 1',
        data: [7.0, 6.9, 17.5, 14.5, 18.2, 3.5, 25.2, 10.5, 23.3, 18.3, 13.9, 9.6]},
    {
        name: 'Set 2',
        data: [-0.2, 14.8, 5.7, 11.3, 17.0, 22.0, 5.8, 24.1, 20.1, 14.1, 8.6, 2.5]},
    {
        name: 'Set 3',
        data: [-0.9, 0.6, 13.5, 8.4, 13.5, 17.0, 18.6, 24.9, 14.3, 9.0, 3.9, 1.0]},
    {
        name: 'Set 4',
        data: [3.9, 4.2, 15.7, 8.5, 11.9, 25.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]},
    {
        name: 'Set 5',
        data: [1.2, 5.8, 14.1, 7.4, 23.2, 17.4, 12.5, 24.8, 8.9, 14.7, 11.6, 4.7]}]
};
chart = new Highcharts.Chart(options);

      </script>  
   </body>
</html>

Related Tutorials