{"id":15060319,"url":"https://github.com/fusioncharts/ember-fusioncharts","last_synced_at":"2025-04-10T05:51:03.634Z","repository":{"id":26737764,"uuid":"108843653","full_name":"fusioncharts/ember-fusioncharts","owner":"fusioncharts","description":"A lightweight EmberJS component which provides bindings for FusionCharts JavaScript Charting Library","archived":false,"fork":false,"pushed_at":"2024-10-03T06:11:02.000Z","size":5667,"stargazers_count":6,"open_issues_count":20,"forks_count":5,"subscribers_count":13,"default_branch":"master","last_synced_at":"2025-03-24T07:04:37.809Z","etag":null,"topics":["bindings","ember","ember-addon","emberjs","fusioncharts","wrapper"],"latest_commit_sha":null,"homepage":"https://fusioncharts.github.io/ember-fusioncharts/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/fusioncharts.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-10-30T11:50:09.000Z","updated_at":"2024-10-03T06:11:07.000Z","dependencies_parsed_at":"2025-02-16T19:43:10.861Z","dependency_job_id":null,"html_url":"https://github.com/fusioncharts/ember-fusioncharts","commit_stats":null,"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fusioncharts%2Fember-fusioncharts","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fusioncharts%2Fember-fusioncharts/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fusioncharts%2Fember-fusioncharts/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fusioncharts%2Fember-fusioncharts/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/fusioncharts","download_url":"https://codeload.github.com/fusioncharts/ember-fusioncharts/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247926499,"owners_count":21019501,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["bindings","ember","ember-addon","emberjs","fusioncharts","wrapper"],"created_at":"2024-09-24T22:56:44.998Z","updated_at":"2025-04-10T05:51:03.605Z","avatar_url":"https://github.com/fusioncharts.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ember-fusioncharts\n\nA lightweight EmberJS component which provides bindings for FusionCharts JavaScript Charting Library. It easily adds rich and interactive charts to any ambitious Ember application.\n\n## [Demo](https://fusioncharts.github.io/ember-fusioncharts/)\n\n- Github Repo: [https://github.com/fusioncharts/ember-fusioncharts](https://github.com/fusioncharts/ember-fusioncharts)\n- Documentation: [https://www.fusioncharts.com/dev/getting-started/ember/your-first-chart-using-ember](https://www.fusioncharts.com/dev/getting-started/ember/your-first-chart-using-ember)\n- Support: [https://www.fusioncharts.com/contact-support](https://www.fusioncharts.com/contact-support)\n- FusionCharts\n  - Official Website: [https://www.fusioncharts.com/](https://www.fusioncharts.com/)\n  - Official NPM Package: [https://www.npmjs.com/package/fusioncharts](https://www.npmjs.com/package/fusioncharts)\n- Issues: [https://github.com/fusioncharts/ember-fusioncharts/issues](https://github.com/fusioncharts/ember-fusioncharts/issues)\n\n---\n\n## Table of Contents\n\n- [Getting Started](#getting-started)\n  - [Requirements](#requirements)\n  - [Installation](#installation)\n- [Quick Start](#quick-start)\n  - [Working with APIs](#working-with-apis)\n  - [Working with events](#working-with-events)\n- [Going Beyond Charts](#going-beyond-charts)\n- [Usage and Integration of FusionTime](#usage-and-integration-of-fusiontime)\n- [For Contributors](#for-contributors)\n- [Licensing](#licensing)\n\n## Compatibility\n\n- Ember.js v3.19 or above\n- Ember CLI v2.19 or above\n- Node.js \u003e= 14.21 || 16 || 18 or above\n\n## Installation\n\n## Getting Started\n\n### Requirements\n\n- **Node.js**, **NPM/Yarn** installed globally in your OS.\n- **FusionCharts** and **Ember** installed in your project, as detailed\n\n## Installation\n\n**Direct Download**\nAll binaries are located on our [github repository](https://github.com/fusioncharts/ember-fusioncharts/).\n\n**Install from NPM**\n\nTo install `ember-fusioncharts` to any existing ember project, run:\n\nFor Modern Ember CLI:\n\n```bash\n$ npm install ember-fusioncharts --save\n```\n\nFor Earlier Ember CLI (and addon developers):\n\n```bash\n$ npm install ember-fusioncharts --save-dev\n$ ember g ember-fusioncharts\n```\n\nThen install `fusioncharts` to your project:\n\n```bash\n$ npm install fusioncharts --save\n```\n\nThen import `fusioncharts` library to your `ember-cli-build.js` build file:\n\n```javascript\n/* eslint-env node */\n\"use strict\";\n\nconst EmberAddon = require(\"ember-cli/lib/broccoli/ember-addon\");\n\nmodule.exports = function (defaults) {\n  let app = new EmberAddon(defaults, {\n    // Add options here\n  });\n\n  // Import FusionCharts library\n  app.import(\"node_modules/fusioncharts/fusioncharts.js\");\n  app.import(\"node_modules/fusioncharts/fusioncharts.charts.js\");\n  app.import(\"node_modules/fusioncharts/themes/fusioncharts.theme.fusion.js\");\n\n  /*\n      This build file specifies the options for the dummy test app of this\n      addon, located in `/tests/dummy`\n      This build file does *not* influence how the addon or the app using it\n      behave. You most likely want to be modifying `./index.js` or app's build file\n    */\n\n  return app.toTree();\n};\n```\n\n## Quick Start\n\nAfter installing `ember-fusioncharts`, create a simple component(e.g. `chart-viewer`, also you can use it anywhere in your application) to show your interactive charts, run:\n\n```bash\n$ ember g component chart-viewer\n```\n\nWrite your chart logic in `chart-viewer.js` file:\n\n```javascript\nimport Component from \"@glimmer/component\";\nimport { tracked } from \"@glimmer/tracking\";\n\nconst myDataSource = {\n  chart: {\n    caption: \"Harry's SuperMart\",\n    subCaption: \"Top 5 stores in last month by revenue\",\n    numberPrefix: \"$\",\n    theme: \"fint\",\n  },\n  data: [\n    {\n      label: \"Bakersfield Central\",\n      value: \"880000\",\n    },\n    {\n      label: \"Garden Groove harbour\",\n      value: \"730000\",\n    },\n    {\n      label: \"Los Angeles Topanga\",\n      value: \"590000\",\n    },\n    {\n      label: \"Compton-Rancho Dom\",\n      value: \"520000\",\n    },\n    {\n      label: \"Daly City Serramonte\",\n      value: \"330000\",\n    },\n  ],\n};\n\nexport default class ChartViewerComponent extends Component {\n  @tracked title = \"FusionCharts Example\";\n  @tracked width = 600;\n  @tracked height = 400;\n  @tracked type = \"column2d\";\n  @tracked dataFormat = \"json\";\n  @tracked dataSource = myDataSource;\n  @tracked chartConfig = null;\n  @tracked events = null;\n  @tracked actualValue = \"\";\n}\n```\n\nAnd use `fusioncharts-xt` component in your `chart-viewer.hbs` template to show your charts:\n\n```html\n\u003ch1\u003e{{ title }}\u003c/h1\u003e\n\n{{fusioncharts-xt width=this.width height=this.height type=this.type\ndataFormat=this.dataFormat dataSource=this.dataSource}}\n```\n\nThen, use `chart-viewer` component in your `application.hbs` template:\n\n```html\n{{chart-viewer}} {{outlet}}\n```\n\n## Working with APIs\n\nIn your component file:\n\n```javascript\nimport Component from \"@glimmer/component\";\nimport { tracked } from \"@glimmer/tracking\";\nimport { action } from \"@ember/object\";\nconst dataSource = {\n  chart: {\n    caption: \"Countries With Most Oil Reserves [2017-18]\",\n    subCaption: \"In MMbbl = One Million barrels\",\n    xAxisName: \"Country\",\n    yAxisName: \"Reserves (MMbbl)\",\n    numberSuffix: \"K\",\n    theme: \"fusion\",\n  },\n  data: [\n    {\n      label: \"Venezuela\",\n      value: \"290\",\n    },\n    {\n      label: \"Saudi\",\n      value: \"260\",\n    },\n    {\n      label: \"Canada\",\n      value: \"180\",\n    },\n    {\n      label: \"Iran\",\n      value: \"140\",\n    },\n    {\n      label: \"Russia\",\n      value: \"115\",\n    },\n    {\n      label: \"UAE\",\n      value: \"100\",\n    },\n    {\n      label: \"US\",\n      value: \"30\",\n    },\n    {\n      label: \"China\",\n      value: \"30\",\n    },\n  ],\n};\nexport default class FusionChartsViewers extends Component {\n  @tracked title = \"FusionCharts Example\";\n  @tracked width = 600;\n  @tracked height = 400;\n  @tracked type = \"column2d\";\n  @tracked dataFormat = \"json\";\n  @tracked dataSource = dataSource;\n  @tracked chartConfig = null;\n  @tracked events = null;\n  @tracked actualValue = \"\";\n  @tracked message = \"Hover on the plot to see the value along with the label\";\n  constructor() {\n    super(...arguments);\n    this.chartConfig = {\n      containerBackgroundColor: \"#ffffff\",\n    };\n    this.dataFormat = \"json\";\n    this.dataSource = dataSource; // Initializing the data source\n    this.events = {\n      dataplotRollOver: this.dataplotRollOver.bind(this),\n      dataPlotRollOut: this.dataPlotRollOut.bind(this),\n    };\n  }\n  @action\n  dataplotRollOver(eventObj, dataObj) {\n    this.message = `You are currently hovering over ${dataObj.categoryLabel} whose value is ${dataObj.displayValue}`;\n  }\n\n  @action\n  dataPlotRollOut(eventObj, dataObj) {\n    this.message = \"Hover on the plot to see the value along with the label\";\n  }\n}\n```\n\nIn your template file:\n\n```html\n{{ fusioncharts-xt width=this.width height=this.height type=this.type\ndataFormat=this.dataFormat dataSource=this.dataSource events=this.events }}\n\n\u003cp\u003e{{ this.message }}\u003c/p\u003e\n```\n\nUsing this example when you hover on a dataplot you will get to see the value and label of the dataplot underneath the chart.\n\n## Working with events\n\nTo attach event listeners to FusionCharts, you can use the `events` attribute in the `fusioncharts-xt` template.\n\nIn your template file:\n\n```html\n{{ fusioncharts-xt width=this.width height=this.height type=this.type\ndataFormat=this.dataFormat dataSource=this.dataSource events=this.events }}\n```\n\n## Usage and integration of FusionTime\n\nFrom `fusioncharts@3.13.3-sr.1` and `ember-fusioncharts@2.0.0`, You can visualize timeseries data easily with vue.\n\nLearn more about FusionTime [here](https://www.fusioncharts.com/fusiontime).\n\nimport `FusionTime` library to your `ember-cli-build.js` build file:\n\n```javascript\n/* eslint-env node */\n\"use strict\";\n\nconst EmberAddon = require(\"ember-cli/lib/broccoli/ember-addon\");\n\nmodule.exports = function (defaults) {\n  let app = new EmberAddon(defaults, {\n    // Add options here\n  });\n\n  // Import FusionCharts library\n  app.import(\"node_modules/fusioncharts/fusioncharts.js\");\n  app.import(\"node_modules/fusioncharts/fusioncharts.timeseries.js\");\n\n  /*\n      This build file specifies the options for the dummy test app of this\n      addon, located in `/tests/dummy`\n      This build file does *not* influence how the addon or the app using it\n      behave. You most likely want to be modifying `./index.js` or app's build file\n    */\n\n  return app.toTree();\n};\n```\n\nCreate a simple component(e.g. `timeseries-viewer`, also you can use it anywhere in your application) to show your interactive charts, run:\n\n```bash\n$ ember g component chart-viewer\n```\n\nWrite your chart logic in `timeseries-viewer.js` file:\n\n```javascript\nimport Component from \"@glimmer/component\";\nimport { tracked } from \"@glimmer/tracking\";\n\n// Data source template\nconst dataSource = {\n  data: null,\n  caption: {\n    text: \"Sales Analysis\",\n  },\n  subcaption: {\n    text: \"Grocery \u0026 Footwear\",\n  },\n  series: \"Type\",\n  yAxis: [\n    {\n      plot: \"Sales Value\",\n      title: \"Sale Value\",\n      format: {\n        prefix: \"$\",\n      },\n    },\n  ],\n};\n\n// Function to fetch and parse JSON\nconst jsonify = (res) =\u003e res.json();\n\n// Fetch data and schema\nconst dataFetch = fetch(\n  \"https://s3.eu-central-1.amazonaws.com/fusion.store/ft/data/plotting-multiple-series-on-time-axis-data.json\",\n).then(jsonify);\n\nconst schemaFetch = fetch(\n  \"https://s3.eu-central-1.amazonaws.com/fusion.store/ft/schema/plotting-multiple-series-on-time-axis-schema.json\",\n).then(jsonify);\n\nexport default class timeSeriesViewer extends Component {\n  @tracked title = \"TimeSeries Example\";\n  @tracked width = 600;\n  @tracked height = 400;\n  @tracked type = \"timeseries\";\n  @tracked dataFormat = null;\n  @tracked dataSource = null;\n\n  constructor() {\n    super(...arguments);\n    this.dataFormat = \"json\";\n    this.createDataTable();\n  }\n\n  createDataTable() {\n    Promise.all([dataFetch, schemaFetch]).then((res) =\u003e {\n      const data = res[0];\n      const schema = res[1];\n      // First we are creating a DataStore\n      const fusionDataStore = new FusionCharts.DataStore();\n      // After that we are creating a DataTable by passing our data and schema as arguments\n      const fusionDataTable = fusionDataStore.createDataTable(data, schema);\n      // Afet that we simply mutated our timeseries datasource by attaching the above\n      // DataTable into its data property.\n      dataSource.data = fusionDataTable;\n      this.dataSource = dataSource;\n    });\n  }\n}\n```\n\nAnd use `fusioncharts-xt` component in your `timeseries-viewer.hbs` template to show your charts:\n\n```html\n\u003ch1\u003e{{ title }}\u003c/h1\u003e\n\n{{ fusioncharts-xt width=this.width height=this.height type=this.type\ndataFormat=this.dataFormat dataSource=this.dataSource }}\n```\n\nThen, use `timeseries-viewer` component in your `application.hbs` template:\n\n```html\n{{timeseries-viewer}} {{outlet}}\n```\n\n## Going beyond Charts\n\n- Explore 20+ pre-built business specific dashboards for different industries like energy and manufacturing to business functions like sales, marketing and operations [here](https://www.fusioncharts.com/explore/dashboards).\n- See [Data Stories](https://www.fusioncharts.com/explore/data-stories) built using FusionCharts’ interactive JavaScript visualizations and learn how to communicate real-world narratives through underlying data to tell compelling stories.\n\n## For Contributors\n\n- Clone the repository.\n- Install dependencies.\n- Run `npm start` to start the dev server.\n- Open `http://localhost:4200/` in your browser.\n\n```sh\n$ git clone https://github.com/fusioncharts/ember-fusioncharts.git\n$ cd ember-fusioncharts\n$ npm i\n$ npm start\n```\n\nTo build, run:\n\n```sh\n$ npm run build\n```\n\n## Licensing\n\nThe FusionCharts Ember component is open-source and distributed under the terms of the MIT/X11 License. However, you will need to download and include FusionCharts library in your page separately, which has a [separate license](https://www.fusioncharts.com/buy).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffusioncharts%2Fember-fusioncharts","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffusioncharts%2Fember-fusioncharts","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffusioncharts%2Fember-fusioncharts/lists"}