ASP.NET Core TreeMap Setup

Shield UI TreeMap for ASP.NET Core is a server-side wrapper component implemented as an ASP.NET Core MVC Helper.

For a detailed guide how to setup Shield UI for your ASP.NET Core project, check out this page.

The ASP.NET Core MVC helper API is a 1:1 mapping of the JavaScript TreeMap widget configuration, so you only have to get familiar with a single set of configuration options:

<div id="treemap" />

<script type="text/javascript">
    $(function () {
        $('#treemap').shieldTreeMap({
              cls: "treemap",
              dataSource: {
                    data: [
                        {
                            "title": "Fastest Cars in the World",
                            "value": 1301,
                            "items": [
                                {
                                    "title": "Hennessey Venom GT",
                                    "value": 435
                                },
                                {
                                    "title": "Vector Avtech WX8 Hypercar",
                                    "value": 435
                                },
                                {
                                    "title": "Bugatti Veyron 16.4 Super Sport",
                                    "value": 431
                                }
                            ]
                        }
                    ]
                }
          });
    });
</script>

<style>
      .treemap {
         max-width: 600px;
         height: 500px;
      }
</style>

<script type="text/javascript">
    var data = [
        {
            "title": "Fastest Cars in the World",
            "value": 1301,
            "items": [
                {
                    "title": "Hennessey Venom GT",
                    "value": 435
                },
                {
                    "title": "Vector Avtech WX8 Hypercar",
                    "value": 435
                },
                {
                    "title": "Bugatti Veyron 16.4 Super Sport",
                    "value": 431
                }
            ]
        }
    ];
</script>

@(Html.ShieldTreeMap()
          .Name("treemap")
          .Cls("treemap")
          .DataSource(ds => ds.Data(@data)))

<style>
      .treemap {
         max-width: 600px;
         height: 500px;
      }
</style>

To see the configuration options in action, please refer to our online demos.