A ZingChart component for Ember CLI
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
addon
app
blueprints
config
tests
vendor
.bowerrc
.editorconfig
.ember-cli
.gitignore
.jshintrc
.npmignore
.travis.yml
.watchmanconfig
LICENSE.md
README.md
bower.json
ember-cli-build.js
index.js
package.json
testem.js
testem.json

README.md

ZingChart-Ember

A ZingChart component for Ember CLI

Resources:

Installation

  • npm install --save ember-zingchart
  • ember g ember-zingchart

Usage

Use the following custom element to a Handlebars template file:

{{ember-zingchart renderOptions=myRenderOptions}}

###Properties | Property | Required? | Type | Description | | :------------- |:-------------:| :----:| :---- | | renderOptions | required | Object | Render method configuration object used to configure the individual elements of a chart.|

The configuration object renderOptions is stored in tests/dummy/app/controllers/application.js.

###Example Controller

import Ember from 'ember';

let _renderOptions = {
  height: 400,
  width: "100%",
  events: {
    node_click:function(p) {
      console.log(p);
    }
  },
  data: {
    "type":"line",
    "title":{
      "text":"Average Metric"
    },
    "series":[
      {
        "values":[69,68,54,48,70,74,98,70,72,68,49,69]
      },
      {
        "values":[51,53,47,60,48,52,75,52,55,47,60,48]
      },
      {
        "values":[42,43,30,40,31,48,55,46,48,32,38,38]
      },
      {
        "values":[25,15,26,21,24,26,33,25,15,25,22,24]
      }
    ]
  },
  defaults: {
    "palette" : {
      "line" : [
      ["#ffffff", "#196eed", "#196eed", "#196eed"],
      ["#ffffff", "#d94530", "#d94530", "#d94530"],
      ["#ffffff", "#fdb82b", "#fdb82b", "#fdb82b"],
      ["#ffffff", "#159755", "#159755", "#159755"],
      ["#ffffff", "#8e8e8e", "#8e8e8e", "#8e8e8e"]
      ]
    },
    "graph" : {
      "background-color":"#f9f9f9",
      "border-color":"#ddd",
      "border-width":"1px",
      "border-style":"solid",
      "border-radius":5,
      "title" : {
        "background-color" : "#5f9af3",
        "height":"30px",
        "align":"center",
        "font-color" : "#fff",
        "border-radius-top-left":5,
        "border-radius-top-right":5
      },
    }
  }
}; // _renderOptions

export default Ember.Controller.extend({
  // improve the readability of the controller
  // by keeping the actual config object outside 
	myRenderOptions: _renderOptions
});

For more information on using ZingChart, visit http://www.zingchart.com/docs/.

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