Create a Line Chart.
Parameters: Name Type Argument Descriptionparent String | node | d3.selection | CompositeChart
Any valid d3 single selector specifying a dom block element such as a div; or a dom element or d3 selection. If the line chart is a sub-chart in a Composite Chart then pass in the parent composite chart instance instead.
chartGroup String <optional>
The name of the chart group this chart instance should be placed in. Interaction with a chart will only trigger events and redraws within the chart's group.
// create a line chart under #chart-container1 element using the default global chart group
var chart1 = new LineChart('#chart-container1');
// create a line chart under #chart-container2 element using chart group A
var chart2 = new LineChart('#chart-container2', 'chartGroupA');
// create a sub-chart under a composite parent chart
var chart3 = new LineChart(compositeChart);
curve d3.curve <optional>
// default
chart
.curve(d3.curveLinear);
// Add tension to curves that support it
chart
.curve(d3.curveCardinal.tension(0.5));
// You can use some specialized variation like
// https://en.wikipedia.org/wiki/Centripetal_Catmull%E2%80%93Rom_spline
chart
.curve(d3.curveCatmullRom.alpha(0.5));
Set the line's d3 dashstyle. This value becomes the 'stroke-dasharray' of line. Defaults to empty array (solid line).
Parameters: Name Type Argument Default DescriptiondashStyle Array.<Number> <optional>
// create a Dash Dot Dot Dot chart.dashStyle([3,1,1,1]);
Gets or sets a function that will determine discontinuities in the line which should be skipped: the path will be broken into separate subpaths if some points are undefined. This function is passed to line.defined
Note: crossfilter will sometimes coerce nulls to 0, so you may need to carefully write custom reduce functions to get this to work, depending on your data. See this GitHub comment for more details and an example.
Parameters: Name Type Argument Descriptiondefined function <optional>
Get or set the radius (in px) for dots displayed on the data points.
Parameters: Name Type Argument Default DescriptiondotRadius Number <optional>
Gets or sets the interpolator to use for lines drawn, by string name, allowing e.g. step functions, splines, and cubic interpolation.
Possible values are: 'linear', 'linear-closed', 'step', 'step-before', 'step-after', 'basis', 'basis-open', 'basis-closed', 'bundle', 'cardinal', 'cardinal-open', 'cardinal-closed', and 'monotone'.
This function exists for backward compatibility. Use LineChart#curve which is generic and provides more options. Value set through .curve takes precedence over .interpolate and .tension.
interpolate d3.curve <optional>
Get or set render area flag. If the flag is set to true then the chart will render the area beneath each line and the line chart effectively becomes an area chart.
Parameters: Name Type Argument Default DescriptionrenderArea Boolean <optional>
Always show individual dots for each datapoint.
If options is falsy, it disables data point rendering. If no options are provided, the current options values are instead returned.
options Object <optional>
chart.renderDataPoints({radius: 2, fillOpacity: 0.8, strokeOpacity: 0.0})
Gets or sets the tension to use for lines drawn, in the range 0 to 1.
Passed to the d3 curve function if it provides a .tension function. Example: curveCardinal.tension.
This function exists for backward compatibility. Use LineChart#curve which is generic and provides more options. Value set through .curve takes precedence over .interpolate and .tension.
tension Number <optional>
Turn on/off the mouseover behavior of an individual data point which renders a circle and x/y axis dashed lines back to each respective axis. This is ignored if the chart brush is on
Parameters: Name Type Argument Default DescriptionxyTipsOn Boolean <optional>
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4