Plot.ly Pie chart

sample for Plot.ly Pie chart

by sundaramkumar

HTML

<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<div><h3>
Resource Usage
</h3></div>
<div style="width:900px;display:flex;">
	<div id="myDiv1" sstyle="flex: 0 0 65%;"></div>
	<div id="myDiv2" sstyle="flex: 1;"></div>
</div>	
<div style="width:900px;display:flex;">
	<div id="myDiv3" sstyle="flex: 0 0 65%;"></div>
	<div id="myDiv4" sstyle="flex: 1;"></div>
</div>

CSS

h3{
	text-align:center;
}

JavaScript

var vcpudata = [{
  values: [60,39,21],
  labels: ['Allocated', 'Used', 'Available'],
  type: 'pie'
}];

var vlandata = [{
  values: [12,3,9],
  labels: ['Allocated', 'Used', 'Available'],
  type: 'pie'
}];

var memorydata = [{
  values: [268,153,115],
  labels: ['Allocated', 'Used', 'Available'],
  type: 'pie'
}];

var diskdata = [{
  values: [2280,1194,1086],
  labels: ['Allocated', 'Used', 'Available'],
  type: 'pie'
}];

var pielayout1 = {
  height: 400,
  width: 350,
	title:"vCPUs",
  textinfo: 'label+text+value'
};
var pielayout2 = {
  height: 400,
  width: 350,
	title:"vLANs"
};
var pielayout3 = {
  height: 400,
  width: 350,
	title:"Memory"
};
var pielayout4 = {
  height: 400,
  width: 350,
	title:"Disk (MB)"
};

Plotly.newPlot('myDiv1', vcpudata, pielayout1, {displayModeBar: false});
Plotly.newPlot('myDiv2', vlandata, pielayout2, {displayModeBar: false});
Plotly.newPlot('myDiv3', memorydata, pielayout3, {displayModeBar: false});
Plotly.newPlot('myDiv4', diskdata, pielayout4, {displayModeBar: false});