summaryrefslogtreecommitdiff
path: root/www/lib/Chart.js/docs/03-Radar-Chart.md
diff options
context:
space:
mode:
authorpliablepixels <pliablepixels@gmail.com>2016-04-10 10:47:35 -0400
committerpliablepixels <pliablepixels@gmail.com>2016-04-10 10:47:35 -0400
commita29f9a676a6ea3bad56ede05cd1a1c82ffbbe8e9 (patch)
tree7e6e6bfb23390a64344fdfe2272a5da04c2dd97c /www/lib/Chart.js/docs/03-Radar-Chart.md
parent42bc21f7d0b4acfeefa5f4c2708203be78f57778 (diff)
#219 - everything upgraded
Former-commit-id: 15f58d10df83feda8199a1b904433e625ef36b44
Diffstat (limited to 'www/lib/Chart.js/docs/03-Radar-Chart.md')
-rw-r--r--www/lib/Chart.js/docs/03-Radar-Chart.md177
1 files changed, 0 insertions, 177 deletions
diff --git a/www/lib/Chart.js/docs/03-Radar-Chart.md b/www/lib/Chart.js/docs/03-Radar-Chart.md
deleted file mode 100644
index 03dcf6e8..00000000
--- a/www/lib/Chart.js/docs/03-Radar-Chart.md
+++ /dev/null
@@ -1,177 +0,0 @@
----
-title: Radar Chart
-anchor: radar-chart
----
-
-###Introduction
-A radar chart is a way of showing multiple data points and the variation between them.
-
-They are often useful for comparing the points of two or more different data sets.
-
-<div class="canvas-holder">
- <canvas width="250" height="125"></canvas>
-</div>
-
-###Example usage
-
-```javascript
-var myRadarChart = new Chart(ctx).Radar(data, options);
-```
-
-###Data structure
-```javascript
-var data = {
- labels: ["Eating", "Drinking", "Sleeping", "Designing", "Coding", "Cycling", "Running"],
- datasets: [
- {
- label: "My First dataset",
- fillColor: "rgba(220,220,220,0.2)",
- strokeColor: "rgba(220,220,220,1)",
- pointColor: "rgba(220,220,220,1)",
- pointStrokeColor: "#fff",
- pointHighlightFill: "#fff",
- pointHighlightStroke: "rgba(220,220,220,1)",
- data: [65, 59, 90, 81, 56, 55, 40]
- },
- {
- label: "My Second dataset",
- fillColor: "rgba(151,187,205,0.2)",
- strokeColor: "rgba(151,187,205,1)",
- pointColor: "rgba(151,187,205,1)",
- pointStrokeColor: "#fff",
- pointHighlightFill: "#fff",
- pointHighlightStroke: "rgba(151,187,205,1)",
- data: [28, 48, 40, 19, 96, 27, 100]
- }
- ]
-};
-```
-For a radar chart, to provide context of what each point means, we include an array of strings that show around each point in the chart.
-For the radar chart data, we have an array of datasets. Each of these is an object, with a fill colour, a stroke colour, a colour for the fill of each point, and a colour for the stroke of each point. We also have an array of data values.
-
-The label key on each dataset is optional, and can be used when generating a scale for the chart.
-
-### Chart options
-
-These are the customisation options specific to Radar charts. These options are merged with the [global chart configuration options](#getting-started-global-chart-configuration), and form the options of the chart.
-
-
-```javascript
-{
- //Boolean - Whether to show lines for each scale point
- scaleShowLine : true,
-
- //Boolean - Whether we show the angle lines out of the radar
- angleShowLineOut : true,
-
- //Boolean - Whether to show labels on the scale
- scaleShowLabels : false,
-
- // Boolean - Whether the scale should begin at zero
- scaleBeginAtZero : true,
-
- //String - Colour of the angle line
- angleLineColor : "rgba(0,0,0,.1)",
-
- //Number - Pixel width of the angle line
- angleLineWidth : 1,
-
- //String - Point label font declaration
- pointLabelFontFamily : "'Arial'",
-
- //String - Point label font weight
- pointLabelFontStyle : "normal",
-
- //Number - Point label font size in pixels
- pointLabelFontSize : 10,
-
- //String - Point label font colour
- pointLabelFontColor : "#666",
-
- //Boolean - Whether to show a dot for each point
- pointDot : true,
-
- //Number - Radius of each point dot in pixels
- pointDotRadius : 3,
-
- //Number - Pixel width of point dot stroke
- pointDotStrokeWidth : 1,
-
- //Number - amount extra to add to the radius to cater for hit detection outside the drawn point
- pointHitDetectionRadius : 20,
-
- //Boolean - Whether to show a stroke for datasets
- datasetStroke : true,
-
- //Number - Pixel width of dataset stroke
- datasetStrokeWidth : 2,
-
- //Boolean - Whether to fill the dataset with a colour
- datasetFill : true,
- {% raw %}
- //String - A legend template
- legendTemplate : "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<datasets.length; i++){%><li><span style=\"background-color:<%=datasets[i].strokeColor%>\"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>"
- {% endraw %}
-}
-```
-
-
-You can override these for your `Chart` instance by passing a second argument into the `Radar` method as an object with the keys you want to override.
-
-For example, we could have a radar chart without a point for each on piece of data by doing the following:
-
-```javascript
-new Chart(ctx).Radar(data, {
- pointDot: false
-});
-// This will create a chart with all of the default options, merged from the global config,
-// and the Bar chart defaults but this particular instance will have `pointDot` set to false.
-```
-
-We can also change these defaults values for each Radar type that is created, this object is available at `Chart.defaults.Radar`.
-
-
-### Prototype methods
-
-#### .getPointsAtEvent( event )
-
-Calling `getPointsAtEvent(event)` on your Chart instance passing an argument of an event, or jQuery event, will return the point elements that are at that the same position of that event.
-
-```javascript
-canvas.onclick = function(evt){
- var activePoints = myRadarChart.getPointsAtEvent(evt);
- // => activePoints is an array of points on the canvas that are at the same position as the click event.
-};
-```
-
-This functionality may be useful for implementing DOM based tooltips, or triggering custom behaviour in your application.
-
-#### .update( )
-
-Calling `update()` on your Chart instance will re-render the chart with any updated values, allowing you to edit the value of multiple existing points, then render those in one animated render loop.
-
-```javascript
-myRadarChart.datasets[0].points[2].value = 50;
-// Would update the first dataset's value of 'Sleeping' to be 50
-myRadarChart.update();
-// Calling update now animates the position of Sleeping from 90 to 50.
-```
-
-#### .addData( valuesArray, label )
-
-Calling `addData(valuesArray, label)` on your Chart instance passing an array of values for each dataset, along with a label for those points.
-
-```javascript
-// The values array passed into addData should be one for each dataset in the chart
-myRadarChart.addData([40, 60], "Dancing");
-// The new data will now animate at the end of the chart.
-```
-
-#### .removeData( )
-
-Calling `removeData()` on your Chart instance will remove the first value for all datasets on the chart.
-
-```javascript
-myRadarChart.removeData();
-// Other points will now animate to their correct positions.
-``` \ No newline at end of file