New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More
Socket
Sign inDemoInstall
Socket

ember-cli-chartist

Package Overview
Dependencies
Maintainers
1
Versions
35
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

ember-cli-chartist - npm Package Compare versions

Comparing version 0.0.1 to 0.0.2

4

package.json
{
"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/).
SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc