Curriculum

Course: JavaScript Basic

Login

Curriculum

JavaScript Basic

JSHome

0/216

JS Versions

0/36

JS Objects

0/15

JS Funtions

0/22

JS Classes

0/3

JS Async

0/10

JS HTML DOM

0/25

JS Browser BOM

0/17

JS Web APIs

0/7

JS AJAX

0/11

JS JSON

0/16

JS vs jQuery

0/4

JS Graphics

0/7

Text lesson

JS Plotly

Plotly.js is a charting library offering more than 40 chart types, including:

Horizontal and Vertical Bar Charts
Pie and Donut Charts
Line Charts
Scatter and Bubble Plots
Equation Plots
3D Charts
Statistical Graphs
SVG Maps
and more

Plotly.js is free and open-source under the MIT license, meaning it is free to install and use. You can access the source code, report issues, and contribute via GitHub.

Bar Charts

Source Code

const xArray = [“Italy”,“France”,“Spain”,“USA”,“Argentina”];
const yArray = [55, 49, 44, 24, 15];

const data = [{
  x: xArray,
  y: yArray,
  type: “bar”,
  orientation:“v”,
  marker: {color:“rgba(0,0,255)”}
}];

const layout = {title:“World Wide Wine Production”};

Plotly.newPlot(“myPlot”, data, layout);

Horizontal Bar Charts

Source Code

const xArray = [55, 49, 44, 24, 15];
const yArray = [“Italy”,“France”,“Spain”,“USA”,“Argentina”];

const data = [{
  x: xArray,
  y: yArray,
  type: “bar”,
  orientation: “h”,
  marker: {color:“rgba(255,0,0,0.6)”}
}];

const layout = {title:“World Wide Wine Production”};

Plotly.newPlot(“myPlot”, data, layout);

Pie Charts

To display a pie chart instead of bars, replace x and y with labels and values, and set the type to “pie”.

const data = [{
  labels: xArray,
  values: yArray,
  type: “pie”
}];

Donut Charts

Donut chart

To transform a pie chart into a donut chart, simply add a hole in the center.

const data = [{
  labels: xArray,
  values: yArray,
  hole: .4,
  type: “pie”
}];

Plotting Equations

Source Code

let exp = “Math.sin(x)”;

// Generate values
const xValues = [];
const yValues = [];
for (let x = 0; x <= 10; x += 0.1) {
xValues.push(x);
yValues.push(eval(exp));
}

// Display using Plotly
const data = [{x:xValues, y:yValues, mode:“lines”}];
const layout = {title: “y = “ + exp};
Plotly.newPlot(“myPlot”, data, layout);

source code

To show scatter plots instead, set the mode to “markers.”

// Display using Plotly
const data = [{x:xValues, y:yValues, mode:“markers”}];
const layout = {title: “y = “ + exp};
Plotly.newPlot(“myPlot”, data, layout);

Scatter Plots

Source Code

const xArray = [50,60,70,80,90,100,110,120,130,140,150];
const yArray = [7,8,8,9,9,9,10,11,14,14,15];

// Define Data
const data = [{
  x: xArray,
  y: yArray,
  mode:“markers”,
  type:“scatter”
}];

// Define Layout
const 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);

Line Graphs

Source Code

const xArray = [50,60,70,80,90,100,110,120,130,140,150];
const yArray = [7,8,8,9,9,9,10,11,14,14,15];

// Define Data
const data = [{
  x: xArray,
  y: yArray,
  mode: “lines”,
  type: “scatter”
}];

// Define Layout
const 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);