37 lines
1.3 KiB
JSON
Executable File
37 lines
1.3 KiB
JSON
Executable File
<!-- required files -->
|
|
<link href="../assets/plugins/nvd3/build/nv.d3.css" rel="stylesheet" />
|
|
<script src="../assets/plugins/d3/d3.min.js"></script>
|
|
<script src="../assets/plugins/nvd3/build/nv.d3.min.js"></script>
|
|
|
|
<div id="nv-donut-chart" class="h-250px"></div>
|
|
|
|
<script>
|
|
var pieChartData = [
|
|
{ 'label': 'One', 'value' : 29, 'color': app.color.red },
|
|
{ 'label': 'Two', 'value' : 12, 'color': app.color.orange },
|
|
{ 'label': 'Three', 'value' : 32, 'color': app.color.success },
|
|
{ 'label': 'Four', 'value' : 196, 'color': app.color.cyan },
|
|
{ 'label': 'Five', 'value' : 17, 'color': app.color.blue },
|
|
{ 'label': 'Six', 'value' : 98, 'color': app.color.purple },
|
|
{ 'label': 'Seven', 'value' : 13, 'color': app.color.gray500 },
|
|
{ 'label': 'Eight', 'value' : 5, 'color': app.color.componentColor }
|
|
];
|
|
|
|
nv.addGraph(function() {
|
|
var chart = nv.models.pieChart()
|
|
.x(function(d) { return d.label })
|
|
.y(function(d) { return d.value })
|
|
.showLabels(true)
|
|
.labelThreshold(.05)
|
|
.labelType("percent")
|
|
.donut(true)
|
|
.donutRatio(0.35);
|
|
|
|
d3.select('#nv-donut-chart').append('svg')
|
|
.datum(pieChartData)
|
|
.transition().duration(350)
|
|
.call(chart);
|
|
|
|
return chart;
|
|
});
|
|
</script> |