Highcharts.Tree with JSON

Initialising tree chart with JSON.

by Frantisek Skorunka

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://rawgit.com/skorunka/highcharts.tree/master/dist/tree.js"></script>
<script src="https://rawgit.com/skorunka/highcharts.tree/master/dist/highcharts.tree.js"></script>

<button id="btnRefresh">Refresh tree</button>
<div id="tree" style="margin: 20px; min-height: 500px; width: 900px;"></div>

JavaScript

$(function () {

	var date = new Date();
	var treeChartData = {
		tree: [
			{ id: 1, parentId: 0, content: { title: "asd", data: [date] } },
			{ id: 2, parentId: 1, content: { title: "asdas", data: [date] } },
			{ id: 3, parentId: 1, content: { title: "ada", data: [date] } },
			{ id: 4, parentId: 2, content: { title: "dfsf", data: [date] } },
			{ id: 5, parentId: 2, content: { title: "sdfsd HH", data: [date] } },
			{ id: 6, parentId: 3, content: { title: "sdfds d sdf", data: [date] } },
			{ id: 7, parentId: 3, content: { title: "sdf f sdf", data: [date] } },
			{ id: 8, parentId: 6, content: { title: "df pedsfr", data: [date] } },
			{ id: 9, parentId: 6, content: { title: "sdf sdf sdf", data: [date] } }]
	};

	var chartConfig = {
			chart: {
				type: "tree"
			},
			series: [{ data: [treeChartData], config: { node: { width: 200 } } }],
			title: { text: false },
			credits: { enabled: false },
			exporting: { enabled: true },
			colors: ["#74D0C5", "#F2AC54", "#ECD868"],
		};

	$("#tree").highcharts(chartConfig);
		
	$("#btnRefresh").on("click", function(){
		$(treeChartData.tree).each(function(){
			this.content.data[0] = new Date();
		});
		chartConfig.series[0].data[0] = treeChartData;
		$("#tree").highcharts(chartConfig);
	});
});