<head>
	<!-- Load plotly.js into the DOM -->
	<script src='https://cdn.plot.ly/plotly-2.16.1.min.js'></script>
</head>

<body>
	<div id='myDiv'><!-- Plotly chart will be drawn inside this DIV --></div>
</body><head>
	<!-- Load plotly.js into the DOM -->
	<script src='https://cdn.plot.ly/plotly-2.16.1.min.js'></script>
</head>

<body>
	<div id='myDiv'><!-- Plotly chart will be drawn inside this DIV --></div>
</body>
var statdata = JSON.parse('[{"metric":"CPUUtilization","value":{"N":9922,"Mean":48.674235989305245,"StandardDeviation":18.034691858455464,"Skewness":0.33809113568897975,"Max":99.72891657591724,"Min":2.7458056553006247,"Median":47.39782111713045},"percentiles":{"75th":60.89675940945742,"80th":63.96798679413124,"85th":67.88966223981356,"90th":72.59463143335365,"95th":80.66226623063501,"99th":95.68918701978548,"100th":99.72891657591724}}]');

var metric = "CPUUtilization";
var data = statdata.filter((item) => item.metric == metric)[0];
var percentiles = Object.keys(data.percentiles).map((x) => ({
  percentile: x,
  value: data.percentiles[x]
}));

var x = percentiles.map(x => (x.percentile));
var y = percentiles.map(x => (x.value));

var data = [{
  x: x.join(","),
  y: y,
  type: 'bar'
}];

Plotly.newPlot('myDiv', data);
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.