Line and Scatter Plots in Nodejs
How to make line and scatter plots in nodejs. Seven examples of basic and colored line and scatter plots.
// Learn about API authentication here: https://plotly.com/nodejs/getting-started
// Find your api_key here: https://plotly.com/settings/api
require('plotly')(username, api_key);
var trace1 = {
x: [1, 2, 3, 4],
y: [10, 15, 13, 17],
type: "scatter"
};
var trace2 = {
x: [1, 2, 3, 4],
y: [16, 5, 11, 9],
type: "scatter"
};
var data = [trace1, trace2];
var graphOptions = {filename: "basic-line", fileopt: "overwrite"};
plotly.plot(data, graphOptions, function (err, msg) {
console.log(msg);
});
// Learn about API authentication here: https://plotly.com/nodejs/getting-started
// Find your api_key here: https://plotly.com/settings/api
require('plotly')(username, api_key);
var trace1 = {
x: [1, 2, 3, 4],
y: [10, 15, 13, 17],
mode: "markers",
type: "scatter"
};
var trace2 = {
x: [2, 3, 4, 5],
y: [16, 5, 11, 9],
mode: "lines",
type: "scatter"
};
var trace3 = {
x: [1, 2, 3, 4],
y: [12, 9, 15, 12],
mode: "lines+markers",
type: "scatter"
};
var data = [trace1, trace2, trace3];
var graphOptions = {filename: "line-scatter", fileopt: "overwrite"};
plotly.plot(data, graphOptions, function (err, msg) {
console.log(msg);
});
// Learn about API authentication here: https://plotly.com/nodejs/getting-started
// Find your api_key here: https://plotly.com/settings/api
require('plotly')(username, api_key);
var trace1 = {
x: [52698, 43117],
y: [53, 31],
mode: "markers",
name: "North America",
text: ["United States", "Canada"],
marker: {
color: "rgb(164, 194, 244)",
size: 12,
line: {
color: "white",
width: 0.5
}
},
type: "scatter"
};
var trace2 = {
x: [39317, 37236, 35650, 30066, 29570, 27159, 23557, 21046, 18007],
y: [33, 20, 13, 19, 27, 19, 49, 44, 38],
mode: "markers",
name: "Europe",
text: ["Germany", "Britain", "France", "Spain", "Italy", "Czech Rep.", "Greece", "Poland"],
marker: {
color: "rgb(255, 217, 102)",
size: 12,
line: {
color: "white",
width: 0.5
}
},
type: "scatter"
};
var trace3 = {
x: [42952, 37037, 33106, 17478, 9813, 5253, 4692, 3899],
y: [23, 42, 54, 89, 14, 99, 93, 70],
mode: "markers",
name: "Asia/Pacific",
text: ["Australia", "Japan", "South Korea", "Malaysia", "China", "Indonesia", "Philippines", "India"],
marker: {
color: "rgb(234, 153, 153)",
size: 12,
line: {
color: "white",
width: 0.5
}
},
type: "scatter"
};
var trace4 = {
x: [19097, 18601, 15595, 13546, 12026, 7434, 5419],
y: [43, 47, 56, 80, 86, 93, 80],
mode: "markers",
name: "Latin America",
text: ["Chile", "Argentina", "Mexico", "Venezuela", "Venezuela", "El Salvador", "Bolivia"],
marker: {
color: "rgb(142, 124, 195)",
size: 12,
line: {
color: "white",
width: 0.5
}
},
type: "scatter"
};
var data = [trace1, trace2, trace3, trace4];
var layout = {
title: "Quarter 1 Growth",
xaxis: {
title: "GDP per Capita",
showgrid: false,
zeroline: false
},
yaxis: {
title: "Percent",
showline: false
}
};
var graphOptions = {layout: layout, filename: "line-style", fileopt: "overwrite"};
plotly.plot(data, graphOptions, function (err, msg) {
console.log(msg);
});
// Learn about API authentication here: https://plotly.com/nodejs/getting-started
// Find your api_key here: https://plotly.com/settings/api
require('plotly')(username, api_key);
var trace1 = {
x: [1, 2, 3, 4, 5],
y: [1, 3, 2, 3, 1],
mode: "lines+markers",
name: "'linear'",
line: {shape: "linear"},
type: "scatter"
};
var trace2 = {
x: [1, 2, 3, 4, 5],
y: [6, 8, 7, 8, 6],
mode: "lines+markers",
name: "'spline'",
text: ["tweak line smoothness<br>with 'smoothing' in line object", "tweak line smoothness<br>with 'smoothing' in line object", "tweak line smoothness<br>with 'smoothing' in line object", "tweak line smoothness<br>with 'smoothing' in line object", "tweak line smoothness<br>with 'smoothing' in line object", "tweak line smoothness<br>with 'smoothing' in line object"],
line: {shape: "spline"},
type: "scatter"
};
var trace3 = {
x: [1, 2, 3, 4, 5],
y: [11, 13, 12, 13, 11],
mode: "lines+markers",
name: "'vhv'",
line: {shape: "vhv"},
type: "scatter"
};
var trace4 = {
x: [1, 2, 3, 4, 5],
y: [16, 18, 17, 18, 16],
mode: "lines+markers",
name: "'hvh'",
line: {shape: "hvh"},
type: "scatter"
};
var trace5 = {
x: [1, 2, 3, 4, 5],
y: [21, 23, 22, 23, 21],
mode: "lines+markers",
name: "'vh'",
line: {shape: "vh"},
type: "scatter"
};
var trace6 = {
x: [1, 2, 3, 4, 5],
y: [26, 28, 27, 28, 26],
mode: "lines+markers",
name: "'hv'",
line: {shape: "hv"},
type: "scatter"
};
var data = [trace1, trace2, trace3, trace4, trace5, trace6];
var layout = {legend: {
y: 0.5,
traceorder: "reversed",
font: {size: 16},
yref: "paper"
}};
var graphOptions = {layout: layout, filename: "line-shapes", fileopt: "overwrite"};
plotly.plot(data, graphOptions, function (err, msg) {
console.log(msg);
});