From 5ae7a8ef74727d10d9b7050c899f0e6d4db5067f Mon Sep 17 00:00:00 2001 From: tlylt Date: Mon, 4 Apr 2022 09:35:22 +0800 Subject: [PATCH 1/6] Add chart example --- docs/userGuide/usingHtmlJavaScriptCss.md | 78 ++++++++++++++++++++++++ 1 file changed, 78 insertions(+) diff --git a/docs/userGuide/usingHtmlJavaScriptCss.md b/docs/userGuide/usingHtmlJavaScriptCss.md index 3d67b3e1d8..25281eea21 100644 --- a/docs/userGuide/usingHtmlJavaScriptCss.md +++ b/docs/userGuide/usingHtmlJavaScriptCss.md @@ -5,6 +5,7 @@ title: "User Guide: {{ title }}" layout: userGuide.md + pageNav: 2 @@ -18,6 +19,7 @@ **A MarkBind source file can contain a mixture of HTML, JavaScript, and CSS** as a normal web page would. +## Markdown in HTML ==Text within HTML tags are considered plain text unless the text is preceded by a blank line,== in which case the text is parsed as Markdown text.
@@ -61,5 +63,81 @@ Alternatively, you can use `` (for _block_ Markdown elements such as h
+## JavaScript chart libraries +Popular chart libraries such as [Chart.js](https://www.chartjs.org/) and [Apache ECharts](https://echarts.apache.org) can be used in MarkBind to create beautiful charts, similar to how they are used in any HTML web page. The details of how to use these libraries are beyond the scope of this section, but you can find more infomration on their websites. In general, you will perform these 3 steps: +1. Import the library via a CDN or locally. +1. Specify a target HTML element to render the chart. +1. Initialize the chart with the data and options. + + + +As mentioned in the [above section](#markdown-in-html), you **should not** leave any blank lines within HTML elements unintentionally, to prevent misinterpreting them as Markdown instead of code/text. + + +{{ icon_example }} Here is an example of how to use Chart.js to create a Pie chart. + + +HTML + + + +
+ +
+ + + + +{{ icon_example }} Here is an example of how to use Apache ECharts to create a Bar chart. + + +HTML + + +
+ + + + {% from "njk/common.njk" import previous_next %} {{ previous_next('components/advanced', 'tweakingThePageStructure') }} From 24ebf8a741d12002380fe4ad1c9af1283320e5d1 Mon Sep 17 00:00:00 2001 From: tlylt Date: Mon, 4 Apr 2022 11:20:49 +0800 Subject: [PATCH 2/6] Update docs to generalize content --- docs/userGuide/usingHtmlJavaScriptCss.md | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/docs/userGuide/usingHtmlJavaScriptCss.md b/docs/userGuide/usingHtmlJavaScriptCss.md index 25281eea21..0be53ed259 100644 --- a/docs/userGuide/usingHtmlJavaScriptCss.md +++ b/docs/userGuide/usingHtmlJavaScriptCss.md @@ -63,7 +63,10 @@ Alternatively, you can use `` (for _block_ Markdown elements such as h -## JavaScript chart libraries +## JavaScript libraries +External JavaScript libraries can be included in MarkBind to add additional & wide-ranging features and functionalities. One such use case is to add a charting library for data visualisation. + +### Charts Popular chart libraries such as [Chart.js](https://www.chartjs.org/) and [Apache ECharts](https://echarts.apache.org) can be used in MarkBind to create beautiful charts, similar to how they are used in any HTML web page. The details of how to use these libraries are beyond the scope of this section, but you can find more infomration on their websites. In general, you will perform these 3 steps: 1. Import the library via a CDN or locally. 1. Specify a target HTML element to render the chart. From 62bd122f79ca0acfd63a716b0d0e9eac6898c6fc Mon Sep 17 00:00:00 2001 From: Liu YongLiang <41845017+tlylt@users.noreply.github.com> Date: Mon, 4 Apr 2022 12:05:24 +0800 Subject: [PATCH 3/6] Update docs/userGuide/usingHtmlJavaScriptCss.md Co-authored-by: Jovyn Tan <61113575+jovyntls@users.noreply.github.com> --- docs/userGuide/usingHtmlJavaScriptCss.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/userGuide/usingHtmlJavaScriptCss.md b/docs/userGuide/usingHtmlJavaScriptCss.md index 0be53ed259..79d865cab2 100644 --- a/docs/userGuide/usingHtmlJavaScriptCss.md +++ b/docs/userGuide/usingHtmlJavaScriptCss.md @@ -67,7 +67,7 @@ Alternatively, you can use `` (for _block_ Markdown elements such as h External JavaScript libraries can be included in MarkBind to add additional & wide-ranging features and functionalities. One such use case is to add a charting library for data visualisation. ### Charts -Popular chart libraries such as [Chart.js](https://www.chartjs.org/) and [Apache ECharts](https://echarts.apache.org) can be used in MarkBind to create beautiful charts, similar to how they are used in any HTML web page. The details of how to use these libraries are beyond the scope of this section, but you can find more infomration on their websites. In general, you will perform these 3 steps: +Popular chart libraries such as [Chart.js](https://www.chartjs.org/) and [Apache ECharts](https://echarts.apache.org) can be used in MarkBind to create beautiful charts, similar to how they are used in any HTML web page. The details of how to use these libraries are beyond the scope of this section, but you can find more information on their websites. In general, you will perform these 3 steps: 1. Import the library via a CDN or locally. 1. Specify a target HTML element to render the chart. 1. Initialize the chart with the data and options. From 16d1ee8a7b9306b2c7bb4bbe12d8bdba42864f71 Mon Sep 17 00:00:00 2001 From: tlylt Date: Mon, 4 Apr 2022 12:16:48 +0800 Subject: [PATCH 4/6] Update comments --- docs/userGuide/usingHtmlJavaScriptCss.md | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/docs/userGuide/usingHtmlJavaScriptCss.md b/docs/userGuide/usingHtmlJavaScriptCss.md index 79d865cab2..9a48657d64 100644 --- a/docs/userGuide/usingHtmlJavaScriptCss.md +++ b/docs/userGuide/usingHtmlJavaScriptCss.md @@ -77,7 +77,7 @@ Popular chart libraries such as [Chart.js](https://www.chartjs.org/) and [Apache As mentioned in the [above section](#markdown-in-html), you **should not** leave any blank lines within HTML elements unintentionally, to prevent misinterpreting them as Markdown instead of code/text. -{{ icon_example }} Here is an example of how to use Chart.js to create a Pie chart. +{{ icon_example }} Here is an example of how to use Chart.js to create a pie chart. HTML @@ -88,7 +88,9 @@ As mentioned in the [above section](#markdown-in-html), you **should not** leave