Add live samples back to docs for each chart type

chartjs · Apr 3, 2017 · 9ea1806 · 9ea1806
1 parent 35dcfe0
commit 9ea1806
Show file tree

Hide file tree

Showing 7 changed files with 271 additions and 1 deletion.
diff --git a/docs/charts/bar.md b/docs/charts/bar.md
@@ -1,6 +1,56 @@
 # Bar
 A bar chart provides a way of showing data values represented as vertical bars. It is sometimes used to show trend data, and the comparison of multiple data sets side by side.
 
+{% chartjs %}
+{
+    "type": "bar",
+    "data": {
+        "labels": [
+            "January", 
+            "February", 
+            "March", 
+            "April", 
+            "May", 
+            "June", 
+            "July"
+        ],
+        "datasets": [{
+            "label": "My First Dataset",
+            "data": [65, 59, 80, 81, 56, 55, 40],
+            "fill": false,
+            "backgroundColor": [
+                "rgba(255, 99, 132, 0.2)",
+                "rgba(255, 159, 64, 0.2)",
+                "rgba(255, 205, 86, 0.2)",
+                "rgba(75, 192, 192, 0.2)",
+                "rgba(54, 162, 235, 0.2)",
+                "rgba(153, 102, 255, 0.2)",
+                "rgba(201, 203, 207, 0.2)"
+            ],
+            "borderColor": [
+                "rgb(255, 99, 132)",
+                "rgb(255, 159, 64)",
+                "rgb(255, 205, 86)",
+                "rgb(75, 192, 192)",
+                "rgb(54, 162, 235)",
+                "rgb(153, 102, 255)",
+                "rgb(201, 203, 207)"
+            ],
+            "borderWidth": 1
+        }]
+    },
+    "options": {
+        "scales": {
+            "yAxes": [{
+                "ticks": {
+                    "beginAtZero": true
+                }
+            }]
+        }
+    }
+}
+{% endchartjs %}
+
 ## Example Usage
 ```javascript
 var myBarChart = new Chart(ctx, {
@@ -133,6 +183,47 @@ The following dataset properties are specific to stacked bar charts.
 
 # Horizontal Bar Chart
 A horizontal bar chart is a variation on a vertical bar chart. It is sometimes used to show trend data, and the comparison of multiple data sets side by side.
+{% chartjs %}
+{
+    "type": "horizontalBar",
+    "data": {
+        "labels": ["January", "February", "March", "April", "May", "June", "July"],
+        "datasets": [{
+            "label": "My First Dataset",
+            "data": [65, 59, 80, 81, 56, 55, 40],
+            "fill": false,
+            "backgroundColor": [
+                "rgba(255, 99, 132, 0.2)",
+                "rgba(255, 159, 64, 0.2)",
+                "rgba(255, 205, 86, 0.2)",
+                "rgba(75, 192, 192, 0.2)",
+                "rgba(54, 162, 235, 0.2)",
+                "rgba(153, 102, 255, 0.2)",
+                "rgba(201, 203, 207, 0.2)"
+            ],
+            "borderColor": [
+                "rgb(255, 99, 132)",
+                "rgb(255, 159, 64)",
+                "rgb(255, 205, 86)",
+                "rgb(75, 192, 192)",
+                "rgb(54, 162, 235)",
+                "rgb(153, 102, 255)",
+                "rgb(201, 203, 207)"
+            ],
+            "borderWidth": 1
+        }]
+    },
+    "options": {
+        "scales": {
+            "xAxes": [{
+                "ticks": {
+                    "beginAtZero": true
+                }
+            }]
+        }
+    }
+}
+{% endchartjs %}
 
 ## Example
 ```javascript

diff --git a/docs/charts/bubble.md b/docs/charts/bubble.md
@@ -2,6 +2,27 @@
 
 A bubble chart is used to display three dimensions of data at the same time. The location of the bubble is determined by the first two dimensions and the corresponding horizontal and vertical axes. The third dimension is represented by the size of the individual bubbles. 
 
+{% chartjs %}
+{
+    "type": "bubble",
+    "data": {
+        "datasets": [{
+            "label": "First Dataset",
+            "data": [{
+                "x": 20,
+                "y": 30,
+                "r": 15
+            }, {
+                "x": 40,
+                "y": 10,
+                "r": 10
+            }],
+            "backgroundColor": "rgb(255, 99, 132)"
+        }]
+    },
+}
+{% endchartjs %}
+
 ## Example Usage
 
 ```javascript

diff --git a/docs/charts/doughnut.md b/docs/charts/doughnut.md
@@ -7,6 +7,28 @@ Pie and doughnut charts are effectively the same class in Chart.js, but have one
 
 They are also registered under two aliases in the `Chart` core. Other than their different default value, and different alias, they are exactly the same.
 
+{% chartjs %}
+{
+    "type": "doughnut",
+    "data": {
+        "labels": [
+            "Red",
+            "Blue",
+            "Yellow",
+        ],
+        "datasets": [{
+            "label": "My First Dataset",
+            "data": [300, 50, 100],
+            "backgroundColor": [
+                "rgb(255, 99, 132)",
+                "rgb(54, 162, 235)",
+                "rgb(255, 205, 86)",
+            ]
+        }]
+    },
+}
+{% endchartjs %}
+
 ## Example Usage
 
 ```javascript

diff --git a/docs/charts/line.md b/docs/charts/line.md
@@ -1,6 +1,33 @@
 # Line
 A line chart is a way of plotting data points on a line. Often, it is used to show trend data, or the comparison of two data sets.
 
+{% chartjs %}
+{
+    "type": "line",
+    "data": {
+        "labels": [
+            "January", 
+            "February", 
+            "March", 
+            "April", 
+            "May", 
+            "June",
+            "July"
+        ],
+        "datasets": [{
+            "label": "My First Dataset",
+            "data": [65, 59, 80, 81, 56, 55, 40],
+            "fill": false,
+            "borderColor": "rgb(75, 192, 192)",
+            "lineTension": 0.1
+        }]
+    },
+    "options": {
+
+    }
+}
+{% endchartjs %}
+
 ## Example Usage
 ```javascript
 var myLineChart = new Chart(ctx, {

diff --git a/docs/charts/mixed.md b/docs/charts/mixed.md
@@ -34,4 +34,39 @@ var mixedChart = new Chart(ctx, {
 });
 ```
 
-At this point we have a chart rendering how we'd like. It's important to note that the default options for a line chart are not merged in this case. Only the options for the default type are merged in. In this case, that means that the default options for a bar chart are merged because that is the type specified by the `type` field.
+At this point we have a chart rendering how we'd like. It's important to note that the default options for a line chart are not merged in this case. Only the options for the default type are merged in. In this case, that means that the default options for a bar chart are merged because that is the type specified by the `type` field.
+
+{% chartjs %}
+{
+  "type": "bar",
+  "data": {
+    "labels": [
+      "January", 
+      "February", 
+      "March", 
+      "April"
+    ],
+    "datasets": [{
+      "label": "Bar Dataset",
+      "data": [10, 20, 30, 40],
+      "borderColor": "rgb(255, 99, 132)",
+      "backgroundColor": "rgba(255, 99, 132, 0.2)"
+    }, {
+      "label": "Line Dataset",
+      "data": [50, 50, 50, 50],
+      "type": "line",
+      "fill": false,
+      "borderColor": "rgb(54, 162, 235)"
+    }]
+  },
+  "options": {
+    "scales": {
+      "yAxes": [{
+        "ticks": {
+          "beginAtZero": true
+        }
+      }]
+    }
+  }
+}
+{% endchartjs %}
diff --git a/docs/charts/polar.md b/docs/charts/polar.md
@@ -4,6 +4,32 @@ Polar area charts are similar to pie charts, but each segment has the same angle
 
 This type of chart is often useful when we want to show a comparison data similar to a pie chart, but also show a scale of values for context.
 
+{% chartjs %}
+{
+    "type": "polarArea",
+    "data": {
+        "labels": [
+            "Red",
+            "Green",
+            "Yellow",
+            "Grey",
+            "Blue"
+        ],
+        "datasets": [{
+            "label": "My First Dataset",
+            "data": [11, 16, 7, 3, 14],
+            "backgroundColor": [
+                "rgb(255, 99, 132)",
+                "rgb(75, 192, 192)",
+                "rgb(255, 205, 86)",
+                "rgb(201, 203, 207)",
+                "rgb(54, 162, 235)"
+            ]
+        }]
+    },
+}
+{% endchartjs %}
+
 ## Example Usage
 
 ```javascript

diff --git a/docs/charts/radar.md b/docs/charts/radar.md
@@ -3,6 +3,54 @@ A radar chart is a way of showing multiple data points and the variation between
 
 They are often useful for comparing the points of two or more different data sets.
 
+{% chartjs %}
+{
+    "type": "radar",
+    "data": {
+        "labels": [
+            "Eating", 
+            "Drinking", 
+            "Sleeping", 
+            "Designing",
+            "Coding",
+            "Cycling",
+            "Running"
+        ],
+        "datasets": [{
+            "label": "My First Dataset",
+            "data": [65, 59, 90, 81, 56, 55, 40],
+            "fill": true,
+            "backgroundColor": "rgba(255, 99, 132, 0.2)",
+            "borderColor": "rgb(255, 99, 132)",
+            "pointBackgroundColor": "rgb(255, 99, 132)",
+            "pointBorderColor": "#fff",
+            "pointHoverBackgroundColor": "#fff",
+            "pointHoverBorderColor": "rgb(255, 99, 132)",
+            "fill": true
+        }, {
+            "label": "My Second Dataset",
+            "data": [28, 48, 40, 19, 96, 27, 100],
+            "fill": true,
+            "backgroundColor": "rgba(54, 162, 235, 0.2)",
+            "borderColor": "rgb(54, 162, 235)",
+            "pointBackgroundColor": "rgb(54, 162, 235)",
+            "pointBorderColor": "#fff",
+            "pointHoverBackgroundColor": "#fff",
+            "pointHoverBorderColor": "rgb(54, 162, 235)",
+            "fill": true
+        }]
+    },
+    "options": {
+        "elements": {
+            "line": {
+                "tension": 0,
+                "borderWidth": 3
+            }
+        }
+    }
+}
+{% endchartjs %}
+
 ## Example Usage
 ```javascript
 var myRadarChart = new Chart(ctx, {