Why isn't this plot rendering?

plotly.js
1

I’m attempting to create a simple bar chart from a json array and there is no plot rendering. I’ve taken the bar chart example and have just added my own data via json variable and now nothing renders:

<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,
  y: y,
  type: 'bar'
};

Plotly.newPlot('myDiv', data);
2

Hello @swasheck,

Welcome to the community!

So, a thing to remember for plotly, data is a list.

Use this:

var data = [{
  x: [ "75th", "80th", "85th", "90th", "95th", "99th", "100th" ],
  y: y,
  type: 'bar'
}];
1 Like
3

thank you so much

1 Like