-
-
Notifications
You must be signed in to change notification settings - Fork 544
Add Layout template examples. Demonstrate how Container arrays are handled #1140
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Merged
Merged
Changes from all commits
Commits
Show all changes
2 commits
Select commit
Hold shift + click to select a range
File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
65 changes: 65 additions & 0 deletions
65
_posts/plotly_js/layout/layout-template/2018-10-18-adding-named-items.html
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,65 @@ | ||
| --- | ||
| name: Add Named Container Array Items | ||
| plot_url: https://codepen.io/plotly/embed/ZqxdrO/?height=547&theme-id=15263&default-tab=result | ||
| language: plotly_js | ||
| suite: layout_template | ||
| order: 1 | ||
| sitemap: false | ||
| arrangement: horizontal | ||
| markdown_content: | | ||
| Container array items in a template with a `name` attribute will be added to any plot using that template. | ||
| We can use this feature to create a template that adds watermarks to our chart by including named image items in `images`. | ||
| The example below also shows how to make one of these images invisible using the `templateitemname` attribute | ||
| if you don't want it to display for this specific chart. | ||
| --- | ||
| var baseLayout = { | ||
| title: 'Watermark Template', | ||
| // items with a `name` attribute in template.images will be added to any | ||
| // plot using this template | ||
| images: [{ | ||
| name: 'watermark_1', | ||
| source: "https://raw.githubusercontent.com/michaelbabyn/plot_data/master/benzene.png", | ||
| xref: "paper", | ||
| yref: "paper", | ||
| x: 0.40, | ||
| y: 0.9, | ||
| sizex: 0.7, | ||
| sizey: 0.7, | ||
| opacity: 0.1, | ||
| layer: "below" | ||
| }, | ||
| { | ||
| name: 'watermark_2', | ||
| source: "https://raw.githubusercontent.com/michaelbabyn/plot_data/master/naphthalene.png", | ||
| xref: "paper", | ||
| yref: "paper", | ||
| x: .75, | ||
| y: 0.3, | ||
| sizex: 0.25, | ||
| sizey: 0.25, | ||
| sizing: "stretch", | ||
| opacity: 0.2, | ||
| layer: "below" | ||
| }], | ||
| showlegend: false | ||
| }; | ||
|
|
||
| var template = {data: {}, layout: baseLayout}; | ||
|
|
||
| var data = [{ | ||
| x: [0, 1, 2, 3, 4, 5], | ||
| y: [2, 4, 3, 0, 5, 6], | ||
| }]; | ||
|
|
||
| var layoutUsingTemplate = { | ||
| template: template, | ||
| images: [ | ||
| { | ||
| // set the second watermark in the template to be invisible | ||
| templateitemname: 'watermark_2', | ||
| visible: false | ||
| } | ||
| ] | ||
| }; | ||
|
|
||
| Plotly.plot("myDiv", data, layoutUsingTemplate); |
66 changes: 66 additions & 0 deletions
66
_posts/plotly_js/layout/layout-template/2018-10-18-default-container.html
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,66 @@ | ||
| --- | ||
| name: Creating Default Item Values | ||
| plot_url: https://codepen.io/plotly/embed/xyWvVz/?height=547&theme-id=15263&default-tab=result | ||
| language: plotly_js | ||
| suite: layout_template | ||
| order: 3 | ||
| sitemap: false | ||
| arrangement: horizontal | ||
| markdown_content: | | ||
| Add an attribute called `annotationdefaults` to your template to set a default annotation object. Each | ||
| item in the plot using the template without a `templateitemname` attribute will have the default applied | ||
| to it. `annotationdefaults` can be manually added to a template or, if makeTemplate is used, the first un-named | ||
| item in annotations will be used as the default. | ||
|
|
||
| Note, this behaviour works for all container array objects. E.g for `images`, you would create `imagedefaults` in | ||
| your layout containing the default image item. | ||
| --- | ||
| var x = [0, 1, 2, 3, 4, 5]; | ||
| var y = [2, 4, 3, 0, 5, 6]; | ||
|
|
||
| var baseData = [{ | ||
| mode: 'lines', | ||
| error_y: {visible: true, width: 0}, | ||
| line: {color: 'teal'} | ||
| }]; | ||
|
|
||
| var baseLayout = { | ||
|
|
||
| // Plotly.makeTemplate will use the first annotation without a `name` attribute | ||
| // in the annotations array as the annotationdefaults for the template. | ||
| annotations: [ | ||
| { | ||
| text: 'DEFAULT ANNOTATION', | ||
| x: 0.1, | ||
| y: 1.1, | ||
| yref: 'paper', xref: 'paper', | ||
| showarrow: false, | ||
| font: {color:'teal', size: 14} | ||
| } | ||
| ], | ||
| showlegend: false | ||
| }; | ||
|
|
||
| // use Plotly.makeTemplate to generate the template object | ||
| var template = Plotly.makeTemplate({data: baseData, layout: baseLayout}); | ||
|
|
||
| var data = [{ | ||
| x: x, | ||
| y: y | ||
| }]; | ||
|
|
||
| var annotations = [ | ||
| {}, // An empty annotation object will copy annotationdefaults | ||
| { | ||
| text: 'Third point', | ||
| x: x[2], | ||
| y: y[2], | ||
| showarrow: true, | ||
| yref: 'y', xref: 'x', | ||
| font: {size: 20} // since there is no font.color attribute for this object, | ||
| // it will use the annotationdefaults' color | ||
| } | ||
| ]; | ||
| var layoutWithTemplate = {template: template, annotations: annotations}; | ||
|
|
||
| Plotly.plot("myDiv", data, layoutWithTemplate); | ||
14 changes: 14 additions & 0 deletions
14
_posts/plotly_js/layout/layout-template/2018-10-18-labels_plotly_js_index.html
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,14 @@ | ||
| --- | ||
| title: Plotly's template attribute and how to use it with Container arrays.| Examples | Plotly | ||
| name: Layout Template Examples | ||
| permalink: javascript/layout-template/ | ||
| description: Plotly's template attribute and how to use it with Container arrays. | ||
| layout: base | ||
| thumbnail: thumbnail/layout_template.jpg | ||
| language: plotly_js | ||
| page_type: example_index | ||
| has_thumbnail: false | ||
| display_as: layout_opt | ||
| --- | ||
| {% assign examples = site.posts | where:"language","plotly_js" | where:"suite","layout_template" | sort: "order" %} | ||
| {% include auto_examples.html examples=examples %} |
65 changes: 65 additions & 0 deletions
65
_posts/plotly_js/layout/layout-template/2018-10-18-matching-named-items.html
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,65 @@ | ||
| --- | ||
| name: Matching Named Template Container Items | ||
| plot_url: https://codepen.io/plotly/embed/rqvBqB/?height=547&theme-id=15263&default-tab=result | ||
| language: plotly_js | ||
| suite: layout_template | ||
| order: 2 | ||
| sitemap: false | ||
| arrangement: horizontal | ||
| markdown_content: | | ||
| A container item in your new plot with the attribute `templateitemname` matching one of the named | ||
| container items in the template will inherit attributes from item with the corresponding name. | ||
| If an item in the plot using the template has the `templateitemname` attribute but there is no | ||
| corresponding template container item by the same name, it will be marked as invisible in your new plot. | ||
| --- | ||
| var x = [0, 1, 2, 3, 4, 5]; | ||
| var y = [2, 4, 3, 0, 5, 6]; | ||
|
|
||
| var baseData = [{ | ||
| mode: 'lines', | ||
| error_y: {visible: true, width: 0}, | ||
| line: {color: 'teal'} | ||
| }]; | ||
|
|
||
| var baseLayout = { | ||
| title: 'Template Title', | ||
| annotations: [{ | ||
| text: 'First point', | ||
| name:'first', | ||
| yref: 'y', xref: 'x', | ||
| ay: 40, ax: 30, | ||
| font: {size: 16} | ||
| }], | ||
| showlegend: false | ||
| }; | ||
|
|
||
| // use Plotly.makeTemplate to generate the template object | ||
| var template = Plotly.makeTemplate({data: baseData, layout: baseLayout}); | ||
|
|
||
| var data = [{ | ||
| x: x, | ||
| y: y, | ||
| }]; | ||
|
|
||
| var annotations = [ | ||
|
|
||
| // plotly will look for an annotation with `name` matching `templateitemname` | ||
| // and use insert that annotation into the new plot. | ||
| { | ||
| templateitemname:'first', | ||
| x: x[0], | ||
| y: y[0], | ||
| }, | ||
| { | ||
| templateitemname: 'fourth', //since there is no template item with this name, | ||
| //this annotation will be set to invisible. | ||
| text: 'Fourth point', | ||
| x: x[3], | ||
| y: y[3], | ||
| showarrow: true, | ||
| yref: 'y', xref: 'x', | ||
| } | ||
| ]; | ||
| var layoutWithTemplate = {template: template, annotations: annotations}; | ||
|
|
||
| Plotly.plot("myDiv", data, layoutWithTemplate); |
16 changes: 16 additions & 0 deletions
16
_posts/plotly_js/layout/layout-template/2018-10-18-template-attribute.html
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,16 @@ | ||
| --- | ||
| name: The Layout Template Attribute | ||
| language: plotly_js | ||
| suite: layout_template | ||
| order: 0 | ||
| sitemap: false | ||
| arrangement: horizontal | ||
| markdown_content: | | ||
| The `template` attribute of `layout` allows a Plotly chart to take it's style and formatting from a `template` | ||
| object. `template`s can be generated using [Plotly.makeTemplate](https://plot.ly/javascript/plotlyjs-function-reference/#plotlymaketemplate) | ||
| or manually. `annotaions`, `updatemenus`, `images`, `shapes` and other container array objects in the Plotly `layout` | ||
| are specially handled by the template machinery to provide more flexibility when using these container arrays | ||
| in plots derived from these templates. | ||
|
|
||
| For more information see [https://plot.ly/javascript/reference/#layout-template](https://plot.ly/javascript/reference/#layout-template). | ||
| --- |
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
👏 great description