<div style="width:100%;text-align:center;">
  <div id="{{id}}" style="width:92%;height:0;padding-bottom:60%;margin:auto;"></div>
{{#if subtext}}
  <p>{{title}} - {{subtext}}</p>
{{else}}  
  <p>{{title}}</p>
{{/if}}
  <p></p>
</div>
<script type="text/javascript">
  var option = {
    legend: {
      data: [
{{#each legenddata}}
        '{{this}}',
{{/each}}
      ],
      selected: {
{{#each legenddataselected}}
        '{{this.name}}': {{this.selected}},
{{/each}}
      },      
    },
    series: [
{{#each treemap}}    
    {
      name: '{{this.name}}',
      type: 'treemap',
      leafDepth: 1,
      levels: adarender.buildTreemapLevels(),
      data: {{{this.jsondata}}},
      roam: false,
    },
{{/each}}    
    ]
  };

  var chart_{{ id }} = adarender.initChart(document.getElementById('{{id}}'), option);
  adarender.onInitTreemap(chart_{{ id }});
</script>