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

Skip to content

Commit 68f7705

Browse files
michaelbabynJoseph Damiba
michaelbabyn
authored and
Joseph Damiba
committed
Add Layout template examples. To demonstrate how Container arrays are handled.
1 parent ec9f912 commit 68f7705

File tree

5 files changed

+227
-0
lines changed

5 files changed

+227
-0
lines changed

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

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
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.15,
25+
y: 0.85,
26+
sizex: 0.7,
27+
sizey: 0.7,
28+
sizing: "stretch",
29+
opacity: 0.1,
30+
layer: "below"
31+
},
32+
{
33+
name: 'watermark_2',
34+
source: "https://raw.githubusercontent.com/michaelbabyn/plot_data/master/naphthalene.png",
35+
xref: "paper",
36+
yref: "paper",
37+
x: .75,
38+
y: 0.3,
39+
sizex: 0.25,
40+
sizey: 0.25,
41+
sizing: "stretch",
42+
opacity: 0.2,
43+
layer: "below"
44+
}],
45+
showlegend: false
46+
};
47+
48+
var template = {data: {}, layout: baseLayout};
49+
50+
var data = [{
51+
x: [0, 1, 2, 3, 4, 5],
52+
y: [2, 4, 3, 0, 5, 6],
53+
}];
54+
55+
var layoutUsingTemplate = {
56+
template: template,
57+
images: [
58+
{
59+
// set the second watermark in the template to be invisible
60+
templateitemname: 'watermark_2',
61+
visible: false
62+
}
63+
]
64+
};
65+
66+
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)