nvd3/examples/pieChart.html

<!DOCTYPE html>
<meta charset="utf-8">
<link href="../src/nv.d3.css" rel="stylesheet" type="text/css">
<style>

body {
  overflow-y:scroll;
}

text {
  font: 12px sans-serif;
}

</style>
<body>

<svg id="test1"></svg>
<svg id="test2"></svg>

<script src="../lib/d3.v2.js"></script>
<script src="../nv.d3.js"></script>
<script src="../src/models/legend.js"></script>
<script src="../src/models/pie.js"></script>
<script src="../src/models/pieChart.js"></script>
<script src="../src/utils.js"></script>
<script> 

  var testdata = [
    { 
      key: "One",
      y: 5
    },
    { 
      key: "Two",
      y: 2
    },
    { 
      key: "Three",
      y: 9
    },
    { 
      key: "Four",
      y: 7
    },
    { 
      key: "Five",
      y: 4
    },
    {
      key: "Six",
      y: 3
    },
    {
      key: "Seven",
      y: .5
    }
  ];


historicalBarChart = [ 
  {
    key: "Cumulative Return",
    values: [
      { 
        "label" : "CDS / Options" ,
        "value" : 29.765957771107
      } , 
      { 
        "label" : "Cash" , 
        "value" : 0
      } , 
      { 
        "label" : "Corporate Bonds" , 
        "value" : 32.807804682612
      } , 
      { 
        "label" : "Equity" , 
        "value" : 196.45946739256
      } , 
      { 
        "label" : "Index Futures" ,
        "value" : 0.19434030906893
      } , 
      { 
        "label" : "Options" , 
        "value" : 98.079782601442
      } , 
      { 
        "label" : "Preferred" , 
        "value" : 13.925743130903
      } , 
      { 
        "label" : "Not Available" , 
        "value" : 5.1387322875705
      }
    ]
  }
];


nv.addGraph(function() {
    var width = 500,
        height = 500;

    var chart = nv.models.pieChart()
        .x(function(d) { return d.label })
        .y(function(d) { return d.value })
        //.showLabels(false)
        .color(d3.scale.category10().range())
        .width(width)
        .height(height);

      d3.select("#test1")
          .datum(historicalBarChart)
          //.datum(testdata)
        .transition().duration(1200)
          .attr('width', width)
          .attr('height', height)
          .call(chart);

    return chart;
});

nv.addGraph(function() {
    var width = 500,
        height = 500;

    var chart = nv.models.pieChart()
        .x(function(d) { return d.key })
        //.y(function(d) { return d.value })
        .values(function(d) { return d })
        //.labelThreshold(.08)
        //.showLabels(false)
        .color(d3.scale.category10().range())
        .width(width)
        .height(height)
        .donut(true);

      d3.select("#test2")
          //.datum(historicalBarChart)
          .datum([testdata])
        .transition().duration(1200)
          .attr('width', width)
          .attr('height', height)
          .call(chart);

    return chart;
});

</script>
new pieChart, and lots of updates to pie implementation... still need to tweak a few things, including animation when series are disabled 2012-06-28 23:06:07 +00:00			`<!DOCTYPE html>`
			`<meta charset="utf-8">`
renaming d3.css to nv.d3.css 2012-07-13 19:25:19 +00:00			`<link href="../src/nv.d3.css" rel="stylesheet" type="text/css">`
new pieChart, and lots of updates to pie implementation... still need to tweak a few things, including animation when series are disabled 2012-06-28 23:06:07 +00:00			`<style>`

			`body {`
			`overflow-y:scroll;`
			`}`

			`text {`
			`font: 12px sans-serif;`
			`}`

			`</style>`
			`<body>`

			`<svg id="test1"></svg>`
showing donut as well as pie in pie examples 2012-06-29 19:28:08 +00:00			`<svg id="test2"></svg>`
new pieChart, and lots of updates to pie implementation... still need to tweak a few things, including animation when series are disabled 2012-06-28 23:06:07 +00:00
			`<script src="../lib/d3.v2.js"></script>`
			`<script src="../nv.d3.js"></script>`
Pie charts should use the same data as discreteBar for ease of switching between 2012-07-01 05:39:53 +00:00			`<script src="../src/models/legend.js"></script>`
new pieChart, and lots of updates to pie implementation... still need to tweak a few things, including animation when series are disabled 2012-06-28 23:06:07 +00:00			`<script src="../src/models/pie.js"></script>`
			`<script src="../src/models/pieChart.js"></script>`
add utils.js dependency to examples to avoid having to compile while developing 2012-07-26 12:23:20 +00:00			`<script src="../src/utils.js"></script>`
new pieChart, and lots of updates to pie implementation... still need to tweak a few things, including animation when series are disabled 2012-06-28 23:06:07 +00:00			`<script>`

			`var testdata = [`
			`{`
			`key: "One",`
			`y: 5`
			`},`
			`{`
			`key: "Two",`
			`y: 2`
			`},`
			`{`
			`key: "Three",`
			`y: 9`
			`},`
			`{`
			`key: "Four",`
			`y: 7`
			`},`
			`{`
			`key: "Five",`
			`y: 4`
			`},`
			`{`
Issue #18 added labelThreshold to pie to disable showing the label under a given percent, defaults to 2% 2012-06-29 19:57:39 +00:00			`key: "Six",`
			`y: 3`
			`},`
			`{`
			`key: "Seven",`
			`y: .5`
new pieChart, and lots of updates to pie implementation... still need to tweak a few things, including animation when series are disabled 2012-06-28 23:06:07 +00:00			`}`
			`];`


Pie charts should use the same data as discreteBar for ease of switching between 2012-07-01 05:39:53 +00:00
			`historicalBarChart = [`
			`{`
			`key: "Cumulative Return",`
			`values: [`
			`{`
			`"label" : "CDS / Options" ,`
			`"value" : 29.765957771107`
			`} ,`
			`{`
			`"label" : "Cash" ,`
			`"value" : 0`
			`} ,`
			`{`
			`"label" : "Corporate Bonds" ,`
			`"value" : 32.807804682612`
			`} ,`
			`{`
			`"label" : "Equity" ,`
			`"value" : 196.45946739256`
			`} ,`
			`{`
			`"label" : "Index Futures" ,`
			`"value" : 0.19434030906893`
			`} ,`
			`{`
			`"label" : "Options" ,`
			`"value" : 98.079782601442`
			`} ,`
			`{`
			`"label" : "Preferred" ,`
			`"value" : 13.925743130903`
			`} ,`
			`{`
			`"label" : "Not Available" ,`
			`"value" : 5.1387322875705`
			`}`
			`]`
			`}`
			`];`



new pieChart, and lots of updates to pie implementation... still need to tweak a few things, including animation when series are disabled 2012-06-28 23:06:07 +00:00			`nv.addGraph(function() {`
			`var width = 500,`
			`height = 500;`

			`var chart = nv.models.pieChart()`
Pie charts should use the same data as discreteBar for ease of switching between 2012-07-01 05:39:53 +00:00			`.x(function(d) { return d.label })`
			`.y(function(d) { return d.value })`
new pieChart, and lots of updates to pie implementation... still need to tweak a few things, including animation when series are disabled 2012-06-28 23:06:07 +00:00			`//.showLabels(false)`
updates to pie chart, removed initial transition, but updated disabled/enable transition 2012-06-29 18:28:46 +00:00			`.color(d3.scale.category10().range())`
new pieChart, and lots of updates to pie implementation... still need to tweak a few things, including animation when series are disabled 2012-06-28 23:06:07 +00:00			`.width(width)`
			`.height(height);`

			`d3.select("#test1")`
Pie charts should use the same data as discreteBar for ease of switching between 2012-07-01 05:39:53 +00:00			`.datum(historicalBarChart)`
			`//.datum(testdata)`
new pieChart, and lots of updates to pie implementation... still need to tweak a few things, including animation when series are disabled 2012-06-28 23:06:07 +00:00			`.transition().duration(1200)`
			`.attr('width', width)`
			`.attr('height', height)`
			`.call(chart);`

			`return chart;`
showing donut as well as pie in pie examples 2012-06-29 19:28:08 +00:00			`});`

			`nv.addGraph(function() {`
			`var width = 500,`
			`height = 500;`
new pieChart, and lots of updates to pie implementation... still need to tweak a few things, including animation when series are disabled 2012-06-28 23:06:07 +00:00
showing donut as well as pie in pie examples 2012-06-29 19:28:08 +00:00			`var chart = nv.models.pieChart()`
updatd pie example to show how to use new value accessor to get the pie chart to accept the previous data format 2012-07-01 05:46:39 +00:00			`.x(function(d) { return d.key })`
			`//.y(function(d) { return d.value })`
			`.values(function(d) { return d })`
			`//.labelThreshold(.08)`
showing donut as well as pie in pie examples 2012-06-29 19:28:08 +00:00			`//.showLabels(false)`
			`.color(d3.scale.category10().range())`
			`.width(width)`
			`.height(height)`
			`.donut(true);`

			`d3.select("#test2")`
updatd pie example to show how to use new value accessor to get the pie chart to accept the previous data format 2012-07-01 05:46:39 +00:00			`//.datum(historicalBarChart)`
			`.datum([testdata])`
showing donut as well as pie in pie examples 2012-06-29 19:28:08 +00:00			`.transition().duration(1200)`
			`.attr('width', width)`
			`.attr('height', height)`
			`.call(chart);`

			`return chart;`
			`});`
new pieChart, and lots of updates to pie implementation... still need to tweak a few things, including animation when series are disabled 2012-06-28 23:06:07 +00:00
			`</script>`