#set($assetsearcher = $mediaarchive.getSearcher("asset"))
<div class="container-fluid">
	<div class="row">
		<div class="col-md-6 ">
			<canvas id="usagechart"></canvas>
		</div>

		<div class="col-md-6">

			<ul class="list-group">
				<a href="#" class="list-group-item active"> [[Asset Types]] </a>
				#foreach($item in
				$breakdownhits.getAggregations().get("assettype_filesize").getBuckets())
				#foreach($subitem in $item.getAggregations())
				<li class="list-group-item"><span class="badge"
					title="$item.key">$!sizer.inEnglish($subitem.getValue()) </span>
					#set( $data = false)
					#set( $data = $mediaarchive.getData("assettype",$item.key))
					$context.getText($data)
					<br /></li> 
				#end
				#end

				<li class="list-group-item"><span class="badge">$!sizer.inEnglish($breakdownhits.getSum("filesize"))
				</span>[[ Total ]]</li>

			</ul>

		</div>

	</div>



</div>



<script>


var ctx = document.getElementById("usagechart");
var data =
{
        labels: [

#foreach($item in $breakdownhits.getAggregations().get("assettype_filesize").getBuckets())

	#set( $data = false)
	#set( $data = $mediaarchive.getData("assettype",$item.key))
	"${context.getText($data)}"
	#if($foreach.hasNext),#end

#end
       ],
       datasets: [{
            
            data: [
#foreach($item in $breakdownhits.getAggregations().get("assettype_filesize").getBuckets())
#foreach($subitem in $item.getAggregations())
$subitem.getValue() ,
#end
#end
                  
                   
                   ],
                   #set($count = 1)

        backgroundColor: [
#foreach($item in $breakdownhits.getAggregations().get("assettype_filesize").getBuckets())
#foreach($subitem in $item.getAggregations())
                #if($count != 1) , #end '$mediaarchive.getData("color", "$count").get("colorcode")'
                #set($count = $count + 1)
                #end
                #end
            ]
        
        
            
    }],

}

var myChart = new Chart(ctx, {
    type: 'pie',
    data: data
    
});
</script>