This is a pie chart prepared especially for presenting hierarchical category structure and is dedicated for non-technical people. So it's simple, colorful and easy to use.
Download GitHubCategory | Cost |
---|
Below there is sample code just enough to get started with Hierarchical Pie:
<div class="chart-navigator clearfix" id="chart-navigator-1"> <div class="btn-group" id="pie-navigator"> <a href="#" class="btn btn-small" id="btnRoot" title="Go back to root" rel="tooltip"><i class="icon-double-angle-left"></i></a> <a href="#" class="btn btn-small" id="btnLevelUp" title="Go up one level" rel="tooltip"><i class="icon-angle-left"></i></a> </div> <ul class="breadcrumb"></ul> </div> <div class="row-fluid"> <div class="span6"> <div id="hierarchical-pie-demo" class="hierarchical-pie"></div> </div> <div class="span6"> <div id="pie-chart-legend-1"> <table class="table table-condensed table-legend"> <thead> <tr> <th></th> <th>Category</th> <th>Cost</th> </tr> </thead> <tbody></tbody> </table> </div> </div> </div> <script id="rowTemplate" type="text/template"> <td class="color-cell"> <span class="cat-color" style="background: {{color}};"></span> </td> <td> {{#isDirect}} <span title="Directly in this category" rel="tooltip"><i class="icon-info"></i></span> {{/isDirect}} {{category}} </td> <td class="cost">$ {{cost}}</td> </script>
[ { "id_category":"26", "category":"Cheeses", "cost":"541.11", "categories":[ { "cost":"230.00", "category":"European", "id_category":"455" }, { "id_category":"33", "category":"Australian", "cost":"113.90" } ] }, { "id_category":"70", "category":"Breads", "cost":"540.99", "categories":[ { "id_category":"71", "category":"Whole wheat", "cost":"18.26", "categories":[ { "id_category":"49", "category":"Graham bread", "cost":"16.06" } ] } ] } ]
var holder = $('#hierarchical-pie-demo'); holder.empty(); $.getJSON('sample-data.json', function(data) { new HierarchicalPie({ chartId : '#hierarchical-pie-demo', data : data, legendContainer : '#pie-chart-legend-1', navigation : '#chart-navigator-1' }); });