Skip to content

Commit 7f4a982

Browse files
Nick-PearsonNick-Pearson
committed
fix rendering of subplot graphs
1 parent 1cb4115 commit 7f4a982

File tree

4 files changed

+147
-418
lines changed

4 files changed

+147
-418
lines changed

‎.github/workflows/book.yml

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ jobs:
2323
cd ${{ github.workspace }}/examples/scientific_charts && cargo run
2424
cd ${{ github.workspace }}/examples/financial_charts && cargo run
2525
cd ${{ github.workspace }}/examples/3d_charts && cargo run
26+
cd ${{ github.workspace }}/examples/subplots && cargo run
2627
- run: mdbook build docs/book
2728
- name: Checkout gh-pages branch
2829
run: |

‎docs/book/src/recipes/subplots/multiple_axes.md

Lines changed: 9 additions & 112 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
The following imports have been used to produce the plots below:
44

5-
```rust
5+
```rust,no_run
66
use plotly::common::{Font, AxisSide, Title};
77
use plotly::layout::{Axis, GridPattern, Layout, LayoutGrid, Legend, RowOrder};
88
use plotly::{Plot, Rgb, Scatter};
@@ -11,119 +11,16 @@ use plotly::{Plot, Rgb, Scatter};
1111
The `to_inline_html` method is used to produce the html plot displayed in this page.
1212

1313
## Two Y Axes
14-
```rust
15-
fn two_y_axes(show: bool) {
16-
let trace1 = Scatter::new(vec![1, 2, 3], vec![40, 50, 60]).name("trace1");
17-
let trace2 = Scatter::new(vec![2, 3, 4], vec![4, 5, 6])
18-
.name("trace2")
19-
.y_axis("y2");
20-
21-
let mut plot = Plot::new();
22-
plot.add_trace(trace1);
23-
plot.add_trace(trace2);
24-
25-
let layout = Layout::new()
26-
.title(Title::with_text("Double Y Axis Example"))
27-
.y_axis(Axis::new().title(Title::with_text("yaxis title")))
28-
.y_axis2(
29-
Axis::new()
30-
.title(Title::with_text("yaxis2 title").font(Font::new().color(Rgb::new(148, 103, 189))))
31-
.tick_font(Font::new().color(Rgb::new(148, 103, 189)))
32-
.overlaying("y")
33-
.side(AxisSide::Right),
34-
);
35-
plot.set_layout(layout);
36-
if show {
37-
plot.show();
38-
}
39-
println!("{}", plot.to_inline_html(Some("two_y_axes")));
40-
}
14+
```rust,no_run
15+
{{#include ../../../../../examples/subplots/src/main.rs:two_y_axes}}
4116
```
42-
<div id="two_y_axes" class="plotly-graph-div" style="height:100%; width:100%;"></div>
43-
<script type="text/javascript">
44-
window.PLOTLYENV=window.PLOTLYENV || {};
45-
if (document.getElementById("two_y_axes")) {
46-
var d3 = Plotly.d3;
47-
var image_element= d3.select('#image-export');
48-
var trace_0 = {"type":"scatter","x":[1,2,3],"y":[40,50,60],"name":"trace1"};
49-
var trace_1 = {"type":"scatter","x":[2,3,4],"y":[4,5,6],"name":"trace2","yaxis":"y2"};
50-
var data = [trace_0,trace_1];
51-
var layout = {"title":{"text":"Double Y Axis Example"},"yaxis":{"title":{"text":"yaxis title"}},"yaxis2":{"title":{"text":"yaxis2 title","font":{"color":"rgb(148, 103, 189)"}},"tickfont":{"color":"rgb(148, 103, 189)"},"side":"right","overlaying":"y"}};
52-
Plotly.newPlot('two_y_axes', data, layout, {"responsive": true});
53-
};
54-
</script>
55-
5617

57-
## Multiple Axes
58-
```rust
59-
fn multiple_axes(show: bool) {
60-
let trace1 = Scatter::new(vec![1, 2, 3], vec![4, 5, 6]).name("trace1");
61-
let trace2 = Scatter::new(vec![2, 3, 4], vec![40, 50, 60])
62-
.name("trace2")
63-
.y_axis("y2");
64-
let trace3 = Scatter::new(vec![4, 5, 6], vec![40_000, 50_000, 60_000]).y_axis("y3");
65-
let trace4 = Scatter::new(vec![5, 6, 7], vec![400_000, 500_000, 600_000]).y_axis("y4");
18+
{{#include ../../../../../examples/subplots/out/two_y_axes.html}}
6619

67-
let mut plot = Plot::new();
68-
plot.add_trace(trace1);
69-
plot.add_trace(trace2);
70-
plot.add_trace(trace3);
71-
plot.add_trace(trace4);
7220

73-
let layout = Layout::new()
74-
.title(Title::with_text("multiple y-axes example"))
75-
.width(800)
76-
.x_axis(Axis::new().domain(&[0.3, 0.7]))
77-
.y_axis(
78-
Axis::new()
79-
.title(Title::with_text("yaxis title").font(Font::new().color("#1f77b4")))
80-
.tick_font(Font::new().color("#1f77b4")),
81-
)
82-
.y_axis2(
83-
Axis::new()
84-
.title(Title::with_text("yaxis2 title").font(Font::new().color("#ff7f0e")))
85-
.tick_font(Font::new().color("#ff7f0e"))
86-
.anchor("free")
87-
.overlaying("y")
88-
.side(AxisSide::Left)
89-
.position(0.15),
90-
)
91-
.y_axis3(
92-
Axis::new()
93-
.title(Title::with_text("yaxis3 title").font(Font::new().color("#d62728")))
94-
.tick_font(Font::new().color("#d62728"))
95-
.anchor("x")
96-
.overlaying("y")
97-
.side(AxisSide::Right),
98-
)
99-
.y_axis4(
100-
Axis::new()
101-
.title(Title::with_text("yaxis4 title").font(Font::new().color("#9467bd")))
102-
.tick_font(Font::new().color("#9467bd"))
103-
.anchor("free")
104-
.overlaying("y")
105-
.side(AxisSide::Right)
106-
.position(0.85),
107-
);
108-
plot.set_layout(layout);
109-
if show {
110-
plot.show();
111-
}
112-
println!("{}", plot.to_inline_html(Some("multiple_axes")));
113-
}
21+
## Multiple Axes
22+
```rust,no_run
23+
{{#include ../../../../../examples/subplots/src/main.rs:multiple_axes}}
11424
```
115-
<div id="multiple_axes" class="plotly-graph-div" style="height:100%; width:100%;"></div>
116-
<script type="text/javascript">
117-
window.PLOTLYENV=window.PLOTLYENV || {};
118-
if (document.getElementById("multiple_axes")) {
119-
var d3 = Plotly.d3;
120-
var image_element= d3.select('#image-export');
121-
var trace_0 = {"type":"scatter","x":[1,2,3],"y":[4,5,6],"name":"trace1"};
122-
var trace_1 = {"type":"scatter","x":[2,3,4],"y":[40,50,60],"name":"trace2","yaxis":"y2"};
123-
var trace_2 = {"type":"scatter","x":[4,5,6],"y":[40000,50000,60000],"yaxis":"y3"};
124-
var trace_3 = {"type":"scatter","x":[5,6,7],"y":[400000,500000,600000],"yaxis":"y4"};
125-
var data = [trace_0,trace_1,trace_2,trace_3];
126-
var layout = {"title":{"text":"multiple y-axes example"},"width":800,"xaxis":{"domain":[0.3,0.7]},"yaxis":{"title":{"text":"yaxis title","font":{"color":"#1F77B4"}},"tickfont":{"color":"#1F77B4"}},"yaxis2":{"title":{"text":"yaxis2 title","font":{"color":"#FF7F0E"}},"tickfont":{"color":"#FF7F0E"},"anchor":"free","side":"left","overlaying":"y","position":0.15},"yaxis3":{"title":{"text":"yaxis3 title","font":{"color":"#D62728"}},"tickfont":{"color":"#D62728"},"anchor":"x","side":"right","overlaying":"y"},"yaxis4":{"title":{"text":"yaxis4 title","font":{"color":"#9467BD"}},"tickfont":{"color":"#9467BD"},"anchor":"free","side":"right","overlaying":"y","position":0.85}};
127-
Plotly.newPlot('multiple_axes', data, layout, {"responsive": true});
128-
};
129-
</script>
25+
26+
{{#include ../../../../../examples/subplots/out/multiple_axes.html}}

0 commit comments

Comments
 (0)