Position nodes in drag node charts.
HTML
<script src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js"></script>
<script src="http://static.fusioncharts.com/code/latest/fusioncharts.powercharts.js"></script>
<script src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script src="http://static.fusioncharts.com/code/latest/fusioncharts.charts.js"></script>
<div class="container">
<div id="chart-container">FusionCharts will render here</div>
</div>
CSS
.container {
padding: 20px
}
#chart-container {
height: 500px;
width: 500px;
}
JavaScript
FusionCharts.ready(function () {
var visitChart = new FusionCharts({
"type": "dragnode",
"dataFormat": "json",
"id": "DiagramChart",
"height": "100%",
"width": "100%",
"containerBackgroundOpacity": "0",
"renderAt": "chart-container",
"dataSource": {
"chart": {
"yAxisMinValue":"0",
"yAxisMaxValue":"100",
"xAxisMinValue":"0",
"xAxisMaxValue":"100",
},
"dataset": [{
"plotBorderColor": "cccccc",
"data": [{
"id": "Start",
"name": "Start",
"width": "80",
"height": "25",
"radius": "50",
"imageUrl": "https://www.ascribedata.com/~fdyer/admin/skins/Ascribe/icons/10x10/plus.gif",
"imagenode": "1",
"imagealign": "top",
"imageheight": "10",
"imagewidth": "10",
"labelAlign": "middle",
"color": "f2f2f2",
"tooltext": "Start",
"x": "50",
"y":"90"
}, {
"id": "2",
"name": "employee Not active",
"width": "80",
"height": "25",
"radius": "50",
"imageUrl": "https://www.ascribedata.com/~fdyer/admin/skins/Ascribe/icons/10x10/plus.gif",
"imagenode": "1",
"imagealign": "top",
"imageheight": "10",
"imagewidth": "10",
"labelAlign": "middle",
"color": "f2f2f2",
"tooltext": "Not active",
...