diff options
Diffstat (limited to 'www/lib/Chart.js/docs/01-Line-Chart.md')
| -rw-r--r-- | www/lib/Chart.js/docs/01-Line-Chart.md | 166 |
1 files changed, 0 insertions, 166 deletions
diff --git a/www/lib/Chart.js/docs/01-Line-Chart.md b/www/lib/Chart.js/docs/01-Line-Chart.md deleted file mode 100644 index 1a5ae84c..00000000 --- a/www/lib/Chart.js/docs/01-Line-Chart.md +++ /dev/null @@ -1,166 +0,0 @@ ---- -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 -``` |