Question 294862 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

How to enable highchart animation in jquery clone?

i am using highchart to create a graph. If i move the mouse over the graph it shows the values. This works great.

If i clone the graph using jquery there is no animation anymore. You can see it in this fiddle.

This is my code:

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

<div id="copyto">
</div>

<button id="button">Set new data</button>
<button id="button2">Copy</button>


$(function () {
    $('#container').highcharts({
        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]
        }]
    });


    // the button action
    $('#button').click(function() {
        var chart = $('#container').highcharts();
        chart.series[0].remove();
        chart.addSeries({data:[229.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4]} );
       
    });
    
    $('#button2').click(function() {
          var $myclone = $("#wrapper").clone().prop("id", "clonewrapper");
            $("#copyto").append($myclone);
    });
});
Tags:

2

Answers


  1. 0

    After cloning the div you need to reinitiate highcharts on the cloned div

    Here is a working solution:

    $(function() {
  createHightChart('container');
  // the button action
  $('#button').click(function() {
    var chart = $('#container').highcharts();
    chart.series[0].remove();
    chart.addSeries({
      data: [229.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4]
    });

  });

  $('#button2').click(function() {
    var $myclone = $("#wrapper").clone().prop("id", "clonewrapper");
    $("#copyto").append($myclone);
    createHightChart('clonewrapper');
  });
});

function createHightChart(elementId) {
  $('#'+elementId).highcharts({
    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]
    }],
    accessibility: {
      enabled: false
    }
  });
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="wrapper">
  <div id="container" style="height: 400px"></div>
</div>

<div id="copyto">
</div>

<button id="button">Set new data</button>
<button id="button2">Copy</button>

    Note: In case you want Set new data button to work for all chart div(s), do like this: https://jsfiddle.net/kaz6cfp1/

    Login or Signup to reply.
  2. 0

    You can create the second chart by using user options from the first one. For example:

      $('#button2').click(function() {
    var options = $('#container').highcharts().userOptions;
    $("#copyto").highcharts(options);
  });

    Live demo: https://jsfiddle.net/BlackLabel/qheuLb1k/

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search