From d95ec996947069ecb124a9e543708b74676dc347 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E2=80=9Cmahdis-z=E2=80=9D?= <“maahhddiiss@gmail.com”> Date: Tue, 22 Oct 2019 19:32:39 -0400 Subject: [PATCH 1/5] texttemplate.js tutorial --- .../2019-10-21-add_text_template.html | 20 ++++++++++++ .../2019-10-21-customize_text_template.html | 24 ++++++++++++++ .../2019-10-21-date-in-text-template.html | 32 +++++++++++++++++++ ...19-10-21-texttemplate_plotly_js_index.html | 16 ++++++++++ 4 files changed, 92 insertions(+) create mode 100755 _posts/plotly_js/transforms/texttemplate/2019-10-21-add_text_template.html create mode 100755 _posts/plotly_js/transforms/texttemplate/2019-10-21-customize_text_template.html create mode 100644 _posts/plotly_js/transforms/texttemplate/2019-10-21-date-in-text-template.html create mode 100755 _posts/plotly_js/transforms/texttemplate/2019-10-21-texttemplate_plotly_js_index.html diff --git a/_posts/plotly_js/transforms/texttemplate/2019-10-21-add_text_template.html b/_posts/plotly_js/transforms/texttemplate/2019-10-21-add_text_template.html new file mode 100755 index 000000000000..428ed7adaaf8 --- /dev/null +++ b/_posts/plotly_js/transforms/texttemplate/2019-10-21-add_text_template.html @@ -0,0 +1,20 @@ +--- +name: Add Text Template in Pie Chart +plot_url: https://codepen.io/plotly/embed/BaaWzjd/?height=500&theme-id=15263&default-tab=result +language: plotly_js +suite: texttemplate +order: 1 +sitemap: false +arrangement: horizontal +markdown_content: | + To show an arbitrary text in your chart you can use [texttemplate](https://plot.ly/python/reference/#pie-texttemplate), which is a template string used for rendering the information, and will override [textinfo](https://plot.ly/python/reference/#treemap-textinfo). +--- +var data = [{ + type: "pie", + values: [2, 5, 3, 2.5], + labels: ["R", "Python", "Java Script", "Matlab"], + texttemplate: "%{label}: %{value} (%{percent})", + textposition: "inside" +}]; + +Plotly.newPlot(graphDiv, data) diff --git a/_posts/plotly_js/transforms/texttemplate/2019-10-21-customize_text_template.html b/_posts/plotly_js/transforms/texttemplate/2019-10-21-customize_text_template.html new file mode 100755 index 000000000000..13f2d7c4cb13 --- /dev/null +++ b/_posts/plotly_js/transforms/texttemplate/2019-10-21-customize_text_template.html @@ -0,0 +1,24 @@ +--- +name: Customize Text Template +plot_url: https://codepen.io/plotly/embed/yLLggdL/?height=500&theme-id=15263&default-tab=result +language: plotly_js +suite: texttemplate +order: 2 +sitemap: false +arrangement: horizontal +markdown_content: | + The following example uses [textfont](https://plot.ly/python/reference/#scatterternary-textfont) to customize the added text. +--- +var data = [{ + type: "scatterternary", + a: [3, 2, 5], + b: [2, 5, 2], + c: [5, 2, 2], + mode: "markers+text", + text: ["A", "B", "C"], + texttemplate: "%{text}
(%{a:.2f}, %{b:.2f}, %{c:.2f})", + textposition: "bottom center", + textfont:{'family': "Times", 'size': [18, 21, 20], 'color': ["IndianRed", "MediumPurple", "DarkOrange"]} +}]; + +Plotly.newPlot(graphDiv, data) \ No newline at end of file diff --git a/_posts/plotly_js/transforms/texttemplate/2019-10-21-date-in-text-template.html b/_posts/plotly_js/transforms/texttemplate/2019-10-21-date-in-text-template.html new file mode 100644 index 000000000000..18a1db5bcb92 --- /dev/null +++ b/_posts/plotly_js/transforms/texttemplate/2019-10-21-date-in-text-template.html @@ -0,0 +1,32 @@ +--- +name: Set Date in Text Template +plot_url: https://codepen.io/plotly/embed/vYYxEbv/?height=500&theme-id=15263&default-tab=result +language: plotly_js +suite: texttemplate +order: 3 +sitemap: false +arrangement: horizontal +markdown_content: | + + The following example displays how to show date by setting [axis.type](https://plot.ly/javascript/reference/#layout-yaxis-type) in [funnel charts](https://plot.ly/javascript/funnel-charts/). +--- +var data = [{ + type: 'funnel', + name: 'Montreal', + orientation: "h", + y: ["2018-01-01", "2018-07-01", "2019-01-01", "2020-01-01"], + x: [100, 60, 40, 20], + textposition: "inside", + texttemplate: "%{label}" +},{ + type: "funnel", + name: 'Vancouver', + orientation: "h", + y: ["2018-01-01", "2018-07-01", "2019-01-01", "2020-01-01"], + x: [90, 70, 50, 10], + textposition: "inside", + textinfo: "label"}] + +var layout = {yaxis: {type: 'date'}} + +Plotly.newPlot(graphDiv, data, layout) diff --git a/_posts/plotly_js/transforms/texttemplate/2019-10-21-texttemplate_plotly_js_index.html b/_posts/plotly_js/transforms/texttemplate/2019-10-21-texttemplate_plotly_js_index.html new file mode 100755 index 000000000000..2cd58d859954 --- /dev/null +++ b/_posts/plotly_js/transforms/texttemplate/2019-10-21-texttemplate_plotly_js_index.html @@ -0,0 +1,16 @@ +--- +title: D3.js-based text template in Plotly.js | Examples | Plotly +name: Text Template +permalink: javascript/texttemplate/ +description: How to use D3.js-based text template in Plotly.js. +layout: base +thumbnail: thumbnail/texttemplate.jpg +language: plotly_js +has_thumbnail: true +display_as: transforms +page_type: example_index +order: 5 +--- + +{% assign examples = site.posts | where:"language","plotly_js" | where:"suite","texttemplate" | sort: "order" %} +{% include posts/auto_examples.html examples=examples %} From 44a7af96ee42f1eb6fa329c0b74578c7c593dea3 Mon Sep 17 00:00:00 2001 From: Joseph Damiba Date: Fri, 20 Dec 2019 01:08:02 -0500 Subject: [PATCH 2/5] textemplate example charts will be inlined once branch is merged --- .../transforms/texttemplate/2019-10-21-add_text_template.html | 3 +-- .../texttemplate/2019-10-21-customize_text_template.html | 3 +-- .../texttemplate/2019-10-21-date-in-text-template.html | 3 +-- 3 files changed, 3 insertions(+), 6 deletions(-) diff --git a/_posts/plotly_js/transforms/texttemplate/2019-10-21-add_text_template.html b/_posts/plotly_js/transforms/texttemplate/2019-10-21-add_text_template.html index 428ed7adaaf8..2edabafec2a3 100755 --- a/_posts/plotly_js/transforms/texttemplate/2019-10-21-add_text_template.html +++ b/_posts/plotly_js/transforms/texttemplate/2019-10-21-add_text_template.html @@ -1,6 +1,5 @@ --- name: Add Text Template in Pie Chart -plot_url: https://codepen.io/plotly/embed/BaaWzjd/?height=500&theme-id=15263&default-tab=result language: plotly_js suite: texttemplate order: 1 @@ -17,4 +16,4 @@ textposition: "inside" }]; -Plotly.newPlot(graphDiv, data) +Plotly.newPlot("myDiv", data) diff --git a/_posts/plotly_js/transforms/texttemplate/2019-10-21-customize_text_template.html b/_posts/plotly_js/transforms/texttemplate/2019-10-21-customize_text_template.html index 13f2d7c4cb13..011678514d2c 100755 --- a/_posts/plotly_js/transforms/texttemplate/2019-10-21-customize_text_template.html +++ b/_posts/plotly_js/transforms/texttemplate/2019-10-21-customize_text_template.html @@ -1,6 +1,5 @@ --- name: Customize Text Template -plot_url: https://codepen.io/plotly/embed/yLLggdL/?height=500&theme-id=15263&default-tab=result language: plotly_js suite: texttemplate order: 2 @@ -21,4 +20,4 @@ textfont:{'family': "Times", 'size': [18, 21, 20], 'color': ["IndianRed", "MediumPurple", "DarkOrange"]} }]; -Plotly.newPlot(graphDiv, data) \ No newline at end of file +Plotly.newPlot("myDiv", data) \ No newline at end of file diff --git a/_posts/plotly_js/transforms/texttemplate/2019-10-21-date-in-text-template.html b/_posts/plotly_js/transforms/texttemplate/2019-10-21-date-in-text-template.html index 18a1db5bcb92..9d870e783733 100644 --- a/_posts/plotly_js/transforms/texttemplate/2019-10-21-date-in-text-template.html +++ b/_posts/plotly_js/transforms/texttemplate/2019-10-21-date-in-text-template.html @@ -1,6 +1,5 @@ --- name: Set Date in Text Template -plot_url: https://codepen.io/plotly/embed/vYYxEbv/?height=500&theme-id=15263&default-tab=result language: plotly_js suite: texttemplate order: 3 @@ -29,4 +28,4 @@ var layout = {yaxis: {type: 'date'}} -Plotly.newPlot(graphDiv, data, layout) +Plotly.newPlot("myDiv", data, layout) From b1df9d6ab88a8b7da8bd58a13d789e3a778b7e86 Mon Sep 17 00:00:00 2001 From: Nicolas Kruchten Date: Wed, 8 Jan 2020 16:35:21 -0500 Subject: [PATCH 3/5] revive old PR --- .../texttemplate/2019-10-21-add_text_template.html | 0 .../texttemplate/2019-10-21-customize_text_template.html | 0 .../texttemplate/2019-10-21-date-in-text-template.html | 0 .../texttemplate/2019-10-21-texttemplate_plotly_js_index.html | 3 +-- 4 files changed, 1 insertion(+), 2 deletions(-) rename _posts/plotly_js/{transforms => fundamentals}/texttemplate/2019-10-21-add_text_template.html (100%) rename _posts/plotly_js/{transforms => fundamentals}/texttemplate/2019-10-21-customize_text_template.html (100%) rename _posts/plotly_js/{transforms => fundamentals}/texttemplate/2019-10-21-date-in-text-template.html (100%) rename _posts/plotly_js/{transforms => fundamentals}/texttemplate/2019-10-21-texttemplate_plotly_js_index.html (82%) diff --git a/_posts/plotly_js/transforms/texttemplate/2019-10-21-add_text_template.html b/_posts/plotly_js/fundamentals/texttemplate/2019-10-21-add_text_template.html similarity index 100% rename from _posts/plotly_js/transforms/texttemplate/2019-10-21-add_text_template.html rename to _posts/plotly_js/fundamentals/texttemplate/2019-10-21-add_text_template.html diff --git a/_posts/plotly_js/transforms/texttemplate/2019-10-21-customize_text_template.html b/_posts/plotly_js/fundamentals/texttemplate/2019-10-21-customize_text_template.html similarity index 100% rename from _posts/plotly_js/transforms/texttemplate/2019-10-21-customize_text_template.html rename to _posts/plotly_js/fundamentals/texttemplate/2019-10-21-customize_text_template.html diff --git a/_posts/plotly_js/transforms/texttemplate/2019-10-21-date-in-text-template.html b/_posts/plotly_js/fundamentals/texttemplate/2019-10-21-date-in-text-template.html similarity index 100% rename from _posts/plotly_js/transforms/texttemplate/2019-10-21-date-in-text-template.html rename to _posts/plotly_js/fundamentals/texttemplate/2019-10-21-date-in-text-template.html diff --git a/_posts/plotly_js/transforms/texttemplate/2019-10-21-texttemplate_plotly_js_index.html b/_posts/plotly_js/fundamentals/texttemplate/2019-10-21-texttemplate_plotly_js_index.html similarity index 82% rename from _posts/plotly_js/transforms/texttemplate/2019-10-21-texttemplate_plotly_js_index.html rename to _posts/plotly_js/fundamentals/texttemplate/2019-10-21-texttemplate_plotly_js_index.html index 2cd58d859954..6c8ae151e2e2 100755 --- a/_posts/plotly_js/transforms/texttemplate/2019-10-21-texttemplate_plotly_js_index.html +++ b/_posts/plotly_js/fundamentals/texttemplate/2019-10-21-texttemplate_plotly_js_index.html @@ -1,5 +1,4 @@ --- -title: D3.js-based text template in Plotly.js | Examples | Plotly name: Text Template permalink: javascript/texttemplate/ description: How to use D3.js-based text template in Plotly.js. @@ -7,7 +6,7 @@ thumbnail: thumbnail/texttemplate.jpg language: plotly_js has_thumbnail: true -display_as: transforms +display_as: file_settings page_type: example_index order: 5 --- From af7f83afa61da68dc83e4c33a2851dc2ab447d55 Mon Sep 17 00:00:00 2001 From: Nicolas Kruchten Date: Wed, 8 Jan 2020 16:39:58 -0500 Subject: [PATCH 4/5] fix ci --- .../texttemplate/2019-10-21-texttemplate_plotly_js_index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/_posts/plotly_js/fundamentals/texttemplate/2019-10-21-texttemplate_plotly_js_index.html b/_posts/plotly_js/fundamentals/texttemplate/2019-10-21-texttemplate_plotly_js_index.html index 6c8ae151e2e2..280681ad0fe0 100755 --- a/_posts/plotly_js/fundamentals/texttemplate/2019-10-21-texttemplate_plotly_js_index.html +++ b/_posts/plotly_js/fundamentals/texttemplate/2019-10-21-texttemplate_plotly_js_index.html @@ -8,7 +8,7 @@ has_thumbnail: true display_as: file_settings page_type: example_index -order: 5 +order: 25 --- {% assign examples = site.posts | where:"language","plotly_js" | where:"suite","texttemplate" | sort: "order" %} From 8f9377404fd4930161ceb72727b8e0710358db06 Mon Sep 17 00:00:00 2001 From: Nicolas Kruchten Date: Wed, 8 Jan 2020 16:42:23 -0500 Subject: [PATCH 5/5] fix ci --- .../texttemplate/2019-10-21-texttemplate_plotly_js_index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/_posts/plotly_js/fundamentals/texttemplate/2019-10-21-texttemplate_plotly_js_index.html b/_posts/plotly_js/fundamentals/texttemplate/2019-10-21-texttemplate_plotly_js_index.html index 280681ad0fe0..003355a01186 100755 --- a/_posts/plotly_js/fundamentals/texttemplate/2019-10-21-texttemplate_plotly_js_index.html +++ b/_posts/plotly_js/fundamentals/texttemplate/2019-10-21-texttemplate_plotly_js_index.html @@ -7,7 +7,7 @@ language: plotly_js has_thumbnail: true display_as: file_settings -page_type: example_index +page_type: u-guide order: 25 ---