Loading Please Wait...
Plotly.js is free and open-source under the MIT license. It is a charting library that comes with over 40+ chart types.
Plotly.js provides different ways to install and use such as CDN, NPM, and local downloaded files.
Visit Plotly.js website to learn more.
Include CDN delivery link in with the script tag. Need to regularly check and update for CDN URL.
<script src="https://cdn.plot.ly/plotly-2.27.0.min.js"></script>
You can download and use local files.
<script src="path/to/plotlyjs/plotly-2.27.0.min.js"></script>
<!DOCTYPE html>
<html>
<script src="https://cdn.plot.ly/plotly-2.27.0.min.js"></script>
<body>
<div id="plotDiv" style="width:100%;max-width:600px"></div>
<script>
var plot = document.getElementById("plotDiv");
var data = [
{
x: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
y: [10, 60, 40, 80, 30, 5, 0],
type: 'bar',
orientation:"v",
// v="Vertical" or h="Horizontal" (change x and y accordingly)
marker: { color:"#fc8d2a" }
}
];
const layout = { title:"Example Title" };
Plotly.newPlot(plot, data, layout);
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<script src="https://cdn.plot.ly/plotly-2.27.0.min.js"></script>
<body>
<div id="plotDiv" style="width:100%;max-width:600px"></div>
<script>
var plot = document.getElementById("plotDiv");
var data = [
{
values: [19, 26, 55],
labels: ['Residential', 'Non-Residential', 'Utility'],
type: 'pie',
// hole: .4, for donut charts
}
];
const layout = { title:"Example Title" };
Plotly.newPlot(plot, data, layout);
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<script src="https://cdn.plot.ly/plotly-2.27.0.min.js"></script>
<body>
<div id="plotDiv" style="width:100%;max-width:600px"></div>
<script>
var plot = document.getElementById("plotDiv");
var data = [
{
x: [1, 2, 3, 4],
y: [10, 15, 13, 17],
mode: 'markers',
type: 'scatter'
},
{
x: [2, 3, 4, 5],
y: [16, 5, 11, 9],
mode: 'lines',
type: 'scatter'
},
{
x: [1, 2, 3, 4],
y: [12, 9, 15, 12],
mode: 'lines+markers',
type: 'scatter'
}
];
const layout = { title:"Example Title" };
Plotly.newPlot(plot, data, layout);
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<script src="https://cdn.plot.ly/plotly-2.27.0.min.js"></script>
<body>
<div id="plotDiv" style="width:100%;max-width:600px"></div>
<script>
var plot = document.getElementById("plotDiv");
var data = [
{
x: [1, 2, 3, 4],
y: [10, 11, 12, 13],
mode: 'markers',
marker: {
size: [40, 60, 80, 100]
}
}
];
const layout = { title:"Example Title" };
Plotly.newPlot(plot, data, layout);
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<script src="https://cdn.plot.ly/plotly-2.27.0.min.js"></script>
<body>
<div id="plotDiv" style="width:100%;max-width:600px"></div>
<script>
var plot = document.getElementById("plotDiv");
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));
}
var data = [{x:xValues, y:yValues, mode:"lines"}];
const layout = { title:"Example Title" };
Plotly.newPlot(plot, data, layout);
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<script src="https://cdn.plot.ly/plotly-2.27.0.min.js"></script>
<body>
<div id="plotDiv" style="width:100%;max-width:600px"></div>
<script>
var plot = document.getElementById("plotDiv");
var pointCount = 3142;
var i, r;
var x = [];
var y = [];
var z = [];
var c = [];
for(i = 0; i < pointCount; i++){
r = i * (pointCount - i);
x.push(r * Math.cos(i / 30));
y.push(r * Math.sin(i / 30));
z.push(i);
c.push(i)
}
Plotly.newPlot(plot, [{
type: 'scatter3d',
mode: 'lines',
x: x,
y: y,
z: z,
opacity: 0.7,
line: { width: 10, color: c, colorscale: 'Viridis'}
}]);
</script>
</body>
</html>
How you feel about this blog:
Share this blog on:
If you find any error in the turtorials, or want to share your suggestion/feedback, feel free to send us email at: info@lynxsia.com
Contact Us
We are concern with various development process like website design & development, E-commerce development, Software development, Application development, SMS & Bulk SMS Provider, PWA Development, and many more..
Copyright © , Lynxsia IT Solutions, All rights reserved