FusionCharts API-Methods: getObjectReference

Created using FusionCharts Suite XT - www.fusioncharts.com

by FusionCharts

HTML

<script src="https://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script src="https://static.fusioncharts.com/code/latest/fusioncharts.charts.js"></script>
<script src="https://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js"></script>
<!-- This sample shows usage of getObjectReference() method -->
<div id="indicatorDiv">Method Name: <strong>getObjectReference()</strong>
	<p>Returns the DOMElement created inside the chart container by FusionCharts. The returned DOMElement here is the &lt;span&gt; element created by FusionCharts to render the chart. Click <a href="https://www.fusioncharts.com/dev/api/fusioncharts/fusioncharts-methods.html#static-getObjectReference" target="_blank">here</a> to read more about the <strong>getObjectReference()</strong> method.</p>
	<p>Click <strong>Remove the SVG element</strong> to remove it from the &lt;span&gt; element. Click <strong>Redraw</strong> to re-render the chart.</p>


<p class="text-center">
	<button id="get_ref">Remove the SVG element</button>
</p>
<p class="text-center">
	<button id="redraw">Redraw</button>
</p>
<div id="chart-container">FusionCharts will render here</div>
</div>

CSS

body {
    padding: 5px;
    margin: 0 auto;
}

strong{
  font-weight: bold;
}

.text-center {
  text-align: center;
}

p {
  margin: 10px auto;
}
#indicatorDiv {
    width: 500px;
    font-family:'Arial', 'Helvetica';
    font-size: 13px;
}
#get_ref {
    height: 25px;
    font-size: 13px;
}
#redraw {
    height: 25px;
    font-size: 13px;
}
.rep_text {
    font-family:'Arial', 'Helvetica';
    font-size: 13px;
}

JavaScript

FusionCharts.ready(function () {
    var analysisChart = new FusionCharts({
        id: "chart_1",
        type: 'stackedColumn3DLine',
        renderAt: 'chart-container',
        width: '500',
        height: '250',
        dataFormat: 'json',
        dataSource: {
            "chart": {
                "caption": "Quarterly Cost Analysis",
                    "subCaption": "Harry's SuperMart",
                    "numberprefix": "$",
                    "xaxisname": "Quarters",
                    "yaxisname": "Cost",
                    "theme": "fint",
                    "showvalues": "0",
                    "captionFontSize": "13"
            },
                "categories": [{
                "category": [{
                    "label": "Quarter 1"
                }, {
                    "label": "Quarter 2"
                }, {
                    "label": "Quarter 3"
                }, {
                    "label": "Quarter 4"
                }]
            }],
                "dataset": [{
                "seriesname": "Fixed Cost",
                    "data": [{
                    "value": "235000"
                }, {
                    "value": "225100"
                }, {
                    "value": "222000"
                }, {
                    "value": "230500"
                }]
            }, {
                "seriesname": "Variable Cost",
                    "data": [{
                    "value": "230000"
                }, {
                    "value": "143000"
                }, {
                    "value": "198000"
                }, {
                    "value": "327600"
                }]
            }, {
                "seriesname": "Budgeted cost",
                    "renderas": "Line",
                    "data": [{
                    "value": "455000"
                }, {
                    "value": "334000"
                }, {
                    "value": "426000"
                }, {
                    "value":...