CR/LF correction

front/lib/AdminLTE/bower_components/chart.js/docs/01-Line-Chart.md

@@ -0,0 +1,166 @@
+---
+title: Line Chart
+anchor: line-chart
+---
+###Introduction
+A line chart is a way of plotting data points on a line.
+
+Often, it is used to show trend data, and the comparison of two data sets.
+
+<div class="canvas-holder">
+	<canvas width="250" height="125"></canvas>
+</div>
+
+###Example usage
+```javascript
+var myLineChart = new Chart(ctx).Line(data, options);
+```
+###Data structure
+
+```javascript
+var data = {
+	labels: ["January", "February", "March", "April", "May", "June", "July"],
+	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, 80, 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, 86, 27, 90]
+		}
+	]
+};
+```
+
+The line chart requires an array of labels for each of the data points. This is shown on the X axis.
+The data for line charts is broken up into an array of datasets. Each dataset has a colour for the fill, a colour for the line and colours for the points and strokes of the points. These colours are strings just like CSS. You can use RGBA, RGB, HEX or HSL notation.
+
+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 Line 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 grid lines are shown across the chart
+	scaleShowGridLines : true,
+
+	//String - Colour of the grid lines
+	scaleGridLineColor : "rgba(0,0,0,.05)",
+
+	//Number - Width of the grid lines
+	scaleGridLineWidth : 1,
+
+	//Boolean - Whether to show horizontal lines (except X axis)
+	scaleShowHorizontalLines: true,
+
+	//Boolean - Whether to show vertical lines (except Y axis)
+	scaleShowVerticalLines: true,
+
+	//Boolean - Whether the line is curved between points
+	bezierCurve : true,
+
+	//Number - Tension of the bezier curve between points
+	bezierCurveTension : 0.4,
+
+	//Boolean - Whether to show a dot for each point
+	pointDot : true,
+
+	//Number - Radius of each point dot in pixels
+	pointDotRadius : 4,
+
+	//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 `Line` method as an object with the keys you want to override.
+
+For example, we could have a line chart without bezier curves between points by doing the following:
+
+```javascript
+new Chart(ctx).Line(data, {
+	bezierCurve: false
+});
+// This will create a chart with all of the default options, merged from the global config,
+// and the Line chart defaults, but this particular instance will have `bezierCurve` set to false.
+```
+
+We can also change these defaults values for each Line type that is created, this object is available at `Chart.defaults.Line`.
+
+
+### 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 = myLineChart.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
+myLineChart.datasets[0].points[2].value = 50;
+// Would update the first dataset's value of 'March' to be 50
+myLineChart.update();
+// Calling update now animates the position of March 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
+myLineChart.addData([40, 60], "August");
+// This 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
+myLineChart.removeData();
+// The chart will remove the first point and animate other points into place
+```