{"id":13497417,"url":"https://github.com/fusioncharts/angular-fusioncharts","last_synced_at":"2025-04-06T22:09:52.157Z","repository":{"id":37821537,"uuid":"62200933","full_name":"fusioncharts/angular-fusioncharts","owner":"fusioncharts","description":"Angular Component for FusionCharts JavaScript Charting Library","archived":false,"fork":false,"pushed_at":"2024-08-07T11:51:28.000Z","size":9677,"stargazers_count":55,"open_issues_count":57,"forks_count":37,"subscribers_count":21,"default_branch":"develop","last_synced_at":"2024-10-29T21:11:25.233Z","etag":null,"topics":["angular","angular-fusioncharts","angular-fusioncharts-component","charts","dashboards","data-stories","data-visualization","dataviz","fusioncharts","fusionmaps","fusionwidgets","graphs","interactive-charts","javascript-charts","js-charts","powercharts","visualization"],"latest_commit_sha":null,"homepage":"https://fusioncharts.github.io/angular-fusioncharts/#/ex1","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/fusioncharts.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"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":"2016-06-29T06:21:05.000Z","updated_at":"2024-07-15T11:09:26.000Z","dependencies_parsed_at":"2024-01-16T09:55:58.152Z","dependency_job_id":"839975f5-36c1-4809-807f-901adf4f72ee","html_url":"https://github.com/fusioncharts/angular-fusioncharts","commit_stats":{"total_commits":174,"total_committers":21,"mean_commits":8.285714285714286,"dds":0.7011494252873562,"last_synced_commit":"b3bb1ce88e0dfce65da83276e30b3b8cce80fa1e"},"previous_names":["fusioncharts/angular2-fusioncharts"],"tags_count":23,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fusioncharts%2Fangular-fusioncharts","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fusioncharts%2Fangular-fusioncharts/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fusioncharts%2Fangular-fusioncharts/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fusioncharts%2Fangular-fusioncharts/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/fusioncharts","download_url":"https://codeload.github.com/fusioncharts/angular-fusioncharts/tar.gz/refs/heads/develop","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246372741,"owners_count":20766635,"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":["angular","angular-fusioncharts","angular-fusioncharts-component","charts","dashboards","data-stories","data-visualization","dataviz","fusioncharts","fusionmaps","fusionwidgets","graphs","interactive-charts","javascript-charts","js-charts","powercharts","visualization"],"created_at":"2024-07-31T20:00:30.642Z","updated_at":"2025-03-30T20:11:50.918Z","avatar_url":"https://github.com/fusioncharts.png","language":"TypeScript","funding_links":[],"categories":["Uncategorized","TypeScript","Table of contents"],"sub_categories":["Uncategorized","Third Party Components"],"readme":"# angular-fusioncharts\n\nA simple and lightweight official Angular component for FusionCharts JavaScript charting library. angular-fusioncharts enables you to add JavaScript charts in your Angular application without any hassle.\n\nWith the latest version of angular-fusioncharts@4.1.0, we are now supporting Angular 17 applications as well which were not supported till angular-fusioncharts@4.0.3 The angular-fusioncharts 4.1.0 can be used with all the versions of FusionCharts till the v3.23.0.\n\n## [Demo](https://fusioncharts.github.io/angular-fusioncharts/)\n\n- Github Repo: [https://github.com/fusioncharts/angular-fusioncharts](https://github.com/fusioncharts/angular-fusioncharts)\n- Documentation: [https://www.fusioncharts.com/dev/getting-started/angular/angular/your-first-chart-using-angular](https://www.fusioncharts.com/dev/getting-started/angular/angular/your-first-chart-using-angular)\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/angular-fusioncharts/issues](https://github.com/fusioncharts/angular-fusioncharts/issues)\n\n---\n\n## Table of Contents\n\n- [angular-fusioncharts](#angular-fusioncharts)\n  - [Demo](#demo)\n  - [Table of Contents](#table-of-contents)\n  - [Getting Started](#getting-started)\n    - [Requirements](#requirements)\n    - [Installation](#installation)\n  - [Quick Start](#quick-start)\n  - [Working with Events](#working-with-events)\n  - [Working with APIs](#working-with-apis)\n  - [Usage and integration of FusionTime](#usage-and-integration-of-fusiontime)\n    - [Setup for FusionTime](#setup-for-fusiontime)\n    - [Component code](#component-code)\n    - [Template Code](#template-code)\n  - [For Contributors](#for-contributors)\n  - [Going Beyond Charts](#going-beyond-charts)\n  - [Licensing](#licensing)\n\n## Getting Started\n\n### Requirements\n\n- **Node.js**, **NPM/Yarn** installed globally in your OS.\n- You've an **Angular** Application.\n- **FusionCharts** installed in your project, as detailed below:\n\n### Installation\n\nTo install `angular-fusioncharts` library, run:\n\n```bash\n$ npm install angular-fusioncharts --save\n```\n\nTo install `fusioncharts` library:\n\n```bash\n$ npm install fusioncharts --save\n```\n\n## Quick Start\n\nHere is a basic sample that shows how to create a chart using `angular-fusioncharts`:\n\nAdd this in your Angular `AppModule`:\n\n```typescript\nimport { BrowserModule } from '@angular/platform-browser';\nimport { NgModule } from '@angular/core';\n\nimport { AppComponent } from './app.component';\n\n// Import angular-fusioncharts\nimport { FusionChartsModule } from 'angular-fusioncharts';\n\n// Import FusionCharts library and chart modules\nimport * as FusionCharts from 'fusioncharts';\nimport * as Charts from 'fusioncharts/fusioncharts.charts';\n\n// For Powercharts , Widgets, and Maps\n// import * as PowerCharts from 'fusioncharts/fusioncharts.powercharts';\n// import * as Widgets from 'fusioncharts/fusioncharts.widgets';\n// import * as Maps from 'fusioncharts/fusioncharts.maps';\n// To know more about suites,\n// read this https://www.fusioncharts.com/dev/getting-started/plain-javascript/install-using-plain-javascript\n\n// For Map definition files\n// import * as World from 'fusioncharts/maps/fusioncharts.world';\n\nimport * as FusionTheme from 'fusioncharts/themes/fusioncharts.theme.fusion';\n\n// Pass the fusioncharts library and chart modules\nFusionChartsModule.fcRoot(FusionCharts, Charts, FusionTheme);\n\n@NgModule({\n  declarations: [AppComponent],\n  imports: [\n    BrowserModule,\n    // Specify FusionChartsModule as import\n    FusionChartsModule\n  ],\n  providers: [],\n  bootstrap: [AppComponent]\n})\nexport class AppModule {}\n```\n\nOnce the library is imported, you can use its components, directives in your Angular application:\n\nIn your Angular AppComponent:\n\n```javascript\nimport { Component } from '@angular/core';\n\n@Component({\n  selector: 'my-app',\n  templateUrl: './app.component.html'\n})\nexport class AppComponent {\n  dataSource: Object;\n  title: string;\n\n  constructor() {\n    this.title = 'Angular  FusionCharts Sample';\n\n    this.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        { label: 'Venezuela', value: '290' },\n        { label: 'Saudi', value: '260' },\n        { label: 'Canada', value: '180' },\n        { label: 'Iran', value: '140' },\n        { label: 'Russia', value: '115' },\n        { label: 'UAE', value: '100' },\n        { label: 'US', value: '30' },\n        { label: 'China', value: '30' }\n      ]\n    };\n  }\n}\n```\n\n```xml\n\u003c!-- You can now use fusioncharts component in app.component.html --\u003e\n\u003ch1\u003e\n  {{title}}\n\u003c/h1\u003e\n\u003cfusioncharts\n    width=\"600\"\n    height=\"350\"\n    type=\"Column2D\"\n    dataFormat=\"JSON\"\n    [dataSource]=\"dataSource\"\n\u003e\u003c/fusioncharts\u003e\n```\n\n## Working with Events\n\nFusincharts events can be subscribed from component's output params.  \nUsage in template :\n\n```xml\n\u003cfusioncharts\n  width=\"600\"\n  height=\"350\"\n  type=\"Column2D\"\n  dataFormat=\"json\"\n  [dataSource]=\"dataSource\"\n  (dataplotRollOver)=\"plotRollOver($event)\"\u003e\n\u003c/fusioncharts\u003e\n```\n\nAnd in component's code , `$event` will be an object `{ eventObj : {...}, dataObj: {...} }`  \nFor more on this read [here](https://www.fusioncharts.com/dev/api/fusioncharts/fusioncharts-events)\n\n```js\nimport {Component} from '@angular/core';\n\n@Component({\n  selector: 'my-app',\n  templateUrl: './app.component.html'\n})\nexport class AppComponent {\n  dataSource: Object;\n  title: string;\n\n  constructor() {\n    this.title = \"Angular  FusionCharts Sample\";\n\n    this.dataSource = {\n      ...// same data as above\n    };\n  }\n\n\n\n  plotRollOver($event){\n    var dataValue = $event.dataObj.dataValue;\n    console.log(`Value is ${dataValue}`);\n  }\n\n}\n```\n\nGet the list of fusioncharts' [events](https://www.fusioncharts.com/dev/advanced-chart-configurations/events/classifying-events)\n\n## Working with APIs\n\nUsing api of charts involves getting the FusionCharts chart instance from the `initialized` event.\nIt emits chart object which can be operated upon later.\n\nIn template, we add `initialized` event\n\n```xml\n\u003cfusioncharts\n  type=\"column2d\"\n  width=\"100%\"\n  height=\"400\"\n  dataFormat=\"json\"\n  [dataSource]=\"dataSource\"\n  (initialized)=\"initialized($event)\"\u003e\n\u003c/fusioncharts\u003e\n\u003cbutton (click)=\"changeLabel()\"\u003eChange label\u003c/button\u003e\n```\n\nAnd in component's code , we get `$event` as `{ chart : ChartInstance }`\n\nSo in order to use the chart instance , we need to store the chart instance.\n\n```typescript\nimport {Component} from '@angular/core';\n\n@Component({\n  selector: 'my-app',\n  templateUrl: './app.component.html'\n})\nexport class AppComponent {\n  dataSource: Object;\n  title: string;\n  chart: any;\n  constructor() {\n    this.title = \"Angular  FusionCharts Sample\";\n\n    this.dataSource = {\n      ...// same data as above\n    };\n  }\n\n  initialized($event){\n    this.chart = $event.chart; // Storing the chart instance\n  }\n\n  changeLabel(){\n    this.chart.setChartAttribute('caption', 'Changed caption');\n  }\n\n}\n\n```\n\n## Usage and integration of FusionTime\n\nFrom `fusioncharts@3.13.3-sr.1` and `angular-fusioncharts@3.0.0`, You can visualize timeseries data easily with angular.\n\nLearn more about FusionTime [here](https://www.fusioncharts.com/fusiontime).\n\n### Setup for FusionTime\n\n```typescript\n// app.module.ts\nimport { BrowserModule } from '@angular/platform-browser';\nimport { NgModule } from '@angular/core';\nimport { AppComponent } from './app.component';\n// Import angular-fusioncharts\nimport { FusionChartsModule } from 'angular-fusioncharts';\n// Import FusionCharts library and chart modules\nimport * as FusionCharts from 'fusioncharts';\nimport * as Charts from 'fusioncharts/fusioncharts.charts';\nimport * as TimeSeries from 'fusioncharts/fusioncharts.timeseries'; // Import timeseries\n// Pass the fusioncharts library and chart modules\nFusionChartsModule.fcRoot(FusionCharts, Charts, TimeSeries);\n@NgModule({\n  declarations: [AppComponent],\n  imports: [\n    BrowserModule,\n    // Specify FusionChartsModule as import\n    FusionChartsModule\n  ],\n  providers: [],\n  bootstrap: [AppComponent]\n})\nexport class AppModule {}\n```\n\n### Component code\n\n```typescript\n// In app.component.ts\nimport { Component } from '@angular/core';\nimport * as FusionCharts from 'fusioncharts';\nconst dataUrl =\n  'https://raw.githubusercontent.com/fusioncharts/dev_centre_docs/fusiontime-beta-release/charts-resources/fusiontime/online-sales-single-series/data.json';\nconst schemaUrl =\n  'https://raw.githubusercontent.com/fusioncharts/dev_centre_docs/fusiontime-beta-release/charts-resources/fusiontime/online-sales-single-series/schema.json';\n@Component({\n  selector: 'app',\n  templateUrl: './app.component.html'\n})\nexport class AppComponent {\n  dataSource: any;\n  type: string;\n  width: string;\n  height: string;\n  constructor() {\n    this.type = 'timeseries';\n    this.width = '400';\n    this.height = '400';\n    this.dataSource = {\n      data: null,\n      yAxis: {\n        plot: [{ value: 'Sales' }]\n      },\n      caption: {\n        text: 'Online Sales of a SuperStore in the US'\n      }\n    };\n    this.fetchData();\n  }\n  fetchData() {\n    let jsonify = res =\u003e res.json();\n    let dataFetch = fetch(dataUrl).then(jsonify);\n    let schemaFetch = fetch(schemaUrl).then(jsonify);\n    Promise.all([dataFetch, schemaFetch]).then(res =\u003e {\n      let data = res[0];\n      let schema = res[1];\n      let fusionTable = new FusionCharts.DataStore().createDataTable(\n        data,\n        schema\n      ); // Instance of DataTable to be passed as data in dataSource\n      this.dataSource.data = fusionTable;\n    });\n  }\n}\n```\n\n### Template Code\n\n```html\n\u003cdiv\u003e\n  \u003cfusioncharts\n    [type]=\"type\"\n    [width]=\"width\"\n    [height]=\"height\"\n    [dataSource]=\"dataSource\"\n  \u003e\u003c/fusioncharts\u003e\n\u003c/div\u003e\n```\n\nUseful links for FusionTime\n\n- [How FusionTime works](https://www.fusioncharts.com/dev/fusiontime/getting-started/how-fusion-time-works)\n- [Create your first chart](https://www.fusioncharts.com/dev/fusiontime/getting-started/create-your-first-chart-in-fusiontime)\n\n## For Contributors\n\n- Clone the repository and install dependencies\n\n```\n$ git clone https://github.com/fusioncharts/angular-fusioncharts.git\n$ cd angular-component\n$ npm i\n$ npm start\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## Licensing\n\nThe FusionCharts React 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%2Fangular-fusioncharts","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffusioncharts%2Fangular-fusioncharts","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffusioncharts%2Fangular-fusioncharts/lists"}