/d3by5-line-chart

d3by5-line-chart

Primary LanguageJavaScriptMIT LicenseMIT

d3by5-line-chart

Thed3by5-line-chart is part of the d3by5 graph tools.

NOTE

This is as for now a company internal project, see C3 or NVD3 for D3 fully functional chart libraries.

INSTALL AND BUILD

npm install
npm run build

Include

d3by5.linechart.js

or

d3by5.linechart.min.js

DEPENDENCIES

  • Underscore
  • d3
  • d3by5-base-chart. The base-chart is not a registered npm module, get it here. Bootstrapped as module on npm install via npm link

In package.json;

"scripts": {
    "preinstall": "npm link ../d3by5-base-chart",
    "link": "npm link ../d3by5-base-chart",
}

API

  • All methods (except getOptions(), setOptions()) are getters/setters. Called without arguments they return the current option value. Called with arguments sets option value and returns chart.

    ​

Method / option Argument(s) Default Value Description
data
.data() object {title:[string], schema:[object], values:[object], source:[string]} A data.value is a object formated as per [d3.csv.parse()] (https://github.com/d3/d3-3.x-api-reference/blob/master/CSV.md#parse)
layout
.width() int 640 Sets the graph total width, including internal margins.
.height() int 480 Sets the graph total height, including internal margins.
.fillColor() string or array blue
.margin() int [,int, int, int] 20, 20, 50, 50 Margins around graph. To accomandate tick labels etc.
line(s)
.lineWidth() int 2 Width of line(s) in px
.lineDataPoints() bool false Toggles data points on/off. True or false.
.lineDataValues() bool false Toggles data points values on/off. True or false.
.lineInterpolate() string or bool false Set line interpolation. Possible modes .
axis
.xAxis() bool true Toggles X axis on/off. True or false.
.xColumn() int 0 Map data column to X axis.
.xLabel() string '' Defaults to xColumn label if set in data-obj.
.xScale() string date Data type scale for X axis.
.xAlign() string bottom Align ticks on X axis. Bottom or top.
.xPos() string bottom Position X axis. Bottom or top.
.xTicks() int [,string] 10 Number of ticks and optional format
.yAxis() bool true Toggles Y axis on/off. True or false.
.yColumn() int 1 Map data column to Y axis.
.yLabel() string '' Defaults to yColumn label if set in data-obj.
.yScale() string linear Data type scale for Y axis.
.yAlign() string left Align ticks on Y axis. Left or right.
.yPos() string left Position Y axis. Left or right.
.yTicks() int [,string] 10 Number of ticks and optional format
Other
idPrefix string id- Prefix for id-attribute attached to data-visualisations (eg bar or line)
Shortcuts
.axis() object Sets all axis properties in one object. Call wihtout arguments to see object form.
.setOptions() object Sets all available options in on object
.getOptions Get all options as object.

EXAMPLE

See folder ./example. (Created with npm run build.)

LICENCE

MIT