X-Git-Url: https://handorf.org/code/?p=soho-sigint.git;a=blobdiff_plain;f=client-freqwatch%2FChart.js%2Fdocs%2F01-Line-Chart.md;fp=client-freqwatch%2FChart.js%2Fdocs%2F01-Line-Chart.md;h=8d164ffb2bc7b5d81a55ba7761567fd8a8fd112c;hp=0000000000000000000000000000000000000000;hb=a3ef498bb80e543f5917fcf6cf55e5cb0cebc3dc;hpb=3c15e56613abf48f2eb191be9000428c56cdaadf diff --git a/client-freqwatch/Chart.js/docs/01-Line-Chart.md b/client-freqwatch/Chart.js/docs/01-Line-Chart.md new file mode 100644 index 0000000..8d164ff --- /dev/null +++ b/client-freqwatch/Chart.js/docs/01-Line-Chart.md @@ -0,0 +1,169 @@ +--- +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. + +
+ +
+ +###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 : "" + {% endraw %} + + //Boolean - Whether to horizontally center the label and point dot inside the grid + offsetGridLines : false +}; +``` + +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 +```