Highcharts.Tree with JSON

Initialising tree chart with TreeRow.

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: 700px;"></div>

CSS

<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet" type="text/css">

JavaScript

$(function () {

	var treeData = [
		new TreeRow(1, null, { title: "Carded Sales", data: [18503802, 46681, 2] }),
		new TreeRow(2, 1, { title: "Households", data: [18503802, 46681, 2] }),
		new TreeRow(3, 1, { title: "Sales per Household", data: [18503802, 46681, 2] }),
		new TreeRow(4, 2, { title: "HH Penetration Retailer", data: [18503802, 46681, 2] }),
		new TreeRow(5, 2, { title: "Retailer HH", data: [18503802, 46681, 2] }),
		new TreeRow(6, 3, { title: "Sales per Basket", data: [18503802, 46681, 2] }),
		new TreeRow(7, 3, { title: "Sales per Basket", data: [18503802, 46681, 2] }),
		new TreeRow(8, 6, { title: "Units per Basket", data: [18503802, 46681, 2] }),
		new TreeRow(9, 6, { title: "Carded", data: [18503802, 46681, 2] })
	];

	var treeChartData = {
		tree: treeData,
		legends: [{ type: "money", text: "Review Period" },
				{ type: "money", text: "Absolute Uplift" },
				{ type: "percentage", text: "Relative Uplift" }]
	};

	$("#tree")
		.highcharts({
			chart: {
				type: "tree",
				style: { fontFamily: "Roboto" },
				config: { currencySymbol: "$", currencySymbolOnLeft: true }
			},
			series: [{ data: [treeChartData] }],
			title: { text: false },
			credits: { enabled: false },
			exporting: { enabled: true },
			colors: ["#74D0C5", "#F2AC54", "#ECD868"],
		});
});