ember-line-graph is a tiny(1.74kb gzipped), zero-dependency ember-addon to draw line-charts.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
addon
app
config
docs
tests
vendor
.editorconfig
.ember-cli
.eslintignore
.eslintrc.js
.gitignore
.npmignore
.travis.yml
.watchmanconfig
LICENSE.md
README.md
ember-cli-build.js
index.js
package-lock.json
package.json
testem.js

README.md

ember-line-graph Build Status

ember-line-graph is a tiny(1.74kb gzipped), zero-dependency ember-addon to draw line-charts.

It uses SVGs to create charts so it is scalable and supports animations and gradients.

Demo

Installation

ember install ember-line-graph

Usage

{{line-graph
  points=points
  strokeWidth=5
  type="smooth"
  smoothness=10
  colors=colors
  animation=true
  animationDuration=3500
  animationTimingFunction="ease-in"
  width=500
  height=125
  padding=10}}
  • points - an array of values, example - [1, 10, 45, 3, 4, 6].
  • strokeWidth - width of the SVG path stroke.
  • strokeOpacity - opacity of the line in the chart. A number between 0 and 1.
  • strokeLinecap - Specifies the ending style of the line path. One of butt, round or square.
  • strokeDasharray - Controls the pattern of dashes and gaps used to stroke paths. Refer MDN Docs. Not recommended to use this with animation as the animation will first draw a undashed path and the chart will then turn to dashes.
  • type - line(default) or smooth.
  • smoothness - a number between 1 and 10 to determine the curve around the chart's points. Applicable only when type is smooth.
  • colors - A color or an array of colors for defining the chart's colors. A color can be any valid CSS color value.
  • animation - A boolean to specify if the path should be animated from left to right.
  • animationDuration - A number(in ms) to specify the duration for the animation.
  • animationTimingFunction - Any valid CSS animation-timing-function for the animation.
  • width - A number to specify the width of the chart.
  • height - A number to specify the height of the chart. Optional. Defaults to width/4.
  • padding - A number to specify padding for the chart inside the SVG so that lines are not cut at the edges. Optional.

Contributing

Installation

  • git clone https://github.com/astronomersiva/ember-line-graph
  • cd ember-line-graph
  • npm install

Linting

  • npm run lint:js
  • npm run lint:js -- --fix

Running tests

  • ember test – Runs the test suite on the current Ember version
  • ember test --server – Runs the test suite in "watch mode"
  • ember try:each – Runs the test suite against multiple Ember versions

Running the dummy application

For more information on using ember-cli, visit https://ember-cli.com/.

Credits

This addon was inspired by react-trend.

Creating this addon would have been impossible if not for these amazing blogs on the math needed to make this work:

License

MIT © Sivasubramanyam A

This project is licensed under the MIT License.