FusionCharts API-Methods: clone
HTML
<script src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script src="http://static.fusioncharts.com/code/latest/fusioncharts.charts.js"></script>
<div id="indicatorDiv">Method Name: <b>clone()</b>
<br>
<br>Creates a copy of a chart instance, creating a new chart with identical construction properties of the chart being cloned. The cloned chart, assigned an auto-generated ID, is rendered in a container DOM element that is explicitly provided.</br>
<br>Click the <b> Create an exact clone </b> button to create an exact replica of the column 2D chart shown below. Click the <b> Create a modified clone </b> button to create a bar chart replica of the column chart.</br>
<br>Scroll down to see the cloned chart rendered below the original column chart.</br>
</div>
<br>
<center>
<button id="exact_copy">Create an exact clone</button>
<button id="modified_copy">Create a modified clone</button>
<br>
<br>
<div id="chart-container">FusionCharts will render here</div>
<div id="cloned-chart-container">Cloned FusionCharts will render here</div>
<br>
</center>
CSS
#exact_copy {
height: 25px;
font-size: 13px;
}
#modified_copy {
height: 25px;
font-size: 13px;
}
body {
padding: 5px;
margin: 0 auto;
}
JavaScript
FusionCharts.ready(function () {
var revenueChart = new FusionCharts({
type: 'angulargauge',
renderAt: 'chart-container',
width: '400',
height: '250',
dataFormat: 'json',
dataSource: {
"chart": {
"caption": "Customer Satisfaction Score",
"subcaption": "Last week",
"lowerLimit": "0",
"upperLimit": "100",
"gaugeFillMix": "{dark-30},{light-60},{dark-10}",
"gaugeFillRatio": "15",
"theme": "fint"
},
"colorRange": {
"color": [
{
"minValue": "0",
"maxValue": "50",
"code": "#e44a00"
},
{
"minValue": "50",
"maxValue": "75",
"code": "#f8bd19"
},
{
"minValue": "75",
"maxValue": "100",
"code": "#6baa01"
}
]
},
"dials": {
"dial": [{
"value": "67"
}]
}
}
}).render();
function exact_copy() {
var cloned_chart = revenueChart.clone();
console.log(cloned_chart);
cloned_chart.render('cloned-chart-container');
}
function modified_copy() {
var cloned_chart_2 = revenueChart.clone({
type: 'angulargauge',
renderAt: 'cloned-chart-container'
}, true);
var strData = "&value=" + 30;
console.log(cloned_chart_2);
var copy = new FusionCharts(cloned_chart_2);
copy.render();
copy.feedData(strData);
copy.setChartAttribute("caption", "Hello");
}
document.getElementById("exact_copy").addEventListener("click",...