HTML Indented Tree

Source Code

  1 nv.addGraph(function() {
  2   var chart = nv.models.indentedTree()
  3                 .tableClass('table table-striped') //for bootstrap styling
  4                 .columns([
  5                   {
  6                     key: 'key',
  7                     label: 'Name',
  8                     showCount: true,
  9                     width: '75%',
 10                     type: 'text',
 11                     classes: function(d) { return d.url ? 'clickable name' : 'name' },
 12                     click: function(d) {
 13                        if (d.url) window.location.href = d.url;
 14                     }
 15                   },
 16                   {
 17                     key: 'type',
 18                     label: 'Type',
 19                     width: '25%',
 20                     type: 'text'
 21                   }
 22                 ]);
 23 
 24 
 25   d3.select('#chart')
 26       .datum(testData())
 27     .call(chart);
 28 
 29   return chart;
 30 });
 31 
 32 
 33 
 34 /**************************************
 35  * Example data
 36  */
 37 
 38 function testData() {
 39   return [{
 40     key: 'NVD3',
 41     url: 'http://philschatz.github.com/nvd3',
 42     values: [
 43       {
 44         key: "Charts",
 45         _values: [
 46           {
 47             key: "Simple Line",
 48             type: "Historical",
 49             url: "http://philschatz.github.com/nvd3/ghpages/line.html"
 50           },
 51           {
 52             key: "Scatter / Bubble",
 53             type: "Snapshot",
 54             url: "http://philschatz.github.com/nvd3/ghpages/scatter.html"
 55           },
 56           {
 57             key: "Stacked / Stream / Expanded Area",
 58             type: "Historical",
 59             url: "http://philschatz.github.com/nvd3/ghpages/stackedArea.html"
 60           },
 61           {
 62             key: "Discrete Bar",
 63             type: "Snapshot",
 64             url: "http://philschatz.github.com/nvd3/ghpages/discreteBar.html"
 65           },
 66           {
 67             key: "Grouped / Stacked Multi-Bar",
 68             type: "Snapshot / Historical",
 69             url: "http://philschatz.github.com/nvd3/ghpages/multiBar.html"
 70           },
 71           {
 72             key: "Horizontal Grouped Bar",
 73             type: "Snapshot",
 74             url: "http://philschatz.github.com/nvd3/ghpages/multiBarHorizontal.html"
 75           },
 76           {
 77             key: "Line and Bar Combo",
 78             type: "Historical",
 79             url: "http://philschatz.github.com/nvd3/ghpages/linePlusBar.html"
 80           },
 81           {
 82             key: "Cumulative Line",
 83             type: "Historical",
 84             url: "http://philschatz.github.com/nvd3/ghpages/cumulativeLine.html"
 85           },
 86           {
 87             key: "Line with View Finder",
 88             type: "Historical",
 89             url: "http://philschatz.github.com/nvd3/ghpages/lineWithFocus.html"
 90           }
 91         ]
 92       },
 93       {
 94         key: "Chart Components",
 95         _values: [
 96           {
 97             key: "Legend",
 98             type: "Universal",
 99             url: "http://philschatz.github.com/nvd3/examples/legend.html"
100           }
101         ]
102       }
103     ]
104   }];
105 }
comments powered by Disqus