ember-froalacharts
Simple and lightweight Ember component for FroalaCharts. ember-froalacharts
enables you to add JavaScript charts in your Ember application or project without any hassle.
- Github Repo: https://github.com/froala/ember-froalacharts
- Documentation: https://froala.com/charts/docs/frameworks/ember/
- Support: support@froala.com
- FroalaCharts
- Official Website: https://froala.com/
- Official NPM Package: https://www.npmjs.com/package/froalacharts
- Issues: https://github.com/froala/ember-froalacharts/issues
Table of Contents
Getting Started
Requirements
- Node.js, NPM/Yarn installed globally in your OS.
- FroalaCharts and Ember installed in your project, as detailed
Installation
Direct Download All binaries are located on our github repository.
Install from NPM
To install ember-froalacharts
to any existing ember project, run:
For Modern Ember CLI:
$ npm install ember-froalacharts --save
For Earlier Ember CLI (and addon developers):
$ npm install ember-froalacharts --save-dev$ ember g ember-froalacharts
Then install froalacharts
to your project:
$ npm install froalacharts --save
Then import froalacharts
library to your ember-cli-build.js
build file:
/* eslint-env node */'use strict'; const EmberApp = ; module { let app = defaults // Add options here ; // Import froalacharts library app; app; // Use `app.import` to add additional libraries to the generated // output files. // // If you need to use different assets in different // environments, specify an object as the first parameter. That // object's keys should be the environment name and the values // should be the asset to use in that environment. // // If the library that you are including contains AMD or ES6 // modules that you would like to import into your application // please specify an object with the list of modules as keys // along with the exports of each module as its value. return app;};
Quick Start
After installing ember-froalacharts
, create a simple component(e.g. chart-viewer
, also you can use it anywhere in your application) to show your interactive charts, run:
$ ember g component chart-viewer
Write your chart logic in chart-viewer.js
file:
; const myDataSource = chart: caption: "Harry's SuperMart" subCaption: 'Top 5 stores in last month by revenue' numberPrefix: '$' theme: 'fint' data: label: 'Bakersfield Central' value: '880000' label: 'Garden Groove harbour' value: '730000' label: 'Los Angeles Topanga' value: '590000' label: 'Compton-Rancho Dom' value: '520000' label: 'Daly City Serramonte' value: '330000' ; ;
And use froalacharts
component in your chart-viewer.hbs
template to show your charts:
{{ title }} {{froalacharts-xt width=width height=height type=type dataFormat=dataFormatdataSource=dataSource}}
Then, use chart-viewer
component in your application.hbs
template:
{{chart-viewer}} {{outlet}}
For Contributors
- Clone the repository.
- Install dependencies.
- Run
npm start
to start the dev server. - Open
http://localhost:4200/
in your browser.
$ git clone https://github.com/froala/ember-froalacharts.git$ cd ember-froalacharts$ npm i && bower install$ npm start
To build, run:
$ npm run build
Licensing
The FroalaCharts Ember component is open-source and distributed under the terms of the MIT/X11 License. However, you will need to download and include FroalaCharts library in your page separately, which has a separate license.