ember-cli-chartist
Advanced tools
Comparing version 0.0.1 to 0.0.2
{ | ||
"name": "ember-cli-chartist", | ||
"version": "0.0.1", | ||
"description": "Addon for Ember CLI for fancy charts from Chartist.js", | ||
"version": "0.0.2", | ||
"description": "Addon for Ember CLI wrapper for Chartist.js", | ||
"directories": { | ||
@@ -6,0 +6,0 @@ "doc": "doc", |
# Chartist.js for Ember-CLI Projects | ||
THIS IS A WORK IN PROGRESS | ||
This is an ember-cli wrapper for [Chartist](https://github.com/gionkunz/chartist-js). | ||
It allows you to render Chartist charts in your templates using components. | ||
It's an ember-cli wrapper for [Chartist](https://github.com/gionkunz/chartist-js) | ||
## Setup | ||
After installing this with: | ||
In an existing ember-cli project. Install with: | ||
@@ -13,17 +14,59 @@ ``` | ||
you will be able to do things like: | ||
In the template where you want the chart to appear: | ||
``` | ||
{{chartist-chart | ||
type="line" | ||
options=chartOpts | ||
data=lineChartData}} | ||
{{chartist-chart data=model.chartData}} | ||
``` | ||
in your Ember templates | ||
The `data` attribute is the only required attribute. It's value should be an object. Check the [Chartist docs](http://gionkunz.github.io/chartist-js/getting-started.html#as-simple-as-it-can-get) for expected data structure. | ||
------ ALL THE STUFF BELOW HERE WAS GENERATED BY EMBER-CLI, I DON'T KNOW ABOUT IT | ||
### Where does the data come from? | ||
## Installation | ||
The data can be specified in an Ember route or controller. In the example above it's coming from the model which is defined in the route. | ||
*/app/routes/application.js* | ||
```javascript | ||
import Ember from 'ember'; | ||
export default Ember.Route.extend({ | ||
model: function () { | ||
return { | ||
chartData: { | ||
labels: ['Day1', 'Day2', 'Day3'], | ||
series: [ | ||
[5, 4, 8], | ||
[10, 2, 7], | ||
[8, 3, 6] | ||
] | ||
} | ||
} | ||
} | ||
}); | ||
``` | ||
### Chart types | ||
There are three types of charts; line, bar, and pie. The default is line. You can change the chart type using the `type` attribute. | ||
``` | ||
{{chartist-chart type="bar" data=model.chartData}} | ||
``` | ||
### Responsive scaling | ||
Chartist charts scale up and down in size. They do so at specified ratios. You can change the ratio using the `ratio` attribute. | ||
``` | ||
{{chartist-chart ratio="ct-golden-section" data=model.chartData}} | ||
``` | ||
See [Chartist docs](http://gionkunz.github.io/chartist-js/getting-started.html#creating-a-chart-using-aspect-ratios) for the full list of ratios and info on how to create your own. | ||
## Development | ||
If you'd like to contribute to this project, that would be swell. Here are some details on doing that. | ||
### Installation | ||
* `git clone` this repository | ||
@@ -33,3 +76,3 @@ * `npm install` | ||
## Running | ||
### Running | ||
@@ -39,11 +82,5 @@ * `ember server` | ||
## Running Tests | ||
### Running Tests | ||
* `ember test` | ||
* `ember test --server` | ||
## Building | ||
* `ember build` | ||
For more information on using ember-cli, visit [http://www.ember-cli.com/](http://www.ember-cli.com/). |
133422
84