Histograms in Nodejs

How to make a histogram in nodejs. Seven examples of colored, horizontal, and normal histogram bar charts.

Basic Histogram

// Learn about API authentication here: https://plotly.com/nodejs/getting-started
// Find your api_key here: https://plotly.com/settings/api

var x = [];

for (var i = 0; i &lt; 500; i ++) {
	x[i] = Math.random();
}

require('plotly')(username, api_key);

var data = [
  {
    x: x,
    type: "histogram"
  }
];
var graphOptions = {filename: "basic-histogram", fileopt: "overwrite"};
plotly.plot(data, graphOptions, function (err, msg) {
    console.log(msg);
});

Horizontal Histogram

// Learn about API authentication here: https://plotly.com/nodejs/getting-started
// Find your api_key here: https://plotly.com/settings/api

var y = [];

for (var i = 0; i &lt; 500; i ++) {
	y[i] = Math.random();
}

require('plotly')(username, api_key);

var data = [
  {
    y: y,
    type: "histogram"
  }
];
var graphOptions = {filename: "horizontal-histogram", fileopt: "overwrite"};
plotly.plot(data, graphOptions, function (err, msg) {
    console.log(msg);
});

Overlaid Histgram

// Learn about API authentication here: https://plotly.com/nodejs/getting-started
// Find your api_key here: https://plotly.com/settings/api

var x0 = [];
var x1 = [];

for (var i = 0; i &lt; 500; i ++) {
	x0[i] = Math.random();
	x1[i] = Math.random() + 1;
}

require('plotly')(username, api_key);

var trace1 = {
  x: x0,
  opacity: 0.75,
  type: "histogram"
};
var trace2 = {
  x: x1,
  opacity: 0.75,
  type: "histogram"
};
var data = [trace1, trace2];
var layout = {barmode: "overlay"};
var graphOptions = {layout: layout, filename: "overlaid-histogram", fileopt: "overwrite"};
plotly.plot(data, graphOptions, function (err, msg) {
    console.log(msg);
});

Stacked Histograms

// Learn about API authentication here: https://plotly.com/nodejs/getting-started
// Find your api_key here: https://plotly.com/settings/api

var x0 = Math.random() * 500
var x1 = Math.random() * 500 + 1

require('plotly')(username, api_key);

var trace1 = {
  x: x0,
  type: "histogram"
};
var trace2 = {
  x: x1,
  type: "histogram"
};
var data = [trace1, trace2];
var layout = {barmode: "stack"};
var graphOptions = {layout: layout, filename: "stacked-histogram", fileopt: "overwrite"};
plotly.plot(data, graphOptions, function (err, msg) {
    console.log(msg);
});

Colored and Styled Histograms

// Learn about API authentication here: https://plotly.com/nodejs/getting-started
// Find your api_key here: https://plotly.com/settings/api

var x0 = [];
var x1 = [];

for (var i = 0; i &lt; 500; i ++) {
	x0[i] = Math.random();
	x1[i] = Math.random() + 1;
}

require('plotly')(username, api_key);

var trace1 = {
  x: x0,
  histnorm: "count",
  name: "control",
  autobinx: false,
  xbins: {
    start: -3.2,
    end: 2.8,
    size: 0.2
  },
  marker: {
    color: "fuchsia",
    line: {
      color: "grey",
      width: 0
    },
    opacity: 0.75
  },
  type: "histogram"
};
var trace2 = {
  x: x1,
  name: "experimental",
  autobinx: false,
  xbins: {
    start: -1.8,
    end: 4.2,
    size: 0.2
  },
  marker: {color: "rgb(255, 217, 102)"},
  opacity: 0.75,
  type: "histogram"
};
var data = [trace1, trace2];
var layout = {
  title: "Sampled Results",
  xaxis: {title: "Value"},
  yaxis: {title: "Count"},
  barmode: "overlay",
  bargap: 0.25,
  bargroupgap: 0.3
};
var graphOptions = {layout: layout, filename: "style-histogram", fileopt: "overwrite"};
plotly.plot(data, graphOptions, function (err, msg) {
    console.log(msg);
});