Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit bc5d82f

Browse files
michaelbabynmichaelbabyn
authored
Merge pull request plotly#1140 from plotly/layout-template
Add Layout template examples. Demonstrate how Container arrays are handled
2 parents a0dd6aa + 4c9e52e commit bc5d82f

File tree

5 files changed

+226
-0
lines changed

5 files changed

+226
-0
lines changed

‎_posts/plotly_js/layout/layout-template/2018-10-18-adding-named-items.html

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
---
2+
name: Add Named Container Array Items
3+
plot_url: https://codepen.io/plotly/embed/ZqxdrO/?height=547&theme-id=15263&default-tab=result
4+
language: plotly_js
5+
suite: layout_template
6+
order: 1
7+
sitemap: false
8+
arrangement: horizontal
9+
markdown_content: |
10+
Container array items in a template with a `name` attribute will be added to any plot using that template.
11+
We can use this feature to create a template that adds watermarks to our chart by including named image items in `images`.
12+
The example below also shows how to make one of these images invisible using the `templateitemname` attribute
13+
if you don't want it to display for this specific chart.
14+
---
15+
var baseLayout = {
16+
title: 'Watermark Template',
17+
// items with a `name` attribute in template.images will be added to any
18+
// plot using this template
19+
images: [{
20+
name: 'watermark_1',
21+
source: "https://raw.githubusercontent.com/michaelbabyn/plot_data/master/benzene.png",
22+
xref: "paper",
23+
yref: "paper",
24+
x: 0.40,
25+
y: 0.9,
26+
sizex: 0.7,
27+
sizey: 0.7,
28+
opacity: 0.1,
29+
layer: "below"
30+
},
31+
{
32+
name: 'watermark_2',
33+
source: "https://raw.githubusercontent.com/michaelbabyn/plot_data/master/naphthalene.png",
34+
xref: "paper",
35+
yref: "paper",
36+
x: .75,
37+
y: 0.3,
38+
sizex: 0.25,
39+
sizey: 0.25,
40+
sizing: "stretch",
41+
opacity: 0.2,
42+
layer: "below"
43+
}],
44+
showlegend: false
45+
};
46+
47+
var template = {data: {}, layout: baseLayout};
48+
49+
var data = [{
50+
x: [0, 1, 2, 3, 4, 5],
51+
y: [2, 4, 3, 0, 5, 6],
52+
}];
53+
54+
var layoutUsingTemplate = {
55+
template: template,
56+
images: [
57+
{
58+
// set the second watermark in the template to be invisible
59+
templateitemname: 'watermark_2',
60+
visible: false
61+
}
62+
]
63+
};
64+
65+
Plotly.plot("myDiv", data, layoutUsingTemplate);

‎_posts/plotly_js/layout/layout-template/2018-10-18-default-container.html

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
---
2+
name: Creating Default Item Values
3+
plot_url: https://codepen.io/plotly/embed/xyWvVz/?height=547&theme-id=15263&default-tab=result
4+
language: plotly_js
5+
suite: layout_template
6+
order: 3
7+
sitemap: false
8+
arrangement: horizontal
9+
markdown_content: |
10+
Add an attribute called `annotationdefaults` to your template to set a default annotation object. Each
11+
item in the plot using the template without a `templateitemname` attribute will have the default applied
12+
to it. `annotationdefaults` can be manually added to a template or, if makeTemplate is used, the first un-named
13+
item in annotations will be used as the default.
14+
15+
Note, this behaviour works for all container array objects. E.g for `images`, you would create `imagedefaults` in
16+
your layout containing the default image item.
17+
---
18+
var x = [0, 1, 2, 3, 4, 5];
19+
var y = [2, 4, 3, 0, 5, 6];
20+
21+
var baseData = [{
22+
mode: 'lines',
23+
error_y: {visible: true, width: 0},
24+
line: {color: 'teal'}
25+
}];
26+
27+
var baseLayout = {
28+
29+
// Plotly.makeTemplate will use the first annotation without a `name` attribute
30+
// in the annotations array as the annotationdefaults for the template.
31+
annotations: [
32+
{
33+
text: 'DEFAULT ANNOTATION',
34+
x: 0.1,
35+
y: 1.1,
36+
yref: 'paper', xref: 'paper',
37+
showarrow: false,
38+
font: {color:'teal', size: 14}
39+
}
40+
],
41+
showlegend: false
42+
};
43+
44+
// use Plotly.makeTemplate to generate the template object
45+
var template = Plotly.makeTemplate({data: baseData, layout: baseLayout});
46+
47+
var data = [{
48+
x: x,
49+
y: y
50+
}];
51+
52+
var annotations = [
53+
{}, // An empty annotation object will copy annotationdefaults
54+
{
55+
text: 'Third point',
56+
x: x[2],
57+
y: y[2],
58+
showarrow: true,
59+
yref: 'y', xref: 'x',
60+
font: {size: 20} // since there is no font.color attribute for this object,
61+
// it will use the annotationdefaults' color
62+
}
63+
];
64+
var layoutWithTemplate = {template: template, annotations: annotations};
65+
66+
Plotly.plot("myDiv", data, layoutWithTemplate);

‎_posts/plotly_js/layout/layout-template/2018-10-18-labels_plotly_js_index.html

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
---
2+
title: Plotly's template attribute and how to use it with Container arrays.| Examples | Plotly
3+
name: Layout Template Examples
4+
permalink: javascript/layout-template/
5+
description: Plotly's template attribute and how to use it with Container arrays.
6+
layout: base
7+
thumbnail: thumbnail/layout_template.jpg
8+
language: plotly_js
9+
page_type: example_index
10+
has_thumbnail: false
11+
display_as: layout_opt
12+
---
13+
{% assign examples = site.posts | where:"language","plotly_js" | where:"suite","layout_template" | sort: "order" %}
14+
{% include auto_examples.html examples=examples %}

‎_posts/plotly_js/layout/layout-template/2018-10-18-matching-named-items.html

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
---
2+
name: Matching Named Template Container Items
3+
plot_url: https://codepen.io/plotly/embed/rqvBqB/?height=547&theme-id=15263&default-tab=result
4+
language: plotly_js
5+
suite: layout_template
6+
order: 2
7+
sitemap: false
8+
arrangement: horizontal
9+
markdown_content: |
10+
A container item in your new plot with the attribute `templateitemname` matching one of the named
11+
container items in the template will inherit attributes from item with the corresponding name.
12+
If an item in the plot using the template has the `templateitemname` attribute but there is no
13+
corresponding template container item by the same name, it will be marked as invisible in your new plot.
14+
---
15+
var x = [0, 1, 2, 3, 4, 5];
16+
var y = [2, 4, 3, 0, 5, 6];
17+
18+
var baseData = [{
19+
mode: 'lines',
20+
error_y: {visible: true, width: 0},
21+
line: {color: 'teal'}
22+
}];
23+
24+
var baseLayout = {
25+
title: 'Template Title',
26+
annotations: [{
27+
text: 'First point',
28+
name:'first',
29+
yref: 'y', xref: 'x',
30+
ay: 40, ax: 30,
31+
font: {size: 16}
32+
}],
33+
showlegend: false
34+
};
35+
36+
// use Plotly.makeTemplate to generate the template object
37+
var template = Plotly.makeTemplate({data: baseData, layout: baseLayout});
38+
39+
var data = [{
40+
x: x,
41+
y: y,
42+
}];
43+
44+
var annotations = [
45+
46+
// plotly will look for an annotation with `name` matching `templateitemname`
47+
// and use insert that annotation into the new plot.
48+
{
49+
templateitemname:'first',
50+
x: x[0],
51+
y: y[0],
52+
},
53+
{
54+
templateitemname: 'fourth', //since there is no template item with this name,
55+
//this annotation will be set to invisible.
56+
text: 'Fourth point',
57+
x: x[3],
58+
y: y[3],
59+
showarrow: true,
60+
yref: 'y', xref: 'x',
61+
}
62+
];
63+
var layoutWithTemplate = {template: template, annotations: annotations};
64+
65+
Plotly.plot("myDiv", data, layoutWithTemplate);

‎_posts/plotly_js/layout/layout-template/2018-10-18-template-attribute.html

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
---
2+
name: The Layout Template Attribute
3+
language: plotly_js
4+
suite: layout_template
5+
order: 0
6+
sitemap: false
7+
arrangement: horizontal
8+
markdown_content: |
9+
The `template` attribute of `layout` allows a Plotly chart to take it's style and formatting from a `template`
10+
object. `template`s can be generated using [Plotly.makeTemplate](https://plot.ly/javascript/plotlyjs-function-reference/#plotlymaketemplate)
11+
or manually. `annotaions`, `updatemenus`, `images`, `shapes` and other container array objects in the Plotly `layout`
12+
are specially handled by the template machinery to provide more flexibility when using these container arrays
13+
in plots derived from these templates.
14+
15+
For more information see [https://plot.ly/javascript/reference/#layout-template](https://plot.ly/javascript/reference/#layout-template).
16+
---

0 commit comments

Comments
 (0)