JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxcore.js"></script>
<script src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxtree.js"></script>
<link rel="stylesheet" href="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/styles/jqx.base.css">
<script src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxdragdrop.js"></script>
<script src="http://www.fusioncharts.com/demos/business/kpi-dashboard/view/JSClass/FusionCharts.js"></script>
<script src="http://www.fusioncharts.com/demos/business/kpi-dashboard/view/JSClass/FusionCharts.HC.js"></script>
<div id="tree"></div>
<button id="addButton">Add</button>
<div id="chart"/>
JavaScript
var defaultTreeSource = [{ label: "Root", expanded: false, id: "tree1" }];
$('#tree').jqxTree({ source: defaultTreeSource, width: '100%', height: '100%', allowDrag: true, allowDrop: false });
$('#addButton').on('click', function(){
$('#tree').jqxTree('addTo',{label:"Added", icon: ""}, $('#tree').jqxTree('getItems')[0].element);
});
var chart = new FusionCharts("http://www.fusioncharts.com/demos/business/kpi-dashboard/view/Charts/HLinearGauge.swf","fusion","303", "50", "0", "1");
chart.setDataXML("<chart borderAlpha='0' editMode='1' lowerLimitDisplay='1993.5' upperLimitDisplay='1996.49' lowerLimit='1993.5' upperLimit='1996.49' gaugeRoundRadius='0' showTickMarks='0' showGaugeLabels='1' pointerOnTop='1' pointerRadius='9' pointerBgAlpha='80' pointerBorderThickness='1' pointerBorderColor='aa0000' pointerBgColor='cc0000' decimals='0' showLimits='0' showValue='0' formatNumber='0' formatNumberScale='0' manageResize='1' ><pointers> <pointer value='1996' /></pointers><annotations><annotationGroup id='Grp1' showBelow='1'><annotation type='image' x='0' y='0' URL='Images/YearPanel.jpg'/></annotationGroup><annotationGroup id='AnnYear' showBelow='0'><annotation type='text' x='65' y='30' font='Georgia' size='22' isBold='0' alpha='100' color='FFFFFF' label='1994' /><annotation type='text' x='155' y='30' font='Georgia' size='22' isBold='0' alpha='100' color='FFFFFF' label='1995' /><annotation type='text' x='245' y='30' font='Georgia' size='22' isBold='0' alpha='100' color='FFFFFF' label='1996' /></annotationGroup></annotations><styles><definition><style name='Font1' type='font' face='Georgia' size='22' color='FFFFFF' alpha='20' bold='0' /><style name='Shadow1' type='Shadow' color='000000' alpha='50' Distance='2' /></definition><application><apply toObject='AnnYear' styles='Font1,Shadow1' /></application></styles></chart>");
chart.render('chart');