From 9ea18065add95d80a807e67f27018caadcfeb44c Mon Sep 17 00:00:00 2001 From: etimberg Date: Sat, 1 Apr 2017 21:22:06 -0400 Subject: [PATCH] Add live samples back to docs for each chart type --- docs/charts/bar.md | 91 +++++++++++++++++++++++++++++++++++++++++ docs/charts/bubble.md | 21 ++++++++++ docs/charts/doughnut.md | 22 ++++++++++ docs/charts/line.md | 27 ++++++++++++ docs/charts/mixed.md | 37 ++++++++++++++++- docs/charts/polar.md | 26 ++++++++++++ docs/charts/radar.md | 48 ++++++++++++++++++++++ 7 files changed, 271 insertions(+), 1 deletion(-) diff --git a/docs/charts/bar.md b/docs/charts/bar.md index 899786223..32cc32e9e 100644 --- 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 e784a67e1..d36f7eea4 100644 --- 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 4b79f57bb..35a7dbb56 100644 --- 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 4d0a89cc5..6a2783e62 100644 --- 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 72c3e4085..e7f43a219 100644 --- 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 3da3d209a..4c55556f1 100644 --- 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 0a7da1df2..4728ad777 100644 --- 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, { -- 2.47.3