Question

Does anyone know if it’s possible to use a Jquery.clone(); function on a Flot chart?

var $clonedChart = $this.find('.chart-area').clone();
$('#details').append($clonedChart);

Basically, I just want to clone a chart and use it in a modal window when the user looks at a “detail view”. I can see the canvas, but unfortunately, the contents of the canvas are not rendered. Is there a way I can get them to show up? I assume I am going to need to do some fancy deep clone to grab the plugin as well, and then rerender the graph? I was hoping to avoid that but am not sure it’s possible…

Thanks!

Answer 1

If the chart is not interactive, you should propably just clone the canvas without worrying about the Flot plugin.

function cloneCanvas(oldCanvas) {

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

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

    //return the new canvas
    return newCanvas;
}

Code copied from another SO question