Add live samples back to docs for each chart type

diff --git a/docs/charts/bar.md b/docs/charts/bar.md
index 899786223757cbece79afe421ff35b0abc06f8d7..32cc32e9e4f95c07d6e5a1e552c8ea6a9fc07434 100644 (file)
--- 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
index e784a67e17629902cb37ac450911147b8ffc211e..d36f7eea41e1d8f7e7d0e78f9303b7171bfe56c3 100644 (file)
--- 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
index 4b79f57bb2796dc20c617e8267254f12a7d9c33d..35a7dbb56feec38746ce6da91f61f4e26b935129 100644 (file)
--- 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
index 4d0a89cc50470b8f7e21532476ef0d1068bae12b..6a2783e622307fe989d708b9969c18da9d815883 100644 (file)
--- 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
index 72c3e40853b0e9b28f8aa719c344da1a69260cbe..e7f43a2193bfca64917e74e2c9d47388859c3562 100644 (file)
--- 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.
\ No newline at end of file
+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
index 3da3d209a3a738454362f00ba8b2fa8fa3b45083..4c55556f17a11eb6a90078370eca60319e86b2a6 100644 (file)
--- 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
index 0a7da1df2e8c36c13304d6caa7b64707c5faafee..4728ad7771d0ea28a1a8f45b54321d98073cd2b0 100644 (file)
--- 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, {