3

I'm using Chart.js to draw a graph. Here is the structure of my code :

<div id="graph_slider">
    <div class="row">
        <div id="first_container" class="col-md-6">
            <canvas id="my_graph"></canvas>
        </div>
        <div id="second_container" class="col-md-6"></div>
    </div>
</div>
<button type="button" id="clone">Clone graph</button>

<script>
    var ctx = document.getElementById('my_graph').getContext('2d');

    var chart = new Chart(ctx, {
        type: 'line',
        data: {
            labels: ['Item 1', 'Item 2', 'Item 3'],
            datasets: [{data: [10, 20, 30]}]
        }
    });

    $("#clone").click(function(){
       //clone the graph... 
    });
</script>

What I would like to do is to "clone" the graph #my_graph and append it to the div #second_container so that I could have the exact same graphs side-by-side when I click the button #clone.

Does someone know how to do this please?

T.Eric
  • 31
  • 1
  • 3

2 Answers2

0

Get the html content of first div and set it to second one:

$("#clone").click(function(){
   var content=$("#first_container").html();
   $("#second_container").html(content);
});

or using clone:

$("#clone").click(function(){
   $("#first_container").clone().appendTo("#second_container");
});

If you want to copy canvas directly to a new one(instead of its parent`s content): (Thanks to this)

function cloneCanvas(oldCanvas) {

    //create a new canvas
    var newCanvas = document.createElement('canvas');
    var context = newCanvas.getContext('2d');

    //set dimensions
    newCanvas.width = oldCanvas.width;
    newCanvas.height = oldCanvas.height;

    //apply the old canvas to the new one
    context.drawImage(oldCanvas, 0, 0);

    //Clone the new canvas to desired place
    newCanvas.clone().appendTo("#second_container");

}
Community
  • 1
  • 1
Ali Sheikhpour
  • 10,475
  • 5
  • 41
  • 82
  • Thank you for your answer. I tried the 2 solutions that you suggested but unfortunately, neither of them works. The canvas is indeed cloned, however, the cloned canvas does not show anything. There is just a blank space inside of it. As for the direct canvas copy, since it just creates an image based on the first graph, it does not show any animation (for exemple the tooltip with his value when hovering a point of the graph). – T.Eric Jun 02 '16 at 13:16
  • How does those animation and events work. Do you use a third party plugin? – Ali Sheikhpour Jun 02 '16 at 13:22
  • The animations and events are created automatically by Chart.js (I am using the version 2.1.2) – T.Eric Jun 02 '16 at 13:33
  • Ok. You have to find how to re-initialize chart.js events. Or ask a new question how to do that... – Ali Sheikhpour Jun 02 '16 at 13:40
  • Did anyone find a solution for this in the end? – James Barrett Jan 08 '18 at 14:59
0

I reached a solution for this problem after spending a while on it. the solution is by creating another chart which will have the same property as the one we want to clone. and as we know that in order to create a chart is should contain both context and the config the context is the id in the canvas and the config will hold the type, data, options objects.

so my approach is to create a function which will get the desired chart as an input. like the following (code snippet):

var dynamic_chart; 
var ctx; 

   // pass the chart that we want to clone as an object 

   function myDynamicChart(chart){

   //destroy the previous chart in the canvas to avoid any overlapping 

     if(dynamic_chart != null)
       dynamic_chart.destroy();

   //set the context jquery..
     ctx = $('#myBarChart3');

   //or set the conext by html which will be ctx= document.getElementById("myBarChart3");

   //instantiate the chart 
     dynamic_chart = new Chart(ctx,{
     type: chart.config.type,
     data: chart.config.data, 
     options:chart.config.options
   });



   }
Alaa Ajlouni
  • 1