texttemplate.js tutorial (#1565)

Mahdis-z · Joseph Damiba · nicolaskruchten · nicolaskruchten · commit 834e51244579 · 2020-01-08T20:27:50.000-05:00
* texttemplate.js tutorial

* textemplate example charts will be inlined once branch is merged

* revive old PR

* fix ci

* fix ci

Co-authored-by: Joseph Damiba &lt;Joseph.damiba@plot.ly&gt;
Co-authored-by: Nicolas Kruchten &lt;nicolas@kruchten.com&gt;
diff --git a/_posts/plotly_js/fundamentals/texttemplate/2019-10-21-add_text_template.html b/_posts/plotly_js/fundamentals/texttemplate/2019-10-21-add_text_template.html
@@ -0,0 +1,19 @@
+---
+name: Add Text Template in Pie Chart
+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("myDiv", data)
diff --git a/_posts/plotly_js/fundamentals/texttemplate/2019-10-21-customize_text_template.html b/_posts/plotly_js/fundamentals/texttemplate/2019-10-21-customize_text_template.html
@@ -0,0 +1,23 @@
+---
+name: Customize Text Template
+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}<br>(%{a:.2f}, %{b:.2f}, %{c:.2f})",
+      textposition: "bottom center",
+      textfont:{'family': "Times", 'size': [18, 21, 20], 'color': ["IndianRed", "MediumPurple", "DarkOrange"]}
+}];
+
+Plotly.newPlot("myDiv", data)
diff --git a/_posts/plotly_js/fundamentals/texttemplate/2019-10-21-date-in-text-template.html b/_posts/plotly_js/fundamentals/texttemplate/2019-10-21-date-in-text-template.html
@@ -0,0 +1,31 @@
+---
+name: Set Date in Text Template
+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("myDiv", data, layout)
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
@@ -0,0 +1,15 @@
+---
+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: file_settings
+page_type: u-guide
+order: 25
+---
+
+{% assign examples = site.posts | where:"language","plotly_js" | where:"suite","texttemplate" | sort: "order" %}
+{% include posts/auto_examples.html examples=examples %}
