HTML tutorial
CSS3 tutorial
Bootstrap tutorial
JavaScript tutorial
JQuery tutorial
AngularJS tutorial
React tutorial
NodeJS tutorial
PHP tutorial
Python tutorial
Python3 tutorial
Django tutorial
Linux tutorial
Docker tutorial
Ruby tutorial
Java tutorial
C tutorial
C ++ tutorial
Perl tutorial
JSP tutorial
Lua tutorial
Scala tutorial
Go tutorial
ASP.NET tutorial
C # tutorial
Plotly.js is a charting library thatcomes with over 40 chart types, 3D charts, statistical graphs, and SVG maps
var xArray = [50,60,70,80,90,100,110,120,130,140,150]; var yArray = [7,8,8,9,9,9,10,11,14,14,15]; var data = [{x:xArray, y:yArray, mode:"markers", type:"scatter"}]; var layout = { xaxis: {range: [40, 160], title: "Square Meters"}, yaxis: {range: [5, 16], title: "Price in Millions"}, title: "House Prices vs. Size" }; Plotly.newPlot("myPlot21", data, layout);
var xArray = [50,60,70,80,90,100,110,120,130,140,150];
var yArray = [7,8,8,9,9,9,10,11,14,14,15];
// Define Data
var data = [{
x: xArray,
y: yArray,
mode:"markers",
type:"scatter"
}];
// Define Layout
var layout = {
xaxis: {range: [40, 160], title: "Square Meters"},
yaxis: {range: [5, 16], title: "Price in Millions"},
title: "House Prices vs. Size"
};
Plotly.newPlot("myPlot", data, layout);
var xArray = [50,60,70,80,90,100,110,120,130,140,150]; var yArray = [7,8,8,9,9,9,10,11,14,14,15]; var data = [{x:xArray, y:yArray, mode:"lines", type:"scatter"}]; var layout = { xaxis: {range: [40, 160], title: "Square Meters"}, yaxis: {range: [5, 16], title: "Price in Millions"}, title: "House Prices vs Size" }; Plotly.newPlot("myPlot22", data, layout);
var xArray = [50,60,70,80,90,100,110,120,130,140,150];
var yArray = [7,8,8,9,9,9,10,11,14,14,15];
// Define Data
var data = [{
x: xArray,
y: yArray,
mode: "lines",
type: "scatter"
}];
// Define Layout
var layout = {
xaxis: {range: [40, 160], title: "Square Meters"},
yaxis: {range: [5, 16], title: "Price in Millions"},
title: "House Prices vs Size"
};
// Display using Plotly
Plotly.newPlot("myPlot", data, layout);
var exp = "x + 17"; // Generate values var xValues = []; var yValues = []; for (var x = 0; x <= 10; x += 1) { yValues.push(eval(exp)); xValues.push(x); } // Display using Plotly var data = [{x:xValues, y:yValues, mode:"lines"}]; var layout = {title: "y = " + exp}; Plotly.newPlot("myPlot13", data, layout);
var exp = "x + 17";
// Generate values
var xValues = [];
var yValues = [];
for (var x = 0; x <= 10; x += 1) {
yValues.push(eval(exp));
xValues.push(x);
}
// Define Data
var data = [{
x: xValues,
y: yValues,
mode: "lines"
}];
// Define Layout
var layout = {title: "y = " + exp};
// Display using Plotly
Plotly.newPlot("myPlot", data, layout);
var exp1 = "x"; var exp2 = "1.5*x"; var exp3 = "1.5*x + 7"; // Generate values var x1Values = []; var x2Values = []; var x3Values = []; var y1Values = []; var y2Values = []; var y3Values = []; for (var x = 0; x <= 10; x += 1) { x1Values.push(x); x2Values.push(x); x3Values.push(x); y1Values.push(eval(exp1)); y2Values.push(eval(exp2)); y3Values.push(eval(exp3)); } // Define Data var data = [ {x: x1Values, y: y1Values, mode:"lines"}, {x: x2Values, y: y2Values, mode:"lines"}, {x: x3Values, y: y3Values, mode:"lines"} ]; var layout = {title: "[y=" + exp1 + "] [y=" + exp2 + "] [y=" + exp3 + "]"}; // Display using Plotly Plotly.newPlot("myPlot14", data, layout);
var exp1 = "x";
var exp2 = "1.5*x";
var exp3 = "1.5*x + 7";
// Generate values
var x1Values = [];
var x2Values = [];
var x3Values = [];
var y1Values = [];
var y2Values = [];
var y3Values = [];
for (var x = 0; x <= 10; x += 1) {
x1Values.push(x);
x2Values.push(x);
x3Values.push(x);
y1Values.push(eval(exp1));
y2Values.push(eval(exp2));
y3Values.push(eval(exp3));
}
// Define Data
var data = [
{x: x1Values, y: y1Values, mode:"lines"},
{x: x2Values, y: y2Values, mode:"lines"},
{x: x3Values, y: y3Values, mode:"lines"}
];
// Define Layout
var layout = {title: "[y=" + exp1 + "] [y=" + exp2 + "] [y=" + exp3 + "]"};
// Display using Plotly
Plotly.newPlot("myPlot", data, layout);
var xArray = ["Italy","France","Spain","USA","Argentina"]; var yArray = [55, 49, 44, 24, 15]; var data = [{x:xArray, y:yArray, type:"bar"}]; var layout = {title:"World Wine Wine Production"}; Plotly.newPlot("myPlot23", data, layout);
var xArray = ["Italy","France","Spain","USA","Argentina"];
var yArray = [55, 49, 44, 24, 15];
var data = [{
x: xArray,
y: yArray,
type: "bar"
}];
var layout = {title:"World Wine Wine Production"};
Plotly.newPlot("myPlot", data, layout);
var xArray = [55, 49, 44, 24, 15]; var yArray = ["Italy ","France ","Spain ","USA ","Argentina "]; var data = [{x:xArray, y:yArray, type:"bar", orientation:"h", marker: {color: 'rgba(255,0,0,0.6)'}}]; var layout = {title:"World Wine Wine Production"}; Plotly.newPlot("myPlot26", data, layout);
var xArray = [55, 49, 44, 24, 15];
var yArray = ["Italy","France","Spain","USA","Argentina"];
var data = [{
x: xArray,
y: yArray,
type: "bar",
orientation: "h"
}];
var layout = {title:"World Wine Wine Production"};
Plotly.newPlot("myPlot", data, layout);
var xArray = ["Italy","France","Spain","USA","Argentina"]; var yArray = [55, 49, 44, 24, 15]; var data = [{labels:xArray, values:yArray, type:"pie"}]; var layout = {title:"World Wine Wine Production"}; Plotly.newPlot("myPlot24", data, layout);
To display a pie instead of bars, change x and y to labels and values, and change the type to "pie":
var data = [{
labels: xArray,
values: yArray,
type: "pie"
}];
var xArray = ["Italy","France","Spain","USA","Argentina"]; var yArray = [55, 49, 44, 24, 15]; var data = [{labels:xArray, values:yArray, hole:.4, type:"pie"}]; var layout = {title:"World Wine Wine Production"}; Plotly.newPlot("myPlot25", data, layout);
To display a donut instead of a pie, add a hole:
var data = [{
labels: xArray,
values: yArray,
hole: .4,
type: "pie"
}];
var exp = "Math.sin(x)";
// Generate values
var xValues = [];
var yValues = [];
for (var x = 0; x <= 10; x += 0.1) {
yValues.push(eval(exp));
xValues.push(x);
}
// Display using Plotly
var data = [{x:xValues, y:yValues, mode:"lines"}];
var layout = {title: "y = " + exp};
Plotly.newPlot("myPlot11", data, layout);
var exp = "Math.sin(x)";
// Generate values
var xValues = [];
var yValues = [];
for (var x = 0; x <= 10; x += 0.1) {
yValues.push(eval(exp));
xValues.push(x);
}
// Display using Plotly
var data = [{x:xValues, y:yValues, mode:"lines"}];
var layout = {title: "y = " + exp};
Plotly.newPlot("myPlot", data, layout);
var exp = "Math.cos(x)";
// Generate values
var xValues = [];
var yValues = [];
for (var x = 0; x <= 10; x += 0.2) {
yValues.push(eval(exp));
xValues.push(x);
}
// Display using Plotly
var data = [{x:xValues, y:yValues, mode:"markers"}];
var layout = {title: "y = " + exp};
Plotly.newPlot("myPlot12", data, layout);