change rendered image source on click - Javascript highcharts

Javascript examples for highcharts:Chart Image

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

Description

change rendered image source on click

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;//from  w  w w  . ja  v a 2s. co m
var zoom = true;
var options = {
    chart: {
        renderTo: 'container',
        type: 'line',
        marginRight: 130,
        marginBottom: 25,
        events: {
            load: function() {
                var img = (zoom ? 'zoom' : 'zoom1');
                zoom = !zoom;
                var href = 'http://inadcod.com/img/' + img + '.png';
                this.renderer.image(href, 70, 10, 28, 28).on('click', function() {
                    if (options.yAxis.max) {
                        delete options.yAxis.max; // return to default
                    } else {
                        options.yAxis.max = (extremes.dataMax - extremes.dataMin) / 1.85;
                    }
                    chart = new Highcharts.Chart(options);
                }).css({
                    cursor: 'pointer',
                    position: 'relative'
                }).attr({
                    id: 'myImage'
                }).add();
            }
        }
    },
    title: {
        text: 'Test Chart',
        x: -20 //center
    },
    yAxis: {
        endOnTick: false,
        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, 38.5, 25.2, 10.5, 23.3, 18.3, 13.9, 9.6]}]
};
chart = new Highcharts.Chart(options);
var extremes = chart.yAxis[0].getExtremes();

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

Related Tutorials