[Solved] How do you Clone a Chart?

[Ryan Behan]

I have been having difficulty cloning the MVC Chart control with jquery.  I've attemped two means to clone a copy of the chart, manipulate the copy then return it in a Telerik Window Control.  The desired effect is that a user can click on the smaller version of the chart to expand it out in a modal window to view it.

1)  var chart = $(this).clone(true, true);
2)  var chart = $.extend(true, {}, $(this));

Following this clone attempt I create another variable which equates to the 'tchart' data, manipulate the chart size, run refresh() then set the Window control's contents equal to the chart variable.  

The issue is that when I change the cloned chart object's options then run refresh(), the original chart is modified.  I thought it was unique html ids, so I removed the id attribute and gave it a different value as two attempts to make this clone unique.  No dice...  In another attempt to make this chart clone work i try this.

chart.attr("id", "");
        chart.data('tChart').options.chartArea.width = 500;
        chart.data('tChart').options.chartArea.height = 500;
        var newdiv = $("<div />");
        newdiv.append(chart);
        newdiv.find(".t-chart").data('tChart').refresh();
        $('#Window').data('tWindow').content(newdiv);
        e.preventDefault();
        $('#Window').data('tWindow').center().open();
        newdiv.find(".t-chart").data('tChart').refresh();


The result is that the original chart is returned in the window and the chart on the web page is shrunk to 500x500.  I really would prefer the solution stay client side and not require me to make hidden chart objects for these windows.  Has anyone run into this challenge before?

[T. Tsonev]

Hi,

The clone produced with jQuery still references the options of the original chart. Hence the behavior you're experiencing.

To make the two instances independent you need to clone the options from the old one.
var options = $.extend(true, {}, $("#chart").data("tChart").options);
var container = $(".example");

$("<div id='chart-clone' style='width: 600px; height: 400px;' />")
.appendTo(container)
.tChart(options);

Here $.extend is used to make a deep clone of the options.

I hope this helps.

Kind regards,
Tsvetomir Tsonev
the Telerik team