Test Plotly
Mar. 3rd 2026
6
Min.
Some sample test for Plotly
Plotly
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<div id="plotlyLine" style="width:100%;aspect-ratio:4/3;"></div>
<script>
document.addEventListener('DOMContentLoaded', function () {
Plotly.newPlot(
'plotlyLine',
[
{
x: [1,2,3,4,5],
y: [2,6,3,8,4],
type: 'scatter',
mode: 'lines'
}
],
{
title: 'Line Chart Example',
autosize: true
},
{
responsive: true
}
);
});
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<div id="plotlyBar" style="width:100%;aspect-ratio:4/3;"></div>
<script>
document.addEventListener('DOMContentLoaded', function () {
Plotly.newPlot(
'plotlyBar',
[
{
x: ['A', 'B', 'C', 'D'],
y: [20, 14, 23, 25],
type: 'bar'
}
],
{
title: 'Bar Chart Example',
autosize: true
},
{
responsive: true
}
);
});
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<div id="plotlyMultiLine" style="width:100%;aspect-ratio:4/3;"></div>
<script>
document.addEventListener('DOMContentLoaded', function () {
Plotly.newPlot(
'plotlyMultiLine',
[
{
x: [1, 2, 3, 4],
y: [10, 15, 13, 17],
type: 'scatter',
mode: 'lines+markers',
name: 'Series 1'
},
{
x: [1, 2, 3, 4],
y: [16, 5, 11, 9],
type: 'scatter',
mode: 'lines+markers',
name: 'Series 2'
}
],
{
title: 'Multiple Line Series',
autosize: true
},
{
responsive: true
}
);
});
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<div id="plotlyPie" style="width:100%;aspect-ratio:4/3;"></div>
<script>
document.addEventListener('DOMContentLoaded', function () {
Plotly.newPlot(
'plotlyPie',
[
{
values: [19, 26, 55],
labels: ['Residential', 'Commercial', 'Industrial'],
type: 'pie'
}
],
{
title: 'Pie Chart Example',
autosize: true
},
{
responsive: true
}
);
});
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<div id="plotlyHeatmap" style="width:100%;aspect-ratio:4/3;"></div>
<script>
document.addEventListener('DOMContentLoaded', function () {
Plotly.newPlot(
'plotlyHeatmap',
[
{
z: [
[1, 20, 30],
[20, 1, 60],
[30, 60, 1]
],
type: 'heatmap'
}
],
{
title: 'Heatmap Example',
autosize: true
},
{
responsive: true
}
);
});
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<div id="plotlyStyled" style="width:100%;aspect-ratio:4/3;"></div>
<script>
document.addEventListener('DOMContentLoaded', function () {
Plotly.newPlot(
'plotlyStyled',
[
{
x: [5, 10, 15, 20],
y: [10, 5, 8, 12],
mode: 'markers',
type: 'scatter',
marker: {
size: [10, 20, 30, 40]
}
}
],
{
title: 'Scatter with Variable Marker Size',
xaxis: { title: 'X Axis' },
yaxis: { title: 'Y Axis' },
autosize: true
},
{
responsive: true
}
);
});
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
<div id="plotlyFunctions" style="width:100%;height:500px;"></div>
<script>
document.addEventListener('DOMContentLoaded', function () {
const xValues = [];
const N = 1000;
const start = -10;
const end = 10;
for (let i = 0; i <= N; i++) {
xValues.push(start + (end - start) * i / N);
}
Plotly.newPlot(
'plotlyFunctions',
[
{
x: xValues,
y: xValues.map(x => Math.sin(x)),
type: 'scatter',
mode: 'lines',
name: 'sin(x)'
},
{
x: xValues,
y: xValues.map(x => Math.cos(x)),
type: 'scatter',
mode: 'lines',
name: 'cos(x)'
},
{
x: xValues,
y: xValues.map(x => Math.exp(-0.2 * x) * Math.cos(x)),
type: 'scatter',
mode: 'lines',
name: 'e^(-0.2x) cos(x)'
},
{
x: xValues,
y: xValues.map(x => 0.1 * x * x - 2),
type: 'scatter',
mode: 'lines',
name: '0.1x² - 2'
}
],
{
title: 'Multiple Continuous Mathematical Functions',
xaxis: { title: 'x' },
yaxis: { title: 'f(x)' },
showlegend: true,
autosize: true
},
{
responsive: true
}
);
});
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
<div id="vehicleForces" style="width:100%;aspect-ratio:4/3;"></div>
<script>
document.addEventListener('DOMContentLoaded', function () {
const x = [];
for (let i = 1; i <= 40; i++) {
x.push(i);
}
// Parameters (tweak to match your visual exactly)
const engineForce = 80; // constant engine force
const rrSlope = 1.2; // rolling resistance linear slope
const dragCoeff = 0.05; // quadratic drag coefficient
const engine = x.map(() => engineForce);
const rr = x.map(v => rrSlope * v);
const drag = x.map(v => dragCoeff * v * v);
const total = x.map((v, i) => rr[i] + drag[i]);
Plotly.newPlot(
'vehicleForces',
[
{
x: x,
y: engine,
type: 'scatter',
mode: 'lines',
name: 'engine'
},
{
x: x,
y: rr,
type: 'scatter',
mode: 'lines',
name: 'rr'
},
{
x: x,
y: drag,
type: 'scatter',
mode: 'lines',
name: 'drag'
},
{
x: x,
y: total,
type: 'scatter',
mode: 'lines',
name: 'rr+drag'
}
],
{
plot_bgcolor: '#f7f7f7',
xaxis: {
range: [1, 40],
showgrid: false
},
yaxis: {
showgrid: false
},
legend: {
orientation: 'h',
y: -0.2
},
autosize: true
},
{
responsive: true
}
);
});
</script>
Comments are disabled for this post