{"id":18307961,"url":"https://github.com/froala/angularjs-froalacharts","last_synced_at":"2025-04-09T11:25:19.286Z","repository":{"id":141660078,"uuid":"290978180","full_name":"froala/angularjs-froalacharts","owner":"froala","description":null,"archived":false,"fork":false,"pushed_at":"2020-09-14T14:26:05.000Z","size":183,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-02-15T05:24:59.711Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/froala.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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":"2020-08-28T07:17:18.000Z","updated_at":"2020-09-14T14:26:07.000Z","dependencies_parsed_at":null,"dependency_job_id":"5de8fe58-4c10-4032-882d-e74a446eb7ad","html_url":"https://github.com/froala/angularjs-froalacharts","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/froala%2Fangularjs-froalacharts","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/froala%2Fangularjs-froalacharts/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/froala%2Fangularjs-froalacharts/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/froala%2Fangularjs-froalacharts/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/froala","download_url":"https://codeload.github.com/froala/angularjs-froalacharts/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248029222,"owners_count":21035961,"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":[],"created_at":"2024-11-05T16:06:05.466Z","updated_at":"2025-04-09T11:25:19.261Z","avatar_url":"https://github.com/froala.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# angularjs-froalacharts\n\nA simple and lightweight official AngularJS component for Froalacharts JavaScript charting library. angularjs-froalacharts enables you to add JavaScript charts in your AngularJS application without any hassle.\n\n## [Demo](https://fusioncharts.github.io/angularjs-fusioncharts/)\n\n- Github Repo: [https://github.com/froala/angularjs-froalacharts](https://github.com/froala/angularjs-froalacharts)\n- Documentation: [https://www.fusioncharts.com/dev/getting-started/angular/angularjs/your-first-chart-using-angularjs](https://www.fusioncharts.com/dev/getting-started/angular/angularjs/your-first-chart-using-angularjs)\n- Support: [https://www.fusioncharts.com/contact-support](https://www.fusioncharts.com/contact-support)\n- FroalaCharts\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/froala/angularjs-fusioncharts/issues](https://github.com/froala/angularjs-fusioncharts/issues)\n\n---\n\n## Table of Contents\n\n- [Getting Started](#getting-started)\n  - [Requirements](#requirements)\n  - [Installation](#installation)\n  - [Working with chart API](#working-with-apis)\n  - [Working with events](#working-with-events)\n- [Quick Start](#quick-start)\n- [Going Beyond Charts](#going-beyond-charts)\n- [Usage and Integration of FusionTime](#usage-and-integration-of-fusiontime)\n- [Special note for IE Users](#special-note)\n- [For Contributors](#for-contributors)\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 **AngularJS** Application.\n- **FroalaCharts** installed in your project, as detailed below:\n\n### Installation\n\nTo install `angularjs-froalacharts` library, run:\n\n```bash\n$ npm install angularjs-froalacharts --save\n```\n\nTo install `froalacharts` library:\n\n```bash\n$ npm install froalacharts --save\n```\n\n## Quick Start\n\n#### Step 1: Include angular-froalacharts.js and froalacharts\n\nIn your index.html\n\n```xml\n  \u003cscript type=\"text/javascript\" src=\"node_modules/froalacharts/froalacharts.js\"\u003e\u003c/script\u003e\n  \u003cscript type=\"text/javascript\" src=\"node_modules/froalacharts/themes/froalacharts.theme.froala.js\"\u003e\u003c/script\u003e\n  \u003cscript type=\"text/javascript\" src=\"node_modules/angular/angular.js\"\u003e\u003c/script\u003e\n  \u003cscript type=\"text/javascript\" src=\"node_modules/angularjs-froalacharts/dist/angular-froalacharts.js\"\u003e\u003c/script\u003e\n```\n\n### Step 2: Include ng-froalacharts in your module\n\nIn the app, include ng-froalacharts as a dependency. If you looking for where to add the dependency, look for the call to angular.module in your code.\n\n```javascript\nangular.module('myApp', ['ng-froalacharts']);\n```\n\n### Step 3: Add the froalacharts directive\n\nIn your HTML, find the section where you wish to add the chart and add a \u003cdiv\u003e with the froalacharts directive. We are assuming it's inside a controller called MyController which would change based on your usage.\n\n```xml\n  \u003cbody ng-app='myApp'\u003e\n    ...\n    \u003cdiv  ng-controller=\"MyController\"\u003e\n      \u003cdiv\n        froalacharts\n        width=\"600\"\n        height=\"400\"\n        type=\"pie\"\n        datasource=\"{{dataSource}}\"\u003e\n      \u003c/div\u003e\n    \u003c/div\u003e\n    ...\n  \u003c/body\u003e\n```\n\n### Step 4: Populate required variables in controller\n\nIn the previous code, we are binding to a scope variable myDataSource, but that hasn't been defined yet. In your controller, set the DataSource as you would for a regular FroalaCharts JSON format DataSource ([see this](http://docs.fusioncharts.com/tutorial-getting-started-your-first-charts-building-your-first-chart.html) tutorial for a general introduction to this format).\n\n```javascript\napp.controller('MyController', function($scope) {\n  $scope.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: 'froala'\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\nAnd your chart should display when you load the page.\n\n### Using `require()` syntax\n\nIn script.js\n\n```javascript\n//  Require AngularJS\nvar angular = require('angular');\n\n// Require FroalaCharts\nvar FroalaCharts = require('froalacharts');\n\n// Include angularjs-froalacharts\nrequire('angularjs-froalacharts');\n\n// Initialize Charts with FroalaCharts instance\nCharts(FroalaCharts);\n\nvar app = angular.module('myApp', ['ng-froalacharts']);\n\napp.controller('MyController', [\n  '$scope',\n  function($scope) {\n    $scope.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      },\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\nUse a bundler like `browserify` to bundle the script  \nSee the installation docs [here](http://browserify.org/)\n\n```bash\n$ browserify script.js -o bundle.js\n```\n\nIn `index.html`\n\n```xml\n\u003chtml\u003e\n  \u003chead\u003e\n\n    \u003c!-- Include compiled bundle in script tag --\u003e\n    \u003cscript type=\"text/javascript\" src=\"./bundle.js\"\u003e\u003c/script\u003e\n  \u003c/head\u003e\n\n  \u003cbody ng-app=\"myApp\"\u003e\n    \u003cdiv ng-controller=\"MyController\"\u003e\n      \u003cdiv\n        froalacharts\n        width=\"600\"\n        height=\"400\"\n        type=\"pie\"\n        datasource=\"{{dataSource}}\"\u003e\n      \u003c/div\u003e\n    \u003c/div\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\nLoad it in browser , Chart should get displayed\n\n## Working with Events\n\nFusincharts events can be subscribed by attaching scope functions to event attributes.\nAll the events attributes start with `fcevent-`\nfollowed by the event name in lowercase\n\nUsage in template :\n\n```xml\n\u003cfroalacharts\n  width=\"400\"\n  height=\"400\"\n  type=\"pie\"\n  datasource=\"{{myDataSource}}\"\n  fcevent-dataplotrollover=\"rollover(event, args)\"\u003e\n\u003c/froalacharts\u003e\n```\n\nIn the given above template, `rollover` is the scope function that needs to be defined in the controller's code.\n\nFor more on this read [here](https://www.fusioncharts.com/dev/api/fusioncharts/fusioncharts-events)\n\n```js\nvar app = angular.module('myApp', ['ng-froalacharts']);\n\napp.controller('MyController', function($scope) {\n  $scope.myDataSource = {\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  $scope.rollover = function(event, data) {\n    console.log(event, data);\n  };\n});\n```\n\nGet the list of froalacharts' [events](https://www.fusioncharts.com/dev/advanced-chart-configurations/events/classifying-events)\n\n## Working with APIs\n\nFroalaCharts chart instance is made available from the `initialized` event. It provides the chart instance as a parameter which can be used to call FroalaCharts methods.\n\nIn template, we add `initialized` event\n\n```xml\n\u003cfroalacharts\n  width=\"400\"\n  height=\"400\"\n  type=\"pie\"\n  datasource=\"{{myDataSource}}\"\n  initialized=\"onInitialized(chart)\"\u003e\n\u003c/froalacharts\u003e\n\u003cbutton ng-click=\"changeCaption()\"\u003eChange Chart Caption\u003c/button\u003e\n```\n\nIn order to use the chart instance, we need to store it.\n\n```js\nvar app = angular.module('myApp', ['ng-froalacharts']);\n\napp.controller('MyController', function($scope){\n    var chart;\n    $scope.datasource = {\n       ...// same data as above\n      };\n\n      $scope.onInitialized = function(chartObj){\n        chart = chartObj;\n      }\n\n      $scope.changeCaption = function(){\n          chart.setChartAttribute('caption', 'Caption changed');\n      }\n});\n```\n\nIn the given above example, clicking the button changes the caption text to `Caption changed`\n\nGet the list of froalacharts' [methods](https://www.fusioncharts.com/dev/api/fusioncharts/fusioncharts-methods)\n\n## Usage and integration of FroalaTime\n\nFrom `froalacharts@1.0.4` and `angularjs-froalacharts@1.0.0`, You can visualize timeseries data easily with angular.\n\nLearn more about FroalaTime [here](https://www.fusioncharts.com/fusiontime).\n\n### Sample code for FroalaTime\n\nIf you've included angular-froalacharts.js and froalacharts in your `html`\nthen add the following `script` tag:\n\nIn your `index.html`\n\n```xml\n  ...\n  \u003cscript type=\"text/javascript\" src=\"node_modules/froalacharts/froalacharts.js\"\u003e\u003c/script\u003e\n  ...\n```\n\nIn your `script.js`\n\n```js\n// If you haven't imported angulajs, angularjs-froalacharts and froalacharts in your html file and used require() syntax instead then add the following code from START to END:\n\n// START\nvar angular = require('angular');\nvar FroalaCharts = require('froalacharts');\nrequire('angularjs-froalacharts');\n\nvar app = angular.module('myApp', ['ng-froalacharts']);\n// END\n\nvar jsonify = res =\u003e res.json();\nvar dataFetch = fetch(\n  'https://s3.eu-central-1.amazonaws.com/fusion.store/ft/data/line-chart-with-time-axis-data.json'\n).then(jsonify);\nvar schemaFetch = fetch(\n  'https://s3.eu-central-1.amazonaws.com/fusion.store/ft/schema/line-chart-with-time-axis-schema.json'\n).then(jsonify);\n\nvar app = angular.module('myApp', ['ng-froalacharts']);\n\napp.controller('MyController', function($scope) {\n  $scope.dataSource = {\n    data: null,\n    caption: {\n      text: 'Sales Analysis'\n    },\n    subcaption: {\n      text: 'Grocery'\n    },\n    yAxis: [\n      {\n        plot: {\n          value: 'Grocery Sales Value',\n          type: 'line'\n        },\n        format: {\n          prefix: '$'\n        },\n        title: 'Sale Value'\n      }\n    ]\n  };\n\n  Promise.all([dataFetch, schemaFetch]).then(res =\u003e {\n    const data = res[0];\n    const schema = res[1];\n    const froalaTable = new FroalaCharts.DataStore().createDataTable(\n      data,\n      schema\n    );\n    $scope.$apply(function() {\n      $scope.dataSource.data = froalaTable;\n    });\n  });\n});\n```\n\nUse a bundler like `browserify` to bundle the script  \nSee the installation docs [here](http://browserify.org/)\n\n```bash\n$ browserify script.js -o bundle.js\n```\n\nAgain in your `index.html`\n\n```xml\n\u003chtml\u003e\n  \u003chead\u003e\n    \u003c!-- Include compiled bundle in script tag --\u003e\n    \u003cscript type=\"text/javascript\" src=\"./bundle.js\"\u003e\u003c/script\u003e\n  \u003c/head\u003e\n\n  \u003cbody ng-app=\"myApp\"\u003e\n    \u003cdiv ng-controller=\"MyController\"\u003e\n      \u003cdiv\n        froalacharts\n        width=\"600\"\n        height=\"400\"\n        type=\"timeseries\"\n        datasource-dt=\"dataSource\"\u003e\n        // When using TimeSeries pass your dataSource in \"datasource-dt\" attribute not in \"datasource\".\n      \u003c/div\u003e\n    \u003c/div\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\n**Important note :- If the chart's datasource has an instance of dataStore like in case of timeseries then you must use the new `datasource-dt` attribute for passing the data in html**\n\nUseful links for FroalaTime\n\n- [How FroalaTime 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## Special Note\n\nIf you want to support your application on IE(11 and below), then you need to take following steps:\n\n### Firstly\n\nYou have to update your `angularjs-froalacharts` and `froalacharts` modules to latest versions. For `angularjs-froalacharts` install `v1.0.0` and above; for `froalacharts` install `1.0.6` and above.\n\n### Secondly\n\nIn your template, modify your code like so,\n\n```html\n\u003cdiv\n  froalacharts\n  width=\"600\"\n  height=\"400\"\n  type=\"ANY_CHART_TYPE\"\n  datasource-dt=\"dataSource\"\n\u003e\n  // Instead of passing data in datasouce, use datasource-dt.\n\u003c/div\u003e\n```\n\n## For Contributors\n\n- Clone the repository and install dependencies\n\n```\n$ git clone https://github.com/froala/angularjs-froalacharts.git\n$ cd angularjs-froalacharts\n$ npm i\n$ npm run dev\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 FroalaCharts’ interactive JavaScript visualizations and learn how to communicate real-world narratives through underlying data to tell compelling stories.\n\n## Licensing\n\nThe FroalaCharts React 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](https://www.fusioncharts.com/buy).","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffroala%2Fangularjs-froalacharts","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffroala%2Fangularjs-froalacharts","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffroala%2Fangularjs-froalacharts/lists"}