@{
    ViewBag.Title = "Overview";
    Layout = "~/Views/Shared/_WidgetLayout.cshtml";
}

@section header
{
	<script id="scriptInit" type="text/javascript">
		$(document).ready(function () {
			$("#treemap").wijtreemap({
				labelFormatter: function () {
					return "Country: " + this.label + "<br/> GDP: " + this.value + " $BN";
				},
				maxColor: "#ff0000",
				minColor: "#ffaaaa",
				minColorValue: 0,
				data: [{
					label: "North America",
					value: 18625,
					items: [{
						label: "United States",
						value: 16800
					}, {
						label: "Canada",
						value: 1825
					}]
				}, {
					label: "Asia",
					value: 18934,
					items: [{
						label: "China",
						value: 9240
					}, {
						label: "Japan",
						value: 4901
					}, {
						label: "India",
						value: 1876
					}, {
						label: "South Korea",
						value: 1304
					}, {
						label: "Indonesia",
						value: 868
					}, {
						label: "Saudi Arabia",
						value: 745
					}]
				}, {
					label: "Europe",
					value: 16685,
					items: [{
						label: "Germany",
						value: 3634
					}, {
						label: "France",
						value: 2734
					}, {
						label: "United Kingdom",
						value: 2522
					}, {
						label: "Russia",
						value: 2096
					}, {
						label: "Italy",
						value: 2071
					}, {
						label: "Spain",
						value: 1358
					}, {
						label: "Turkey",
						value: 820
					}, {
						label: "Netherlands",
						value: 800
					}, {
						label: "Switzerland",
						value: 650
					}]
				}, {
					label: "South America",
					value: 4554,
					items: [{
						label: "Brazil",
						value: 2245
					}, {
						label: "Mexico",
						value: 1260
					}, {
						label: "Argentina",
						value: 611
					}, {
						label: "Venezuela",
						value: 438
					}]
				}, {
					label: "Australasia & Oceania",
					value: 1742,
					items: [{
						label: "Australia",
						value: 1560
					}, {
						label: "New Zealand",
						value: 182
					}]
				}, {
					label: "Africa",
					value: 872,
					items: [{
						label: "Nigeria",
						value: 522
					}, {
						label: "South Africa",
						value: 350
					}]
				}]
			});

			$("input:radio").change(function () {
				$("#treemap").wijtreemap("option", "type", this.value);
			});
		});
    </script>
	<style type="text/css">
        #targetContainer
        {
            position: relative;
            height:460px;
        }
        #targetContainer img
        {
            margin: 0;
            padding: 0;
            position: absolute;
            border: solid 3px #333;
        }
    </style>
}

<h2>Overview</h2>
<div class="main demo">
    <!-- Begin demo markup -->
    <div>
        <p>List of countries by GDP (nominal), List by the World Bank (2013). 
				<a target="_blank" href="http://en.wikipedia.org/wiki/List_of_countries_by_GDP_%28nominal%29">Data</a> </p>
            <div id="treemap" style="width:100%;height: 600px;"></div>
    </div>
    <!-- End demo markup -->
    <div class="demo-options">
        <!-- Begin options markup -->
		type: 
                <input type="radio" id="squarified" value="squarified" checked="checked" name="type"/><label for="squarified">squarified</label>
                <input type="radio" id="horizontal" value="horizontal" name="type" /><label for="horizontal">horizontal</label>
                <input type="radio" id="vertical" value="vertical" name="type" /><label for="vertical">vertical</label>
        <!-- End options markup -->
    </div>
</div>
@section description
{
    <p>
        The Wijmo TreeMap widget displays hierarchical data as a set of nested rectangles where the area of each rectangle is proportional to its value.
    </p>
}

