vault backup: 2023-10-02 15:58:18

Affected files: content/.obsidian/plugins/recent-files-obsidian/data.json content/.obsidian/workspace.json content/attachments/chart-js-example.png content/chart-js/Getting Started with Chart.js.md
windsuzu · Oct 2, 2023 · 893b2a8 · 893b2a8
1 parent 3210e55
commit 893b2a8
Show file tree

Hide file tree

Showing 4 changed files with 113 additions and 39 deletions.
diff --git a/content/.obsidian/plugins/recent-files-obsidian/data.json b/content/.obsidian/plugins/recent-files-obsidian/data.json
@@ -4,6 +4,10 @@
       "basename": "Getting Started with Chart.js",
       "path": "chart-js/Getting Started with Chart.js.md"
     },
+    {
+      "basename": "chart-js-example",
+      "path": "attachments/chart-js-example.png"
+    },
     {
       "basename": "Chart.js",
       "path": "chart-js/Chart.js.md"

diff --git a/content/.obsidian/workspace.json b/content/.obsidian/workspace.json
@@ -4,19 +4,11 @@
     "type": "split",
     "children": [
       {
-        "id": "847ac7d36f0cdf2d",
+        "id": "ccefd1ec911848b9",
         "type": "tabs",
         "children": [
           {
-            "id": "f38ee323ff5949da",
-            "type": "leaf",
-            "state": {
-              "type": "empty",
-              "state": {}
-            }
-          },
-          {
-            "id": "fee4288f56be25c4",
+            "id": "b26f3425ec37c71d",
             "type": "leaf",
             "state": {
               "type": "markdown",
@@ -27,8 +19,7 @@
               }
             }
           }
-        ],
-        "currentTab": 1
+        ]
       }
     ],
     "direction": "vertical"
@@ -165,23 +156,6 @@
               }
             }
           },
-          {
-            "id": "037f3688a94f0d49",
-            "type": "leaf",
-            "state": {
-              "type": "backlink",
-              "state": {
-                "file": "chart-js/Getting Started with Chart.js.md",
-                "collapseAll": false,
-                "extraContext": false,
-                "sortOrder": "alphabetical",
-                "showSearch": false,
-                "searchQuery": "",
-                "backlinkCollapsed": false,
-                "unlinkedCollapsed": true
-              }
-            }
-          },
           {
             "id": "9b559e6d5ccaf096",
             "type": "leaf",
@@ -221,6 +195,23 @@
               }
             }
           },
+          {
+            "id": "037f3688a94f0d49",
+            "type": "leaf",
+            "state": {
+              "type": "backlink",
+              "state": {
+                "file": "chart-js/Getting Started with Chart.js.md",
+                "collapseAll": false,
+                "extraContext": false,
+                "sortOrder": "alphabetical",
+                "showSearch": false,
+                "searchQuery": "",
+                "backlinkCollapsed": false,
+                "unlinkedCollapsed": false
+              }
+            }
+          },
           {
             "id": "df9b4c06e28df253",
             "type": "leaf",
@@ -229,12 +220,11 @@
               "state": {
                 "file": "chart-js/Getting Started with Chart.js.md",
                 "linksCollapsed": false,
-                "unlinkedCollapsed": true
+                "unlinkedCollapsed": false
               }
             }
           }
-        ],
-        "currentTab": 3
+        ]
       }
     ],
     "direction": "horizontal",
@@ -253,10 +243,11 @@
       "cmdr:Obsidian Git: Create backup": false
     }
   },
-  "active": "fee4288f56be25c4",
+  "active": "b26f3425ec37c71d",
   "lastOpenFiles": [
-    "chart-js/Chart.js.md",
+    "attachments/chart-js-example.png",
     "chart-js/Getting Started with Chart.js.md",
+    "chart-js/Chart.js.md",
     "pwa/Create a PWA.md",
     "index.md",
     "chart-js/f.md",

diff --git a/content/attachments/chart-js-example.png b/content/attachments/chart-js-example.png
diff --git a/content/chart-js/Getting Started with Chart.js.md b/content/chart-js/Getting Started with Chart.js.md
@@ -1,7 +1,7 @@
 ---
 title: Getting Started with Chart.js
 draft: false
-date: 2023-10-02 11:41
+date: 2023-10-02 15:48
 tags:
   - chart-js
   - learning
@@ -10,10 +10,89 @@ tags:
 > [!tldr] TL;DR
 > Write some tldr
 
-1. create package.json
-2. create index.html, the chart is responsive by default
-3. create js file to load the chart into canvas
-4. 
+In this note, I'm going to follow the [Step-by-step guide from Chart.js](https://www.chartjs.org/docs/latest/getting-started/usage.html), where I'll learn how to create a chart from scratch and explore all the fundamental concepts of [[Chart.js]], including chart types, elements, datasets, customization, plugins, components, and tree shaking.
+
+## Create a new project
+The first step is to create a project with this folder structure:
+```bash
+app
+├── package.json 
+└── src/ 
+	├── index.html 
+	└── draw.js
+```
+The official tutorial uses [Parcel](https://parceljs.org/) as its build tool, so we'll install [[Chart.js]] v4 and Parcel in our `package.json`.
+```json title="package.json"
+{
+  "name": "chartjs-example",
+  "version": "1.0.0",
+  "license": "MIT",
+  "scripts": {
+    "dev": "parcel src/index.html",
+    "build": "parcel build src/index.html"
+  },
+  "devDependencies": {
+    "parcel": "^2.6.2",
+    "prettier": "latest"
+  },
+  "dependencies": {
+    "chart.js": "^4.0.0"
+  }
+}
+```
+After creating `package.json`, we can execute an installation command, such as `npm install` or the equivalent command from other package managers. Next, we can create a `src` folder and place an `index.html` file inside it.  
+```html title="src/index.html"
+<!doctype html>
+<html lang="en">
+  <head>
+    <title>Chart.js example</title>
+  </head>
+  <body>
+    <div style="width: 800px"><canvas id="draw"></canvas></div>
+    <script type="module" src="draw.js"></script>
+  </body>
+</html>
+```
+Ideally, Chart.js helps us draw the chart inside a `canvas` element with an `id` while also ensuring the chart's responsiveness. This is why we create a `div` with an 800px width around the `canvas`.
+
+---
+## Draw the chart
+Drawing a chart is very easy, thanks to the simplicity of the APIs in [[Chart.js]] v4. The code below accomplishes the following tasks:
+1. We import `Chart` from `chart.js/auto`, which loads [all available Chart.js components](https://www.chartjs.org/docs/latest/getting-started/integration) but disallow tree-shaking (convenient for development).
+2. We initialize a `Chart` instance by providing two arguments: the first one is the canvas element, and the second one is the options object.
+3. To create a basic demonstration, we only need to specify the chart type (`bar`) and provide data. The data includes labels and an array of datasets ([[Chart.js]] supports multiple datasets for most chart types). Each dataset is assigned a label and contains an array of data points.
+
+```js title="src/draw.js"
+import Chart from "chart.js/auto";
+
+(async function () {
+  const data = [
+    { year: 2010, count: 10 },
+    { year: 2011, count: 20 },
+    { year: 2012, count: 15 },
+    { year: 2013, count: 25 },
+    { year: 2014, count: 22 },
+    { year: 2015, count: 30 },
+    { year: 2016, count: 28 },
+  ];
+
+  new Chart(document.getElementById("draw"), {
+    type: "bar",
+    data: {
+      labels: data.map((row) => row.year),
+      datasets: [
+        {
+          label: "Count by year",
+          data: data.map((row) => row.count),
+        },
+      ],
+    },
+  });
+})();
+```
+Now, you can run the example by using `npm run dev` and view the result at `localhost:1234`, which should look something like this:
+![[chart-js-example.png]]
+
 
 > [!info] References
 > - [Step-by-step guide | Chart.js (chartjs.org)](https://www.chartjs.org/docs/latest/getting-started/usage.html)