├── .gitignore ├── .npmignore ├── Gruntfile.js ├── LICENSE.md ├── README.md ├── demos ├── .gitignore ├── bower.json ├── data │ ├── data.json │ └── data.xml ├── demosources │ ├── ex1 │ │ ├── config.json │ │ ├── index.html │ │ ├── index.js │ │ └── src.ejs │ ├── ex2 │ │ ├── config.json │ │ ├── index.html │ │ ├── index.js │ │ └── src.ejs │ ├── ex3 │ │ ├── config.json │ │ ├── index.html │ │ ├── index.js │ │ └── src.ejs │ ├── ex4 │ │ ├── config.json │ │ ├── index.html │ │ ├── index.js │ │ └── src.ejs │ ├── ex5 │ │ ├── config.json │ │ ├── index.html │ │ ├── index.js │ │ └── src.ejs │ ├── ex5a │ │ ├── config.json │ │ ├── index.html │ │ ├── index.js │ │ └── src.ejs │ ├── ex6 │ │ ├── config.json │ │ ├── index.html │ │ ├── index.js │ │ └── src.ejs │ ├── ex7 │ │ ├── config.json │ │ ├── index.html │ │ ├── index.js │ │ └── src.ejs │ ├── ex8 │ │ ├── config.json │ │ ├── index.html │ │ ├── index.js │ │ └── src.ejs │ └── ex9 │ │ ├── config.json │ │ ├── index.html │ │ ├── index.js │ │ └── src.ejs ├── images │ └── ng-fc-logo.png ├── index.html ├── js │ ├── .gitignore │ ├── app.js │ └── demos │ │ ├── ex1.js │ │ ├── ex10.js │ │ ├── ex2.js │ │ ├── ex3.js │ │ ├── ex4.js │ │ ├── ex5.js │ │ ├── ex5a.js │ │ ├── ex6.js │ │ ├── ex7.js │ │ ├── ex8.js │ │ └── ex9.js ├── src │ ├── codebox.ejs │ ├── data.json │ ├── index.ejs │ └── index.ghpages.ejs └── views │ ├── ex1.html │ ├── ex10.html │ ├── ex2.html │ ├── ex3.html │ ├── ex4.html │ ├── ex5.html │ ├── ex5a.html │ ├── ex6.html │ ├── ex7.html │ ├── ex8.html │ └── ex9.html ├── dist ├── angular-fusioncharts.js └── angular-fusioncharts.min.js ├── example ├── data.json ├── index.html └── index.js ├── grunt-tasks └── compile_demos.js ├── js └── demos │ ├── ex1.js │ ├── ex2.js │ ├── ex3.js │ ├── ex4.js │ ├── ex5.js │ ├── ex5a.js │ ├── ex6.js │ ├── ex7.js │ ├── ex8.js │ └── ex9.js ├── karma.conf.js ├── package.json └── src └── angular-fusioncharts.js /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | 5 | # Runtime data 6 | pids 7 | *.pid 8 | *.seed 9 | 10 | # Directory for instrumented libs generated by jscoverage/JSCover 11 | lib-cov 12 | 13 | # Coverage directory used by tools like istanbul 14 | coverage 15 | 16 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 17 | .grunt 18 | 19 | # Compiled binary addons (http://nodejs.org/api/addons.html) 20 | build/Release 21 | 22 | # Dependency directory 23 | # Commenting this out is preferred by some people, see 24 | # https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git- 25 | node_modules 26 | 27 | # Users Environment Variables 28 | .lock-wscript 29 | 30 | .DS_Store 31 | package-lock.json 32 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | example/ 2 | js/ 3 | demos/ 4 | -------------------------------------------------------------------------------- /Gruntfile.js: -------------------------------------------------------------------------------- 1 | module.exports = function(grunt) { 2 | grunt.initConfig({ 3 | pkg: grunt.file.readJSON('package.json'), 4 | makeDemos: { 5 | demos: { 6 | options: { 7 | mainTemplate: 'index.ejs', 8 | out: 'demos' 9 | } 10 | }, 11 | gh_pages: { 12 | options: { 13 | mainTemplate: 'index.ghpages.ejs', 14 | out: './' 15 | } 16 | } 17 | }, 18 | uglify: { 19 | src: { 20 | options: { 21 | banner: '/*! <%= pkg.name %> - v<%= pkg.version %>*/\n\n' 22 | }, 23 | files: { 24 | 'dist/angular-fusioncharts.min.js': ['src/angular-fusioncharts.js'] 25 | } 26 | } 27 | }, 28 | copy: { 29 | core: { 30 | files: [ 31 | { 32 | src: 'dist/angular-fusioncharts.min.js', 33 | dest: 'demos/js/angular-fusioncharts.min.js' 34 | }, 35 | { 36 | src: 'src/angular-fusioncharts.js', 37 | dest: 'dist/angular-fusioncharts.js' 38 | } 39 | ] 40 | } 41 | }, 42 | watch: { 43 | options: { 44 | livereload: true 45 | }, 46 | taskName: { 47 | files: ['src/*.js', 'example/*.*'], 48 | tasks: ['default'] 49 | } 50 | }, 51 | connect: { 52 | server: { 53 | options: { 54 | port: 8080, 55 | base: './', 56 | livereload: true 57 | } 58 | } 59 | } 60 | }); 61 | grunt.loadNpmTasks('grunt-contrib-connect'); 62 | grunt.loadNpmTasks('grunt-contrib-uglify'); 63 | grunt.loadNpmTasks('grunt-contrib-copy'); 64 | grunt.loadTasks('./grunt-tasks'); 65 | grunt.loadNpmTasks('grunt-contrib-watch'); 66 | //grunt.registerTask('default', ['makeDemos:demos', 'uglify', 'copy']); // For gh-pages branch only 67 | grunt.registerTask('default', ['uglify', 'copy']); // For other branches 68 | grunt.registerTask('watch-server', ['connect', 'watch']); 69 | }; 70 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2020 FusionCharts, Inc. 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # angularjs-fusioncharts 2 | 3 | A simple and lightweight official AngularJS component for FusionCharts JavaScript charting library. angularjs-fusioncharts enables you to add JavaScript charts in your AngularJS application without any hassle. 4 | 5 | ## [Demo](https://fusioncharts.github.io/angularjs-fusioncharts/) 6 | 7 | - Github Repo: [https://github.com/fusioncharts/angularjs-fusioncharts](https://github.com/fusioncharts/angularjs-fusioncharts) 8 | - 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) 9 | - Support: [https://www.fusioncharts.com/contact-support](https://www.fusioncharts.com/contact-support) 10 | - FusionCharts 11 | - Official Website: [https://www.fusioncharts.com/](https://www.fusioncharts.com/) 12 | - Official NPM Package: [https://www.npmjs.com/package/fusioncharts](https://www.npmjs.com/package/fusioncharts) 13 | - Issues: [https://github.com/fusioncharts/angularjs-fusioncharts/issues](https://github.com/fusioncharts/angularjs-fusioncharts/issues) 14 | 15 | --- 16 | 17 | ## Table of Contents 18 | 19 | - [Getting Started](#getting-started) 20 | - [Requirements](#requirements) 21 | - [Installation](#installation) 22 | - [Working with chart API](#working-with-apis) 23 | - [Working with events](#working-with-events) 24 | - [Quick Start](#quick-start) 25 | - [Going Beyond Charts](#going-beyond-charts) 26 | - [Usage and Integration of FusionTime](#usage-and-integration-of-fusiontime) 27 | - [Special note for IE Users](#special-note) 28 | - [For Contributors](#for-contributors) 29 | - [Licensing](#licensing) 30 | 31 | ## Getting Started 32 | 33 | ### Requirements 34 | 35 | - **Node.js**, **NPM/Yarn** installed globally in your OS. 36 | - You've an **AngularJS** Application. 37 | - **FusionCharts** installed in your project, as detailed below: 38 | 39 | ### Installation 40 | 41 | To install `angularjs-fusioncharts` library, run: 42 | 43 | ```bash 44 | $ npm install angularjs-fusioncharts --save 45 | ``` 46 | 47 | To install `fusioncharts` library: 48 | 49 | ```bash 50 | $ npm install fusioncharts --save 51 | ``` 52 | 53 | ## Quick Start 54 | 55 | #### Step 1: Include angular-fusioncharts.js and fusioncharts 56 | 57 | In your index.html 58 | 59 | ```xml 60 | 61 | 62 | 63 | 64 | 65 | ``` 66 | 67 | ### Step 2: Include ng-fusioncharts in your module 68 | 69 | In the app, include ng-fusioncharts as a dependency. If you looking for where to add the dependency, look for the call to angular.module in your code. 70 | 71 | ```javascript 72 | angular.module('myApp', ['ng-fusioncharts']); 73 | ``` 74 | 75 | ### Step 3: Add the fusioncharts directive 76 | 77 | In your HTML, find the section where you wish to add the chart and add a
with the fusioncharts directive. We are assuming it's inside a controller called MyController which would change based on your usage. 78 | 79 | ```xml 80 | 81 | ... 82 |
83 |
89 |
90 |
91 | ... 92 | 93 | ``` 94 | 95 | ### Step 4: Populate required variables in controller 96 | 97 | In 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 FusionCharts 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). 98 | 99 | ```javascript 100 | app.controller('MyController', function($scope) { 101 | $scope.dataSource = { 102 | chart: { 103 | caption: 'Countries With Most Oil Reserves [2017-18]', 104 | subCaption: 'In MMbbl = One Million barrels', 105 | xAxisName: 'Country', 106 | yAxisName: 'Reserves (MMbbl)', 107 | numberSuffix: 'K', 108 | theme: 'fusion' 109 | }, 110 | data: [ 111 | { label: 'Venezuela', value: '290' }, 112 | { label: 'Saudi', value: '260' }, 113 | { label: 'Canada', value: '180' }, 114 | { label: 'Iran', value: '140' }, 115 | { label: 'Russia', value: '115' }, 116 | { label: 'UAE', value: '100' }, 117 | { label: 'US', value: '30' }, 118 | { label: 'China', value: '30' } 119 | ] 120 | }; 121 | }); 122 | ``` 123 | 124 | And your chart should display when you load the page. 125 | 126 | ### Using `require()` syntax 127 | 128 | In script.js 129 | 130 | ```javascript 131 | // Require AngularJS 132 | var angular = require('angular'); 133 | 134 | // Require FusionCharts 135 | var FusionCharts = require('fusioncharts'); 136 | 137 | // Include angularjs-fusioncharts 138 | require('angularjs-fusioncharts'); 139 | 140 | // Require Chart modules 141 | var Charts = require('fusioncharts/fusioncharts.charts'); 142 | 143 | // Initialize Charts with FusionCharts instance 144 | Charts(FusionCharts); 145 | 146 | var app = angular.module('myApp', ['ng-fusioncharts']); 147 | 148 | app.controller('MyController', [ 149 | '$scope', 150 | function($scope) { 151 | $scope.dataSource = { 152 | chart: { 153 | caption: 'Countries With Most Oil Reserves [2017-18]', 154 | subCaption: 'In MMbbl = One Million barrels', 155 | xAxisName: 'Country', 156 | yAxisName: 'Reserves (MMbbl)', 157 | numberSuffix: 'K' 158 | }, 159 | data: [ 160 | { label: 'Venezuela', value: '290' }, 161 | { label: 'Saudi', value: '260' }, 162 | { label: 'Canada', value: '180' }, 163 | { label: 'Iran', value: '140' }, 164 | { label: 'Russia', value: '115' }, 165 | { label: 'UAE', value: '100' }, 166 | { label: 'US', value: '30' }, 167 | { label: 'China', value: '30' } 168 | ] 169 | }; 170 | } 171 | ]); 172 | ``` 173 | 174 | Use a bundler like `browserify` to bundle the script 175 | See the installation docs [here](http://browserify.org/) 176 | 177 | ```bash 178 | $ browserify script.js -o bundle.js 179 | ``` 180 | 181 | In `index.html` 182 | 183 | ```xml 184 | 185 | 186 | 187 | 188 | 189 | 190 | 191 | 192 |
193 |
199 |
200 |
201 | 202 | 203 | ``` 204 | 205 | Load it in browser , Chart should get displayed 206 | 207 | ## Working with Events 208 | 209 | Fusincharts events can be subscribed by attaching scope functions to event attributes. 210 | All the events attributes start with `fcevent-` 211 | followed by the event name in lowercase 212 | 213 | Usage in template : 214 | 215 | ```xml 216 | 222 | 223 | ``` 224 | 225 | In the given above template, `rollover` is the scope function that needs to be defined in the controller's code. 226 | 227 | For more on this read [here](https://www.fusioncharts.com/dev/api/fusioncharts/fusioncharts-events) 228 | 229 | ```js 230 | var app = angular.module('myApp', ['ng-fusioncharts']); 231 | 232 | app.controller('MyController', function($scope) { 233 | $scope.myDataSource = { 234 | chart: { 235 | caption: 'Countries With Most Oil Reserves [2017-18]', 236 | subCaption: 'In MMbbl = One Million barrels', 237 | xAxisName: 'Country', 238 | yAxisName: 'Reserves (MMbbl)', 239 | numberSuffix: 'K', 240 | theme: 'fusion' 241 | }, 242 | data: [ 243 | { label: 'Venezuela', value: '290' }, 244 | { label: 'Saudi', value: '260' }, 245 | { label: 'Canada', value: '180' }, 246 | { label: 'Iran', value: '140' }, 247 | { label: 'Russia', value: '115' }, 248 | { label: 'UAE', value: '100' }, 249 | { label: 'US', value: '30' }, 250 | { label: 'China', value: '30' } 251 | ] 252 | }; 253 | 254 | $scope.rollover = function(event, data) { 255 | console.log(event, data); 256 | }; 257 | }); 258 | ``` 259 | 260 | Get the list of fusioncharts' [events](https://www.fusioncharts.com/dev/advanced-chart-configurations/events/classifying-events) 261 | 262 | ## Working with APIs 263 | 264 | FusionCharts chart instance is made available from the `initialized` event. It provides the chart instance as a parameter which can be used to call FusionCharts methods. 265 | 266 | In template, we add `initialized` event 267 | 268 | ```xml 269 | 275 | 276 | 277 | ``` 278 | 279 | In order to use the chart instance, we need to store it. 280 | 281 | ```js 282 | var app = angular.module('myApp', ['ng-fusioncharts']); 283 | 284 | app.controller('MyController', function($scope){ 285 | var chart; 286 | $scope.datasource = { 287 | ...// same data as above 288 | }; 289 | 290 | $scope.onInitialized = function(chartObj){ 291 | chart = chartObj; 292 | } 293 | 294 | $scope.changeCaption = function(){ 295 | chart.setChartAttribute('caption', 'Caption changed'); 296 | } 297 | }); 298 | ``` 299 | 300 | In the given above example, clicking the button changes the caption text to `Caption changed` 301 | 302 | Get the list of fusioncharts' [methods](https://www.fusioncharts.com/dev/api/fusioncharts/fusioncharts-methods) 303 | 304 | ## Usage and integration of FusionTime 305 | 306 | From `fusioncharts@3.13.3-sr.1` and `angularjs-fusioncharts@5.0.0`, You can visualize timeseries data easily with angular. 307 | 308 | Learn more about FusionTime [here](https://www.fusioncharts.com/fusiontime). 309 | 310 | ### Sample code for FusionTime 311 | 312 | If you've included angular-fusioncharts.js and fusioncharts in your `html` 313 | then add the following `script` tag: 314 | 315 | In your `index.html` 316 | 317 | ```xml 318 | ... 319 | 320 | ... 321 | ``` 322 | 323 | In your `script.js` 324 | 325 | ```js 326 | // If you haven't imported angulajs, angularjs-fusioncharts and fusioncharts in your html file and used require() syntax instead then add the following code from START to END: 327 | 328 | // START 329 | var angular = require('angular'); 330 | var FusionCharts = require('fusioncharts'); 331 | require('angularjs-fusioncharts'); 332 | 333 | // Require TimeSeries module 334 | var TimeSeries = require('fusioncharts/fusioncharts.timeseries'); 335 | 336 | // Initialize Charts with FusionCharts instance 337 | TimeSeries(FusionCharts); 338 | var app = angular.module('myApp', ['ng-fusioncharts']); 339 | // END 340 | 341 | var jsonify = res => res.json(); 342 | var dataFetch = fetch( 343 | 'https://s3.eu-central-1.amazonaws.com/fusion.store/ft/data/line-chart-with-time-axis-data.json' 344 | ).then(jsonify); 345 | var schemaFetch = fetch( 346 | 'https://s3.eu-central-1.amazonaws.com/fusion.store/ft/schema/line-chart-with-time-axis-schema.json' 347 | ).then(jsonify); 348 | 349 | var app = angular.module('myApp', ['ng-fusioncharts']); 350 | 351 | app.controller('MyController', function($scope) { 352 | $scope.dataSource = { 353 | data: null, 354 | caption: { 355 | text: 'Sales Analysis' 356 | }, 357 | subcaption: { 358 | text: 'Grocery' 359 | }, 360 | yAxis: [ 361 | { 362 | plot: { 363 | value: 'Grocery Sales Value', 364 | type: 'line' 365 | }, 366 | format: { 367 | prefix: '$' 368 | }, 369 | title: 'Sale Value' 370 | } 371 | ] 372 | }; 373 | 374 | Promise.all([dataFetch, schemaFetch]).then(res => { 375 | const data = res[0]; 376 | const schema = res[1]; 377 | const fusionTable = new FusionCharts.DataStore().createDataTable( 378 | data, 379 | schema 380 | ); 381 | $scope.$apply(function() { 382 | $scope.dataSource.data = fusionTable; 383 | }); 384 | }); 385 | }); 386 | ``` 387 | 388 | Use a bundler like `browserify` to bundle the script 389 | See the installation docs [here](http://browserify.org/) 390 | 391 | ```bash 392 | $ browserify script.js -o bundle.js 393 | ``` 394 | 395 | Again in your `index.html` 396 | 397 | ```xml 398 | 399 | 400 | 401 | 402 | 403 | 404 | 405 |
406 |
412 | // When using TimeSeries pass your dataSource in "datasource-dt" attribute not in "datasource". 413 |
414 |
415 | 416 | 417 | ``` 418 | 419 | **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** 420 | 421 | Useful links for FusionTime 422 | 423 | - [How FusionTime works](https://www.fusioncharts.com/dev/fusiontime/getting-started/how-fusion-time-works) 424 | - [Create your first chart](https://www.fusioncharts.com/dev/fusiontime/getting-started/create-your-first-chart-in-fusiontime) 425 | 426 | ## Special Note 427 | 428 | If you want to support your application on IE(11 and below), then you need to take following steps: 429 | 430 | ### Firstly 431 | 432 | You have to update your `angularjs-fusioncharts` and `fusioncharts` modules to latest versions. For `angularjs-fusioncharts` install `v5.0.1` and above; for `fusioncharts` install `v3.13.3-sr.1` and above. 433 | 434 | ### Secondly 435 | 436 | In your template, modify your code like so, 437 | 438 | ```html 439 |
446 | // Instead of passing data in datasouce, use datasource-dt. 447 |
448 | ``` 449 | 450 | ## For Contributors 451 | 452 | - Clone the repository and install dependencies 453 | 454 | ``` 455 | $ git clone https://github.com/fusioncharts/angularjs-fusioncharts.git 456 | $ cd angularjs-fusioncharts 457 | $ npm i 458 | $ npm run dev 459 | ``` 460 | 461 | ## Going Beyond Charts 462 | 463 | - 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). 464 | - 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. 465 | 466 | ## Licensing 467 | 468 | The FusionCharts AngularJS integration 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). 469 | -------------------------------------------------------------------------------- /demos/.gitignore: -------------------------------------------------------------------------------- 1 | bower_components -------------------------------------------------------------------------------- /demos/bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "angularjs-fusioncharts-demos", 3 | "version": "0.0.1", 4 | "homepage": "https://github.com/fusioncharts/angularjs-fusioncharts", 5 | "author": "FusionCharts, Inc. ", 6 | "license": "MIT", 7 | "ignore": [ 8 | "**/.*", 9 | "node_modules", 10 | "bower_components", 11 | "test", 12 | "tests" 13 | ], 14 | "dependencies": { 15 | "angular": "~1.3.4", 16 | "angular-route": "~1.3.4", 17 | "angular-bootstrap": "~0.12.0", 18 | "bootstrap": "~3.3.1", 19 | "prism": "git@github.com:LeaVerou/prism.git#gh-pages" 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /demos/data/data.json: -------------------------------------------------------------------------------- 1 | { 2 | "chart": { 3 | "caption": "Monthly revenue for last year", 4 | "subCaption": "Harry's SuperMart", 5 | "xAxisName": "Month", 6 | "yAxisName": "Revenues (In USD)", 7 | "numberPrefix": "$", 8 | "paletteColors": "#0075c2", 9 | "bgColor": "#ffffff", 10 | "borderAlpha": "20", 11 | "canvasBorderAlpha": "0", 12 | "usePlotGradientColor": "0", 13 | "plotBorderAlpha": "10", 14 | "placevaluesInside": "1", 15 | "rotatevalues": "1", 16 | "valueFontColor": "#ffffff", 17 | "showXAxisLine": "1", 18 | "xAxisLineColor": "#999999", 19 | "divlineColor": "#999999", 20 | "divLineDashed": "1", 21 | "showAlternateHGridColor": "0", 22 | "subcaptionFontBold": "0", 23 | "subcaptionFontSize": "14" 24 | }, 25 | "data": [ 26 | { 27 | "label": "Jan", 28 | "value": "420000" 29 | }, 30 | { 31 | "label": "Feb", 32 | "value": "810000" 33 | }, 34 | { 35 | "label": "Mar", 36 | "value": "720000" 37 | }, 38 | { 39 | "label": "Apr", 40 | "value": "550000" 41 | }, 42 | { 43 | "label": "May", 44 | "value": "910000" 45 | }, 46 | { 47 | "label": "Jun", 48 | "value": "510000" 49 | }, 50 | { 51 | "label": "Jul", 52 | "value": "680000" 53 | }, 54 | { 55 | "label": "Aug", 56 | "value": "620000" 57 | }, 58 | { 59 | "label": "Sep", 60 | "value": "610000" 61 | }, 62 | { 63 | "label": "Oct", 64 | "value": "490000" 65 | }, 66 | { 67 | "label": "Nov", 68 | "value": "900000" 69 | }, 70 | { 71 | "label": "Dec", 72 | "value": "730000" 73 | } 74 | ], 75 | "trendlines": [ 76 | { 77 | "line": [ 78 | { 79 | "startvalue": "700000", 80 | "color": "#1aaf5d", 81 | "valueOnRight": "1", 82 | "displayvalue": "Monthly Target" 83 | } 84 | ] 85 | } 86 | ] 87 | } -------------------------------------------------------------------------------- /demos/data/data.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /demos/demosources/ex1/config.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "A Simple Chart", 3 | "desc": "A simple chart with all data embedded into the directive" 4 | } -------------------------------------------------------------------------------- /demos/demosources/ex1/index.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /demos/demosources/ex1/index.js: -------------------------------------------------------------------------------- 1 | (function () { 2 | app.config(['$routeProvider', function ($routeProvider) { 3 | $routeProvider.when ('/demos/ex1', { 4 | templateUrl: 'views/ex1.html', 5 | controller: 'ex1Controller' 6 | }); 7 | }]); 8 | 9 | 10 | app.controller('ex1Controller', function ($scope, $rootScope) { 11 | $rootScope.demoId = 'ex1'; 12 | $scope.myDataSource = { 13 | chart: { 14 | caption: "Harry's SuperMart", 15 | subCaption: "Top 5 stores in last month by revenue", 16 | numberPrefix: "$", 17 | theme: "ocean" 18 | }, 19 | data:[{ 20 | label: "Bakersfield Central", 21 | value: "880000" 22 | }, 23 | { 24 | label: "Garden Groove harbour", 25 | value: "730000" 26 | }, 27 | { 28 | label: "Los Angeles Topanga", 29 | value: "590000" 30 | }, 31 | { 32 | label: "Compton-Rancho Dom", 33 | value: "520000" 34 | }, 35 | { 36 | label: "Daly City Serramonte", 37 | value: "330000" 38 | }] 39 | }; 40 | }); 41 | 42 | }()); 43 | -------------------------------------------------------------------------------- /demos/demosources/ex1/src.ejs: -------------------------------------------------------------------------------- 1 | <% if(src=== "js") { %> 2 | $scope.myDataSource = { 3 | chart: { 4 | caption: "Harry's SuperMart", 5 | subCaption: "Top 5 stores in last month by revenue", 6 | numberPrefix: "$", 7 | theme: "ocean" 8 | }, 9 | data:[{ 10 | label: "Bakersfield Central", 11 | value: "880000" 12 | }, 13 | { 14 | label: "Garden Groove harbour", 15 | value: "730000" 16 | }, 17 | { 18 | label: "Los Angeles Topanga", 19 | value: "590000" 20 | }, 21 | { 22 | label: "Compton-Rancho Dom", 23 | value: "520000" 24 | }, 25 | { 26 | label: "Daly City Serramonte", 27 | value: "330000" 28 | }] 29 | }; 30 | <% } else if(src==="html") { %> 31 | 37 | <% } %> -------------------------------------------------------------------------------- /demos/demosources/ex2/config.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "A 3D Pie Chart", 3 | "desc": "A 3D pie chart using the datasource attribute from scope" 4 | } -------------------------------------------------------------------------------- /demos/demosources/ex2/index.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /demos/demosources/ex2/index.js: -------------------------------------------------------------------------------- 1 | (function () { 2 | app.config(['$routeProvider', function ($routeProvider) { 3 | $routeProvider.when ('/demos/ex2', { 4 | templateUrl: 'views/ex2.html', 5 | controller: 'ex2Controller' 6 | }); 7 | }]); 8 | 9 | 10 | app.controller('ex2Controller', function ($scope, $rootScope) { 11 | $rootScope.demoId = 'ex2'; 12 | $scope.myDataSource = { 13 | chart: { 14 | caption: "Age profile of website visitors", 15 | subcaption: "Last Year", 16 | startingangle: "120", 17 | showlabels: "0", 18 | showlegend: "1", 19 | enablemultislicing: "0", 20 | slicingdistance: "15", 21 | showpercentvalues: "1", 22 | showpercentintooltip: "0", 23 | plottooltext: "Age group : $label Total visit : $datavalue", 24 | theme: "ocean" 25 | }, 26 | data: [ 27 | { 28 | label: "Teenage", 29 | value: "1250400" 30 | }, 31 | { 32 | label: "Adult", 33 | value: "1463300" 34 | }, 35 | { 36 | label: "Mid-age", 37 | value: "1050700" 38 | }, 39 | { 40 | label: "Senior", 41 | value: "491000" 42 | } 43 | ] 44 | } 45 | }); 46 | 47 | }()); 48 | -------------------------------------------------------------------------------- /demos/demosources/ex2/src.ejs: -------------------------------------------------------------------------------- 1 | <% if(src=== "js") { %> 2 | $scope.myDataSource = { 3 | chart: { 4 | caption: "Age profile of website visitors", 5 | subcaption: "Last Year", 6 | startingangle: "120", 7 | showlabels: "0", 8 | showlegend: "1", 9 | enablemultislicing: "0", 10 | slicingdistance: "15", 11 | showpercentvalues: "1", 12 | showpercentintooltip: "0", 13 | plottooltext: "Age group : $label Total visit : $datavalue", 14 | theme: "fint" 15 | }, 16 | data: [ 17 | { 18 | label: "Teenage", 19 | value: "1250400" 20 | }, 21 | { 22 | label: "Adult", 23 | value: "1463300" 24 | }, 25 | { 26 | label: "Mid-age", 27 | value: "1050700" 28 | }, 29 | { 30 | label: "Senior", 31 | value: "491000" 32 | } 33 | ] 34 | } 35 | <% } else if(src==="html") { %> 36 | 42 | <% } %> -------------------------------------------------------------------------------- /demos/demosources/ex3/config.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "A Column, Line and Area Combi Chart", 3 | "desc": "A column, line and area combination chart using the datasource attribute" 4 | } -------------------------------------------------------------------------------- /demos/demosources/ex3/index.html: -------------------------------------------------------------------------------- 1 |
-------------------------------------------------------------------------------- /demos/demosources/ex3/index.js: -------------------------------------------------------------------------------- 1 | (function () { 2 | app.config(['$routeProvider', function ($routeProvider) { 3 | $routeProvider.when ('/demos/ex3', { 4 | templateUrl: 'views/ex3.html', 5 | controller: 'ex3Controller' 6 | }); 7 | }]); 8 | 9 | 10 | app.controller('ex3Controller', function ($scope, $rootScope) { 11 | $rootScope.demoId = 'ex3'; 12 | $scope.dataSource = { 13 | "chart": { 14 | "caption": "Actual Revenues, Targeted Revenues & Profits", 15 | "subcaption": "Last year", 16 | "xaxisname": "Month", 17 | "yaxisname": "Amount (In USD)", 18 | "numberprefix": "$", 19 | "theme": "ocean", 20 | }, 21 | "categories": [ 22 | { 23 | "category": [ 24 | { 25 | "label": "Jan" 26 | }, 27 | { 28 | "label": "Feb" 29 | }, 30 | { 31 | "label": "Mar" 32 | }, 33 | { 34 | "label": "Apr" 35 | }, 36 | { 37 | "label": "May" 38 | }, 39 | { 40 | "label": "Jun" 41 | }, 42 | { 43 | "label": "Jul" 44 | }, 45 | { 46 | "label": "Aug" 47 | }, 48 | { 49 | "label": "Sep" 50 | }, 51 | { 52 | "label": "Oct" 53 | }, 54 | { 55 | "label": "Nov" 56 | }, 57 | { 58 | "label": "Dec" 59 | } 60 | ] 61 | } 62 | ], 63 | "dataset": [ 64 | { 65 | "seriesname": "Actual Revenue", 66 | "data": [ 67 | { 68 | "value": "16000" 69 | }, 70 | { 71 | "value": "20000" 72 | }, 73 | { 74 | "value": "18000" 75 | }, 76 | { 77 | "value": "19000" 78 | }, 79 | { 80 | "value": "15000" 81 | }, 82 | { 83 | "value": "21000" 84 | }, 85 | { 86 | "value": "16000" 87 | }, 88 | { 89 | "value": "20000" 90 | }, 91 | { 92 | "value": "17000" 93 | }, 94 | { 95 | "value": "25000" 96 | }, 97 | { 98 | "value": "19000" 99 | }, 100 | { 101 | "value": "23000" 102 | } 103 | ] 104 | }, 105 | { 106 | "seriesname": "Projected Revenue", 107 | "renderas": "line", 108 | "showvalues": "0", 109 | "data": [ 110 | { 111 | "value": "15000" 112 | }, 113 | { 114 | "value": "16000" 115 | }, 116 | { 117 | "value": "17000" 118 | }, 119 | { 120 | "value": "18000" 121 | }, 122 | { 123 | "value": "19000" 124 | }, 125 | { 126 | "value": "19000" 127 | }, 128 | { 129 | "value": "19000" 130 | }, 131 | { 132 | "value": "19000" 133 | }, 134 | { 135 | "value": "20000" 136 | }, 137 | { 138 | "value": "21000" 139 | }, 140 | { 141 | "value": "22000" 142 | }, 143 | { 144 | "value": "23000" 145 | } 146 | ] 147 | }, 148 | { 149 | "seriesname": "Profit", 150 | "renderas": "area", 151 | "showvalues": "0", 152 | "data": [ 153 | { 154 | "value": "4000" 155 | }, 156 | { 157 | "value": "5000" 158 | }, 159 | { 160 | "value": "3000" 161 | }, 162 | { 163 | "value": "4000" 164 | }, 165 | { 166 | "value": "1000" 167 | }, 168 | { 169 | "value": "7000" 170 | }, 171 | { 172 | "value": "1000" 173 | }, 174 | { 175 | "value": "4000" 176 | }, 177 | { 178 | "value": "1000" 179 | }, 180 | { 181 | "value": "8000" 182 | }, 183 | { 184 | "value": "2000" 185 | }, 186 | { 187 | "value": "7000" 188 | } 189 | ] 190 | } 191 | ] 192 | }; 193 | }); 194 | 195 | }()); 196 | -------------------------------------------------------------------------------- /demos/demosources/ex3/src.ejs: -------------------------------------------------------------------------------- 1 | <% if(src=== "js") { %> 2 | { 3 | "chart": { 4 | "caption": "Actual Revenues, Targeted Revenues & Profits", 5 | "subcaption": "Last year", 6 | "xaxisname": "Month", 7 | "yaxisname": "Amount (In USD)", 8 | "numberprefix": "$", 9 | "theme": "fint" 10 | }, 11 | "categories": [ 12 | { 13 | "category": [ 14 | { 15 | "label": "Jan" 16 | }, 17 | { 18 | "label": "Feb" 19 | }, 20 | { 21 | "label": "Mar" 22 | }, 23 | { 24 | "label": "Apr" 25 | }, 26 | { 27 | "label": "May" 28 | }, 29 | { 30 | "label": "Jun" 31 | }, 32 | { 33 | "label": "Jul" 34 | }, 35 | { 36 | "label": "Aug" 37 | }, 38 | { 39 | "label": "Sep" 40 | }, 41 | { 42 | "label": "Oct" 43 | }, 44 | { 45 | "label": "Nov" 46 | }, 47 | { 48 | "label": "Dec" 49 | } 50 | ] 51 | } 52 | ], 53 | "dataset": [ 54 | { 55 | "seriesname": "Actual Revenue", 56 | "data": [ 57 | { 58 | "value": "16000" 59 | }, 60 | { 61 | "value": "20000" 62 | }, 63 | { 64 | "value": "18000" 65 | }, 66 | { 67 | "value": "19000" 68 | }, 69 | { 70 | "value": "15000" 71 | }, 72 | { 73 | "value": "21000" 74 | }, 75 | { 76 | "value": "16000" 77 | }, 78 | { 79 | "value": "20000" 80 | }, 81 | { 82 | "value": "17000" 83 | }, 84 | { 85 | "value": "25000" 86 | }, 87 | { 88 | "value": "19000" 89 | }, 90 | { 91 | "value": "23000" 92 | } 93 | ] 94 | }, 95 | { 96 | "seriesname": "Projected Revenue", 97 | "renderas": "line", 98 | "showvalues": "0", 99 | "data": [ 100 | { 101 | "value": "15000" 102 | }, 103 | { 104 | "value": "16000" 105 | }, 106 | { 107 | "value": "17000" 108 | }, 109 | { 110 | "value": "18000" 111 | }, 112 | { 113 | "value": "19000" 114 | }, 115 | { 116 | "value": "19000" 117 | }, 118 | { 119 | "value": "19000" 120 | }, 121 | { 122 | "value": "19000" 123 | }, 124 | { 125 | "value": "20000" 126 | }, 127 | { 128 | "value": "21000" 129 | }, 130 | { 131 | "value": "22000" 132 | }, 133 | { 134 | "value": "23000" 135 | } 136 | ] 137 | }, 138 | { 139 | "seriesname": "Profit", 140 | "renderas": "area", 141 | "showvalues": "0", 142 | "data": [ 143 | { 144 | "value": "4000" 145 | }, 146 | { 147 | "value": "5000" 148 | }, 149 | { 150 | "value": "3000" 151 | }, 152 | { 153 | "value": "4000" 154 | }, 155 | { 156 | "value": "1000" 157 | }, 158 | { 159 | "value": "7000" 160 | }, 161 | { 162 | "value": "1000" 163 | }, 164 | { 165 | "value": "4000" 166 | }, 167 | { 168 | "value": "1000" 169 | }, 170 | { 171 | "value": "8000" 172 | }, 173 | { 174 | "value": "2000" 175 | }, 176 | { 177 | "value": "7000" 178 | } 179 | ] 180 | } 181 | ] 182 | } 183 | <% } else if(src==="html") { %> 184 |
190 | <% } %> -------------------------------------------------------------------------------- /demos/demosources/ex4/config.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Different ways to use the directive", 3 | "desc": "Use the fc-chart as a tag or as an attribute" 4 | } -------------------------------------------------------------------------------- /demos/demosources/ex4/index.html: -------------------------------------------------------------------------------- 1 | 7 |
13 | -------------------------------------------------------------------------------- /demos/demosources/ex4/index.js: -------------------------------------------------------------------------------- 1 | (function () { 2 | app.config(['$routeProvider', function ($routeProvider) { 3 | $routeProvider.when ('/demos/ex4', { 4 | templateUrl: 'views/ex4.html', 5 | controller: 'ex4Controller' 6 | }); 7 | }]); 8 | 9 | 10 | app.controller('ex4Controller', function ($scope, $rootScope) { 11 | $rootScope.demoId = 'ex4'; 12 | $scope.dataSource = { 13 | chart: { 14 | caption: "Harry's SuperMart", 15 | subCaption: "Top 5 stores in last month by revenue", 16 | numberPrefix: "$", 17 | theme: "ocean" 18 | }, 19 | data:[{ 20 | label: "Bakersfield Central", 21 | value: "880000" 22 | }, 23 | { 24 | label: "Garden Groove harbour", 25 | value: "730000" 26 | }, 27 | { 28 | label: "Los Angeles Topanga", 29 | value: "590000" 30 | }, 31 | { 32 | label: "Compton-Rancho Dom", 33 | value: "520000" 34 | }, 35 | { 36 | label: "Daly City Serramonte", 37 | value: "330000" 38 | }] 39 | }; 40 | }); 41 | 42 | }()); 43 | -------------------------------------------------------------------------------- /demos/demosources/ex4/src.ejs: -------------------------------------------------------------------------------- 1 | <% if(src=== "js") { %> 2 | $scope.dataSource = { 3 | chart: { 4 | caption: "Harry's SuperMart", 5 | subCaption: "Top 5 stores in last month by revenue", 6 | numberPrefix: "$", 7 | theme: "ocean" 8 | }, 9 | data:[{ 10 | label: "Bakersfield Central", 11 | value: "880000" 12 | }, 13 | { 14 | label: "Garden Groove harbour", 15 | value: "730000" 16 | }, 17 | { 18 | label: "Los Angeles Topanga", 19 | value: "590000" 20 | }, 21 | { 22 | label: "Compton-Rancho Dom", 23 | value: "520000" 24 | }, 25 | { 26 | label: "Daly City Serramonte", 27 | value: "330000" 28 | }] 29 | }; 30 | <% } else if(src==="html") { %> 31 | 37 |
43 | <% } %> -------------------------------------------------------------------------------- /demos/demosources/ex5/config.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Fetch data from a JSON URL", 3 | "desc": "Fetch data remotely from a JSON file or URL" 4 | } -------------------------------------------------------------------------------- /demos/demosources/ex5/index.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /demos/demosources/ex5/index.js: -------------------------------------------------------------------------------- 1 | (function () { 2 | app.config(['$routeProvider', function ($routeProvider) { 3 | $routeProvider.when ('/demos/ex5', { 4 | templateUrl: 'views/ex5.html', 5 | controller: 'ex5Controller' 6 | }); 7 | }]); 8 | 9 | 10 | app.controller('ex5Controller', function ($scope, $rootScope) { 11 | $rootScope.demoId = 'ex5'; 12 | }); 13 | 14 | }()); 15 | -------------------------------------------------------------------------------- /demos/demosources/ex5/src.ejs: -------------------------------------------------------------------------------- 1 | <% if(src=== "js") { %> 2 | 3 | <% } else if(src==="html") { %> 4 | 5 | <% } %> -------------------------------------------------------------------------------- /demos/demosources/ex5a/config.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Fetch data from a XML URL", 3 | "desc": "Fetch data remotely from a XML file or URL" 4 | } -------------------------------------------------------------------------------- /demos/demosources/ex5a/index.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /demos/demosources/ex5a/index.js: -------------------------------------------------------------------------------- 1 | (function () { 2 | app.config(['$routeProvider', function ($routeProvider) { 3 | $routeProvider.when ('/demos/ex5a', { 4 | templateUrl: 'views/ex5a.html', 5 | controller: 'ex5aController' 6 | }); 7 | }]); 8 | 9 | app.controller('ex5aController', function ($scope, $rootScope) { 10 | $rootScope.demoId = 'ex5a'; 11 | }); 12 | }()); 13 | -------------------------------------------------------------------------------- /demos/demosources/ex5a/src.ejs: -------------------------------------------------------------------------------- 1 | <% if(src=== "js") { %> 2 | 3 | <% } else if(src==="html") { %> 4 | 5 | <% } %> -------------------------------------------------------------------------------- /demos/demosources/ex6/config.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Update chart data from scope", 3 | "desc": "Change the data dynamically in the scope and watch the chart update automatically" 4 | } -------------------------------------------------------------------------------- /demos/demosources/ex6/index.html: -------------------------------------------------------------------------------- 1 |
7 |

Click me to change data

-------------------------------------------------------------------------------- /demos/demosources/ex6/index.js: -------------------------------------------------------------------------------- 1 | (function () { 2 | app.config(['$routeProvider', function ($routeProvider) { 3 | $routeProvider.when ('/demos/ex6', { 4 | templateUrl: 'views/ex6.html', 5 | controller: 'ex6Controller' 6 | }); 7 | }]); 8 | 9 | 10 | app.controller('ex6Controller', function ($scope, $rootScope) { 11 | $rootScope.demoId = 'ex6'; 12 | 13 | $scope.dataSource = { 14 | chart: { 15 | caption: "Harry's SuperMart", 16 | subCaption: "Top 5 stores in last month by revenue", 17 | numberPrefix: "$", 18 | theme: "ocean" 19 | }, 20 | data:[{ 21 | label: "Bakersfield Central", 22 | value: "880000" 23 | }, 24 | { 25 | label: "Garden Groove harbour", 26 | value: "730000" 27 | }, 28 | { 29 | label: "Los Angeles Topanga", 30 | value: "590000" 31 | }, 32 | { 33 | label: "Compton-Rancho Dom", 34 | value: "520000" 35 | }, 36 | { 37 | label: "Daly City Serramonte", 38 | value: "330000" 39 | }] 40 | }; 41 | 42 | $scope.updateMyChartData = function () { 43 | $scope.dataSource.data[2].label = "This Label is Updated"; 44 | $scope.dataSource.data[2].value = "420000"; 45 | 46 | $scope.dataSource.data[3].label = "This is updated as well"; 47 | $scope.dataSource.data[3].value = "210000"; 48 | }; 49 | }); 50 | }()); 51 | -------------------------------------------------------------------------------- /demos/demosources/ex6/src.ejs: -------------------------------------------------------------------------------- 1 | <% if(src=== "js") { %> 2 | $scope.dataSource = { 3 | chart: { 4 | caption: "Harry's SuperMart", 5 | subCaption: "Top 5 stores in last month by revenue", 6 | numberPrefix: "$", 7 | theme: "ocean" 8 | }, 9 | data:[{ 10 | label: "Bakersfield Central", 11 | value: "880000" 12 | }, 13 | { 14 | label: "Garden Groove harbour", 15 | value: "730000" 16 | }, 17 | { 18 | label: "Los Angeles Topanga", 19 | value: "590000" 20 | }, 21 | { 22 | label: "Compton-Rancho Dom", 23 | value: "520000" 24 | }, 25 | { 26 | label: "Daly City Serramonte", 27 | value: "330000" 28 | }] 29 | }; 30 | 31 | $scope.updateMyChartData = function () { 32 | $scope.dataSource.data[2].label = "This Label is Updated"; 33 | $scope.dataSource.data[2].value = "420000"; 34 | 35 | $scope.dataSource.data[3].label = "This is updated as well"; 36 | $scope.dataSource.data[3].value = "210000"; 37 | }; 38 | <% } else if(src==="html") { %> 39 |
45 |

Click me to change data

46 | <% } %> -------------------------------------------------------------------------------- /demos/demosources/ex7/config.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Trigger scope event from chart", 3 | "desc": "Click on a chart to trigger an event in the controller, and update the scope" 4 | } -------------------------------------------------------------------------------- /demos/demosources/ex7/index.html: -------------------------------------------------------------------------------- 1 |
8 |

The value that you have selected is: {{ selectedValue }}

-------------------------------------------------------------------------------- /demos/demosources/ex7/index.js: -------------------------------------------------------------------------------- 1 | (function () { 2 | app.config(['$routeProvider', function ($routeProvider) { 3 | $routeProvider.when ('/demos/ex7', { 4 | templateUrl: 'views/ex7.html', 5 | controller: 'ex7Controller' 6 | }); 7 | }]); 8 | 9 | 10 | app.controller('ex7Controller', function ($scope, $rootScope) { 11 | $rootScope.demoId = 'ex7'; 12 | 13 | $scope.dataSource = { 14 | chart: { 15 | caption: "Harry's SuperMart", 16 | subCaption: "Top 5 stores in last month by revenue", 17 | numberPrefix: "$", 18 | theme: "ocean" 19 | }, 20 | data:[{ 21 | label: "Bakersfield Central", 22 | value: "880000" 23 | }, 24 | { 25 | label: "Garden Groove harbour", 26 | value: "730000" 27 | }, 28 | { 29 | label: "Los Angeles Topanga", 30 | value: "590000" 31 | }, 32 | { 33 | label: "Compton-Rancho Dom", 34 | value: "520000" 35 | }, 36 | { 37 | label: "Daly City Serramonte", 38 | value: "330000" 39 | }] 40 | }; 41 | $scope.selectedValue = "nothing"; 42 | 43 | $scope.events = { 44 | dataplotclick: function (ev, props) { 45 | $scope.$apply(function () { 46 | $scope.selectedValue = props.displayValue; 47 | }); 48 | } 49 | } 50 | }); 51 | 52 | }()); -------------------------------------------------------------------------------- /demos/demosources/ex7/src.ejs: -------------------------------------------------------------------------------- 1 | <% if(src=== "js") { %> 2 | $scope.dataSource = { 3 | chart: { 4 | caption: "Harry's SuperMart", 5 | subCaption: "Top 5 stores in last month by revenue", 6 | numberPrefix: "$", 7 | theme: "ocean" 8 | }, 9 | data:[{ 10 | label: "Bakersfield Central", 11 | value: "880000" 12 | }, 13 | { 14 | label: "Garden Groove harbour", 15 | value: "730000" 16 | }, 17 | { 18 | label: "Los Angeles Topanga", 19 | value: "590000" 20 | }, 21 | { 22 | label: "Compton-Rancho Dom", 23 | value: "520000" 24 | }, 25 | { 26 | label: "Daly City Serramonte", 27 | value: "330000" 28 | }] 29 | }; 30 | $scope.selectedValue = "nothing"; 31 | 32 | $scope.events = { 33 | dataplotclick: function (ev, props) { 34 | $scope.$apply(function () { 35 | $scope.selectedValue = props.displayValue; 36 | }); 37 | } 38 | } 39 | <% } else if(src==="html") { %> 40 |
47 |

The value that you have selected is: {{ selectedValue }}

48 | <% } %> -------------------------------------------------------------------------------- /demos/demosources/ex8/config.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Update chart attribute from scope", 3 | "desc": "Change a parameter in the scope variable and see it automatically update the chart" 4 | } -------------------------------------------------------------------------------- /demos/demosources/ex8/index.html: -------------------------------------------------------------------------------- 1 |
7 |

Change chart background color 8 | Make Caption text left-aligned 9 |

-------------------------------------------------------------------------------- /demos/demosources/ex8/index.js: -------------------------------------------------------------------------------- 1 | (function () { 2 | app.config(['$routeProvider', function ($routeProvider) { 3 | $routeProvider.when ('/demos/ex8', { 4 | templateUrl: 'views/ex8.html', 5 | controller: 'ex8Controller' 6 | }); 7 | }]); 8 | 9 | 10 | app.controller('ex8Controller', function ($scope, $rootScope) { 11 | $rootScope.demoId = 'ex8'; 12 | 13 | $scope.dataSource = { 14 | chart: { 15 | caption: "Harry's SuperMart", 16 | subCaption: "Top 5 stores in last month by revenue", 17 | numberPrefix: "$", 18 | theme: "ocean" 19 | }, 20 | data:[{ 21 | label: "Bakersfield Central", 22 | value: "880000" 23 | }, 24 | { 25 | label: "Garden Groove harbour", 26 | value: "730000" 27 | }, 28 | { 29 | label: "Los Angeles Topanga", 30 | value: "590000" 31 | }, 32 | { 33 | label: "Compton-Rancho Dom", 34 | value: "520000" 35 | }, 36 | { 37 | label: "Daly City Serramonte", 38 | value: "330000" 39 | }] 40 | }; 41 | 42 | $scope.changeBackgroundColor = function () { 43 | $scope.dataSource.chart.bgColor = "#efefef"; 44 | }; 45 | 46 | $scope.changeCaptionTextAlignment = function () { 47 | $scope.dataSource.chart.captionAlignment = "left"; 48 | }; 49 | }); 50 | 51 | }()); -------------------------------------------------------------------------------- /demos/demosources/ex8/src.ejs: -------------------------------------------------------------------------------- 1 | <% if(src=== "js") { %> 2 | $scope.dataSource = { 3 | chart: { 4 | caption: "Harry's SuperMart", 5 | subCaption: "Top 5 stores in last month by revenue", 6 | numberPrefix: "$", 7 | theme: "ocean" 8 | }, 9 | data:[{ 10 | label: "Bakersfield Central", 11 | value: "880000" 12 | }, 13 | { 14 | label: "Garden Groove harbour", 15 | value: "730000" 16 | }, 17 | { 18 | label: "Los Angeles Topanga", 19 | value: "590000" 20 | }, 21 | { 22 | label: "Compton-Rancho Dom", 23 | value: "520000" 24 | }, 25 | { 26 | label: "Daly City Serramonte", 27 | value: "330000" 28 | }] 29 | }; 30 | 31 | $scope.changeBackgroundColor = function () { 32 | $scope.dataSource.chart.bgColor = "#efefef"; 33 | }; 34 | 35 | $scope.changeCaptionTextAlignment = function () { 36 | $scope.dataSource.chart.captionAlignment = "left"; 37 | }; 38 | <% } else if(src==="html") { %> 39 |
45 |

Change chart background color 46 | Make Caption text left-aligned 47 |

48 | <% } %> -------------------------------------------------------------------------------- /demos/demosources/ex9/config.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Separate objects for attributes", 3 | "desc": "Separate objects for chart attributes, dataset and categories" 4 | } -------------------------------------------------------------------------------- /demos/demosources/ex9/index.html: -------------------------------------------------------------------------------- 1 |
-------------------------------------------------------------------------------- /demos/demosources/ex9/index.js: -------------------------------------------------------------------------------- 1 | (function () { 2 | app.config(['$routeProvider', function ($routeProvider) { 3 | $routeProvider.when ('/demos/ex9', { 4 | templateUrl: 'views/ex9.html', 5 | controller: 'ex9Controller' 6 | }); 7 | }]); 8 | 9 | 10 | app.controller('ex9Controller', function ($scope, $rootScope) { 11 | $rootScope.demoId = 'ex9'; 12 | $scope.attrs = { 13 | "caption": "Sales - 2012 v 2013", 14 | "numberprefix": "$", 15 | "plotgradientcolor": "", 16 | "bgcolor": "FFFFFF", 17 | "showalternatehgridcolor": "0", 18 | "divlinecolor": "CCCCCC", 19 | "showvalues": "0", 20 | "showcanvasborder": "0", 21 | "canvasborderalpha": "0", 22 | "canvasbordercolor": "CCCCCC", 23 | "canvasborderthickness": "1", 24 | "yaxismaxvalue": "30000", 25 | "captionpadding": "30", 26 | "linethickness": "3", 27 | "yaxisvaluespadding": "15", 28 | "legendshadow": "0", 29 | "legendborderalpha": "0", 30 | "palettecolors": "#f8bd19,#008ee4,#33bdda,#e44a00,#6baa01,#583e78", 31 | "showborder": "0" 32 | }; 33 | 34 | $scope.categories = [ 35 | { 36 | "category": [ 37 | { 38 | "label": "Jan" 39 | }, 40 | { 41 | "label": "Feb" 42 | }, 43 | { 44 | "label": "Mar" 45 | }, 46 | { 47 | "label": "Apr" 48 | }, 49 | { 50 | "label": "May" 51 | }, 52 | { 53 | "label": "Jun" 54 | }, 55 | { 56 | "label": "Jul" 57 | }, 58 | { 59 | "label": "Aug" 60 | }, 61 | { 62 | "label": "Sep" 63 | }, 64 | { 65 | "label": "Oct" 66 | }, 67 | { 68 | "label": "Nov" 69 | }, 70 | { 71 | "label": "Dec" 72 | } 73 | ] 74 | } 75 | ]; 76 | 77 | $scope.dataset = [ 78 | { 79 | "seriesname": "2013", 80 | "data": [ 81 | { 82 | "value": "22400" 83 | }, 84 | { 85 | "value": "24800" 86 | }, 87 | { 88 | "value": "21800" 89 | }, 90 | { 91 | "value": "21800" 92 | }, 93 | { 94 | "value": "24600" 95 | }, 96 | { 97 | "value": "27600" 98 | }, 99 | { 100 | "value": "26800" 101 | }, 102 | { 103 | "value": "27700" 104 | }, 105 | { 106 | "value": "23700" 107 | }, 108 | { 109 | "value": "25900" 110 | }, 111 | { 112 | "value": "26800" 113 | }, 114 | { 115 | "value": "24800" 116 | } 117 | ] 118 | }, 119 | { 120 | "seriesname": "2012", 121 | "data": [ 122 | { 123 | "value": "10000" 124 | }, 125 | { 126 | "value": "11500" 127 | }, 128 | { 129 | "value": "12500" 130 | }, 131 | { 132 | "value": "15000" 133 | }, 134 | { 135 | "value": "16000" 136 | }, 137 | { 138 | "value": "17600" 139 | }, 140 | { 141 | "value": "18800" 142 | }, 143 | { 144 | "value": "19700" 145 | }, 146 | { 147 | "value": "21700" 148 | }, 149 | { 150 | "value": "21900" 151 | }, 152 | { 153 | "value": "22900" 154 | }, 155 | { 156 | "value": "20800" 157 | } 158 | ] 159 | } 160 | ]; 161 | }); 162 | 163 | }()); 164 | -------------------------------------------------------------------------------- /demos/demosources/ex9/src.ejs: -------------------------------------------------------------------------------- 1 | <% if(src=== "js") { %> 2 | $scope.attrs = { 3 | "caption": "Sales - 2012 v 2013", 4 | "numberprefix": "$", 5 | "plotgradientcolor": "", 6 | "bgcolor": "FFFFFF", 7 | "showalternatehgridcolor": "0", 8 | "divlinecolor": "CCCCCC", 9 | "showvalues": "0", 10 | "showcanvasborder": "0", 11 | "canvasborderalpha": "0", 12 | "canvasbordercolor": "CCCCCC", 13 | "canvasborderthickness": "1", 14 | "yaxismaxvalue": "30000", 15 | "captionpadding": "30", 16 | "linethickness": "3", 17 | "yaxisvaluespadding": "15", 18 | "legendshadow": "0", 19 | "legendborderalpha": "0", 20 | "palettecolors": "#f8bd19,#008ee4,#33bdda,#e44a00,#6baa01,#583e78", 21 | "showborder": "0" 22 | }; 23 | 24 | $scope.categories = [ 25 | { 26 | "category": [ 27 | { 28 | "label": "Jan" 29 | }, 30 | { 31 | "label": "Feb" 32 | }, 33 | { 34 | "label": "Mar" 35 | }, 36 | { 37 | "label": "Apr" 38 | }, 39 | { 40 | "label": "May" 41 | }, 42 | { 43 | "label": "Jun" 44 | }, 45 | { 46 | "label": "Jul" 47 | }, 48 | { 49 | "label": "Aug" 50 | }, 51 | { 52 | "label": "Sep" 53 | }, 54 | { 55 | "label": "Oct" 56 | }, 57 | { 58 | "label": "Nov" 59 | }, 60 | { 61 | "label": "Dec" 62 | } 63 | ] 64 | } 65 | ]; 66 | 67 | $scope.dataset = [ 68 | { 69 | "seriesname": "2013", 70 | "data": [ 71 | { 72 | "value": "22400" 73 | }, 74 | { 75 | "value": "24800" 76 | }, 77 | { 78 | "value": "21800" 79 | }, 80 | { 81 | "value": "21800" 82 | }, 83 | { 84 | "value": "24600" 85 | }, 86 | { 87 | "value": "27600" 88 | }, 89 | { 90 | "value": "26800" 91 | }, 92 | { 93 | "value": "27700" 94 | }, 95 | { 96 | "value": "23700" 97 | }, 98 | { 99 | "value": "25900" 100 | }, 101 | { 102 | "value": "26800" 103 | }, 104 | { 105 | "value": "24800" 106 | } 107 | ] 108 | }, 109 | { 110 | "seriesname": "2012", 111 | "data": [ 112 | { 113 | "value": "10000" 114 | }, 115 | { 116 | "value": "11500" 117 | }, 118 | { 119 | "value": "12500" 120 | }, 121 | { 122 | "value": "15000" 123 | }, 124 | { 125 | "value": "16000" 126 | }, 127 | { 128 | "value": "17600" 129 | }, 130 | { 131 | "value": "18800" 132 | }, 133 | { 134 | "value": "19700" 135 | }, 136 | { 137 | "value": "21700" 138 | }, 139 | { 140 | "value": "21900" 141 | }, 142 | { 143 | "value": "22900" 144 | }, 145 | { 146 | "value": "20800" 147 | } 148 | ] 149 | } 150 | ]; 151 | <% } else if(src==="html") { %> 152 |
160 | <% } %> -------------------------------------------------------------------------------- /demos/images/ng-fc-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fusioncharts/angularjs-fusioncharts/b1a370cc9e08228d7d77c37cf2f82a048f4571a0/demos/images/ng-fc-logo.png -------------------------------------------------------------------------------- /demos/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Angular FusionCharts Demos 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 90 | 91 | 92 | 97 | 98 | 99 | 104 |
105 |
106 |
107 |
108 | 109 | 110 |

A Simple Chart

111 |

A simple chart with all data embedded into the directive

112 | 113 | 114 | 115 |

A 3D Pie Chart

116 |

A 3D pie chart using the datasource attribute from scope

117 | 118 | 119 | 120 |

A Column, Line and Area Combi Chart

121 |

A column, line and area combination chart using the datasource attribute

122 | 123 | 124 | 125 |

Different ways to use the directive

126 |

Use the fc-chart as a tag or as an attribute

127 | 128 | 129 | 130 |

Fetch data from a JSON URL

131 |

Fetch data remotely from a JSON file or URL

132 | 133 | 134 | 135 |

Fetch data from a XML URL

136 |

Fetch data remotely from a XML file or URL

137 | 138 | 139 | 140 |

Update chart data from scope

141 |

Change the data dynamically in the scope and watch the chart update automatically

142 | 143 | 144 | 145 |

Trigger scope event from chart

146 |

Click on a chart to trigger an event in the controller, and update the scope

147 | 148 | 149 | 150 |

Update chart attribute from scope

151 |

Change a parameter in the scope variable and see it automatically update the chart

152 | 153 | 154 | 155 |

Separate objects for attributes

156 |

Separate objects for chart attributes, dataset and categories

157 | 158 | 159 |
160 |
161 |
162 | 163 |
164 |
165 |
166 | 167 | 168 | -------------------------------------------------------------------------------- /demos/js/.gitignore: -------------------------------------------------------------------------------- 1 | angular-fusioncharts.min.js -------------------------------------------------------------------------------- /demos/js/app.js: -------------------------------------------------------------------------------- 1 | (function () { 2 | window.app = angular.module ('fusioncharts-demo', ['ngRoute', 'ng-fusioncharts', 'ui.bootstrap', 'ui.bootstrap.tpls']); 3 | app.config(['$routeProvider', function ($routeProvider) { 4 | $routeProvider.otherwise ('/demos/ex1'); 5 | }]); 6 | app.controller('DemoController', function ($scope, $routeParams, $rootScope) { 7 | setTimeout(function () { 8 | $rootScope.$watch('demoId', function (newVal) { 9 | $scope.html = window.fcDemos[newVal].html; 10 | $scope.js = window.fcDemos[newVal].js; 11 | setTimeout(function () { 12 | Prism.highlightAll (); 13 | }); 14 | }); 15 | }); 16 | }); 17 | 18 | app.directive('ngPrism',['$interpolate', function ($interpolate) { 19 | "use strict"; 20 | return { 21 | restrict: 'E', 22 | template: '
', 23 | replace:true, 24 | transclude:true, 25 | 26 | }; 27 | }]); 28 | }()); -------------------------------------------------------------------------------- /demos/js/demos/ex1.js: -------------------------------------------------------------------------------- 1 | (function () { 2 | app.config(['$routeProvider', function ($routeProvider) { 3 | $routeProvider.when ('/demos/ex1', { 4 | templateUrl: 'views/ex1.html', 5 | controller: 'ex1Controller' 6 | }); 7 | }]); 8 | 9 | 10 | app.controller('ex1Controller', function ($scope, $rootScope) { 11 | $rootScope.demoId = 'ex1'; 12 | $scope.myDataSource = { 13 | chart: { 14 | caption: "Harry's SuperMart", 15 | subCaption: "Top 5 stores in last month by revenue", 16 | numberPrefix: "$", 17 | theme: "ocean" 18 | }, 19 | data:[{ 20 | label: "Bakersfield Central", 21 | value: "880000" 22 | }, 23 | { 24 | label: "Garden Groove harbour", 25 | value: "730000" 26 | }, 27 | { 28 | label: "Los Angeles Topanga", 29 | value: "590000" 30 | }, 31 | { 32 | label: "Compton-Rancho Dom", 33 | value: "520000" 34 | }, 35 | { 36 | label: "Daly City Serramonte", 37 | value: "330000" 38 | }] 39 | }; 40 | }); 41 | 42 | }()); 43 | -------------------------------------------------------------------------------- /demos/js/demos/ex10.js: -------------------------------------------------------------------------------- 1 | (function () { 2 | app.config(['$routeProvider', function ($routeProvider) { 3 | $routeProvider.when ('/demos/ex10', { 4 | templateUrl: 'views/ex10.html', 5 | controller: 'ex10Controller' 6 | }); 7 | }]); 8 | 9 | app.controller('ex10Controller', function ($scope, $rootScope) { 10 | $rootScope.demoId = 'ex10'; 11 | }); 12 | }()); 13 | -------------------------------------------------------------------------------- /demos/js/demos/ex2.js: -------------------------------------------------------------------------------- 1 | (function () { 2 | app.config(['$routeProvider', function ($routeProvider) { 3 | $routeProvider.when ('/demos/ex2', { 4 | templateUrl: 'views/ex2.html', 5 | controller: 'ex2Controller' 6 | }); 7 | }]); 8 | 9 | 10 | app.controller('ex2Controller', function ($scope, $rootScope) { 11 | $rootScope.demoId = 'ex2'; 12 | $scope.myDataSource = { 13 | chart: { 14 | caption: "Age profile of website visitors", 15 | subcaption: "Last Year", 16 | startingangle: "120", 17 | showlabels: "0", 18 | showlegend: "1", 19 | enablemultislicing: "0", 20 | slicingdistance: "15", 21 | showpercentvalues: "1", 22 | showpercentintooltip: "0", 23 | plottooltext: "Age group : $label Total visit : $datavalue", 24 | theme: "ocean" 25 | }, 26 | data: [ 27 | { 28 | label: "Teenage", 29 | value: "1250400" 30 | }, 31 | { 32 | label: "Adult", 33 | value: "1463300" 34 | }, 35 | { 36 | label: "Mid-age", 37 | value: "1050700" 38 | }, 39 | { 40 | label: "Senior", 41 | value: "491000" 42 | } 43 | ] 44 | } 45 | }); 46 | 47 | }()); 48 | -------------------------------------------------------------------------------- /demos/js/demos/ex3.js: -------------------------------------------------------------------------------- 1 | (function () { 2 | app.config(['$routeProvider', function ($routeProvider) { 3 | $routeProvider.when ('/demos/ex3', { 4 | templateUrl: 'views/ex3.html', 5 | controller: 'ex3Controller' 6 | }); 7 | }]); 8 | 9 | 10 | app.controller('ex3Controller', function ($scope, $rootScope) { 11 | $rootScope.demoId = 'ex3'; 12 | $scope.dataSource = { 13 | "chart": { 14 | "caption": "Actual Revenues, Targeted Revenues & Profits", 15 | "subcaption": "Last year", 16 | "xaxisname": "Month", 17 | "yaxisname": "Amount (In USD)", 18 | "numberprefix": "$", 19 | "theme": "ocean", 20 | }, 21 | "categories": [ 22 | { 23 | "category": [ 24 | { 25 | "label": "Jan" 26 | }, 27 | { 28 | "label": "Feb" 29 | }, 30 | { 31 | "label": "Mar" 32 | }, 33 | { 34 | "label": "Apr" 35 | }, 36 | { 37 | "label": "May" 38 | }, 39 | { 40 | "label": "Jun" 41 | }, 42 | { 43 | "label": "Jul" 44 | }, 45 | { 46 | "label": "Aug" 47 | }, 48 | { 49 | "label": "Sep" 50 | }, 51 | { 52 | "label": "Oct" 53 | }, 54 | { 55 | "label": "Nov" 56 | }, 57 | { 58 | "label": "Dec" 59 | } 60 | ] 61 | } 62 | ], 63 | "dataset": [ 64 | { 65 | "seriesname": "Actual Revenue", 66 | "data": [ 67 | { 68 | "value": "16000" 69 | }, 70 | { 71 | "value": "20000" 72 | }, 73 | { 74 | "value": "18000" 75 | }, 76 | { 77 | "value": "19000" 78 | }, 79 | { 80 | "value": "15000" 81 | }, 82 | { 83 | "value": "21000" 84 | }, 85 | { 86 | "value": "16000" 87 | }, 88 | { 89 | "value": "20000" 90 | }, 91 | { 92 | "value": "17000" 93 | }, 94 | { 95 | "value": "25000" 96 | }, 97 | { 98 | "value": "19000" 99 | }, 100 | { 101 | "value": "23000" 102 | } 103 | ] 104 | }, 105 | { 106 | "seriesname": "Projected Revenue", 107 | "renderas": "line", 108 | "showvalues": "0", 109 | "data": [ 110 | { 111 | "value": "15000" 112 | }, 113 | { 114 | "value": "16000" 115 | }, 116 | { 117 | "value": "17000" 118 | }, 119 | { 120 | "value": "18000" 121 | }, 122 | { 123 | "value": "19000" 124 | }, 125 | { 126 | "value": "19000" 127 | }, 128 | { 129 | "value": "19000" 130 | }, 131 | { 132 | "value": "19000" 133 | }, 134 | { 135 | "value": "20000" 136 | }, 137 | { 138 | "value": "21000" 139 | }, 140 | { 141 | "value": "22000" 142 | }, 143 | { 144 | "value": "23000" 145 | } 146 | ] 147 | }, 148 | { 149 | "seriesname": "Profit", 150 | "renderas": "area", 151 | "showvalues": "0", 152 | "data": [ 153 | { 154 | "value": "4000" 155 | }, 156 | { 157 | "value": "5000" 158 | }, 159 | { 160 | "value": "3000" 161 | }, 162 | { 163 | "value": "4000" 164 | }, 165 | { 166 | "value": "1000" 167 | }, 168 | { 169 | "value": "7000" 170 | }, 171 | { 172 | "value": "1000" 173 | }, 174 | { 175 | "value": "4000" 176 | }, 177 | { 178 | "value": "1000" 179 | }, 180 | { 181 | "value": "8000" 182 | }, 183 | { 184 | "value": "2000" 185 | }, 186 | { 187 | "value": "7000" 188 | } 189 | ] 190 | } 191 | ] 192 | }; 193 | }); 194 | 195 | }()); 196 | -------------------------------------------------------------------------------- /demos/js/demos/ex4.js: -------------------------------------------------------------------------------- 1 | (function () { 2 | app.config(['$routeProvider', function ($routeProvider) { 3 | $routeProvider.when ('/demos/ex4', { 4 | templateUrl: 'views/ex4.html', 5 | controller: 'ex4Controller' 6 | }); 7 | }]); 8 | 9 | 10 | app.controller('ex4Controller', function ($scope, $rootScope) { 11 | $rootScope.demoId = 'ex4'; 12 | $scope.dataSource = { 13 | chart: { 14 | caption: "Harry's SuperMart", 15 | subCaption: "Top 5 stores in last month by revenue", 16 | numberPrefix: "$", 17 | theme: "ocean" 18 | }, 19 | data:[{ 20 | label: "Bakersfield Central", 21 | value: "880000" 22 | }, 23 | { 24 | label: "Garden Groove harbour", 25 | value: "730000" 26 | }, 27 | { 28 | label: "Los Angeles Topanga", 29 | value: "590000" 30 | }, 31 | { 32 | label: "Compton-Rancho Dom", 33 | value: "520000" 34 | }, 35 | { 36 | label: "Daly City Serramonte", 37 | value: "330000" 38 | }] 39 | }; 40 | }); 41 | 42 | }()); 43 | -------------------------------------------------------------------------------- /demos/js/demos/ex5.js: -------------------------------------------------------------------------------- 1 | (function () { 2 | app.config(['$routeProvider', function ($routeProvider) { 3 | $routeProvider.when ('/demos/ex5', { 4 | templateUrl: 'views/ex5.html', 5 | controller: 'ex5Controller' 6 | }); 7 | }]); 8 | 9 | 10 | app.controller('ex5Controller', function ($scope, $rootScope) { 11 | $rootScope.demoId = 'ex5'; 12 | }); 13 | 14 | }()); 15 | -------------------------------------------------------------------------------- /demos/js/demos/ex5a.js: -------------------------------------------------------------------------------- 1 | (function () { 2 | app.config(['$routeProvider', function ($routeProvider) { 3 | $routeProvider.when ('/demos/ex5a', { 4 | templateUrl: 'views/ex5a.html', 5 | controller: 'ex5aController' 6 | }); 7 | }]); 8 | 9 | app.controller('ex5aController', function ($scope, $rootScope) { 10 | $rootScope.demoId = 'ex5a'; 11 | }); 12 | }()); 13 | -------------------------------------------------------------------------------- /demos/js/demos/ex6.js: -------------------------------------------------------------------------------- 1 | (function () { 2 | app.config(['$routeProvider', function ($routeProvider) { 3 | $routeProvider.when ('/demos/ex6', { 4 | templateUrl: 'views/ex6.html', 5 | controller: 'ex6Controller' 6 | }); 7 | }]); 8 | 9 | 10 | app.controller('ex6Controller', function ($scope, $rootScope) { 11 | $rootScope.demoId = 'ex6'; 12 | 13 | $scope.dataSource = { 14 | chart: { 15 | caption: "Harry's SuperMart", 16 | subCaption: "Top 5 stores in last month by revenue", 17 | numberPrefix: "$", 18 | theme: "ocean" 19 | }, 20 | data:[{ 21 | label: "Bakersfield Central", 22 | value: "880000" 23 | }, 24 | { 25 | label: "Garden Groove harbour", 26 | value: "730000" 27 | }, 28 | { 29 | label: "Los Angeles Topanga", 30 | value: "590000" 31 | }, 32 | { 33 | label: "Compton-Rancho Dom", 34 | value: "520000" 35 | }, 36 | { 37 | label: "Daly City Serramonte", 38 | value: "330000" 39 | }] 40 | }; 41 | 42 | $scope.updateMyChartData = function () { 43 | $scope.dataSource.data[2].label = "This Label is Updated"; 44 | $scope.dataSource.data[2].value = "420000"; 45 | 46 | $scope.dataSource.data[3].label = "This is updated as well"; 47 | $scope.dataSource.data[3].value = "210000"; 48 | }; 49 | }); 50 | }()); 51 | -------------------------------------------------------------------------------- /demos/js/demos/ex7.js: -------------------------------------------------------------------------------- 1 | (function () { 2 | app.config(['$routeProvider', function ($routeProvider) { 3 | $routeProvider.when ('/demos/ex7', { 4 | templateUrl: 'views/ex7.html', 5 | controller: 'ex7Controller' 6 | }); 7 | }]); 8 | 9 | 10 | app.controller('ex7Controller', function ($scope, $rootScope) { 11 | $rootScope.demoId = 'ex7'; 12 | 13 | $scope.dataSource = { 14 | chart: { 15 | caption: "Harry's SuperMart", 16 | subCaption: "Top 5 stores in last month by revenue", 17 | numberPrefix: "$", 18 | theme: "ocean" 19 | }, 20 | data:[{ 21 | label: "Bakersfield Central", 22 | value: "880000" 23 | }, 24 | { 25 | label: "Garden Groove harbour", 26 | value: "730000" 27 | }, 28 | { 29 | label: "Los Angeles Topanga", 30 | value: "590000" 31 | }, 32 | { 33 | label: "Compton-Rancho Dom", 34 | value: "520000" 35 | }, 36 | { 37 | label: "Daly City Serramonte", 38 | value: "330000" 39 | }] 40 | }; 41 | $scope.selectedValue = "nothing"; 42 | 43 | $scope.events = { 44 | dataplotclick: function (ev, props) { 45 | $scope.$apply(function () { 46 | $scope.selectedValue = props.displayValue; 47 | }); 48 | } 49 | } 50 | }); 51 | 52 | }()); -------------------------------------------------------------------------------- /demos/js/demos/ex8.js: -------------------------------------------------------------------------------- 1 | (function () { 2 | app.config(['$routeProvider', function ($routeProvider) { 3 | $routeProvider.when ('/demos/ex8', { 4 | templateUrl: 'views/ex8.html', 5 | controller: 'ex8Controller' 6 | }); 7 | }]); 8 | 9 | 10 | app.controller('ex8Controller', function ($scope, $rootScope) { 11 | $rootScope.demoId = 'ex8'; 12 | 13 | $scope.dataSource = { 14 | chart: { 15 | caption: "Harry's SuperMart", 16 | subCaption: "Top 5 stores in last month by revenue", 17 | numberPrefix: "$", 18 | theme: "ocean" 19 | }, 20 | data:[{ 21 | label: "Bakersfield Central", 22 | value: "880000" 23 | }, 24 | { 25 | label: "Garden Groove harbour", 26 | value: "730000" 27 | }, 28 | { 29 | label: "Los Angeles Topanga", 30 | value: "590000" 31 | }, 32 | { 33 | label: "Compton-Rancho Dom", 34 | value: "520000" 35 | }, 36 | { 37 | label: "Daly City Serramonte", 38 | value: "330000" 39 | }] 40 | }; 41 | 42 | $scope.changeBackgroundColor = function () { 43 | $scope.dataSource.chart.bgColor = "#efefef"; 44 | }; 45 | 46 | $scope.changeCaptionTextAlignment = function () { 47 | $scope.dataSource.chart.captionAlignment = "left"; 48 | }; 49 | }); 50 | 51 | }()); -------------------------------------------------------------------------------- /demos/js/demos/ex9.js: -------------------------------------------------------------------------------- 1 | (function () { 2 | app.config(['$routeProvider', function ($routeProvider) { 3 | $routeProvider.when ('/demos/ex9', { 4 | templateUrl: 'views/ex9.html', 5 | controller: 'ex9Controller' 6 | }); 7 | }]); 8 | 9 | 10 | app.controller('ex9Controller', function ($scope, $rootScope) { 11 | $rootScope.demoId = 'ex9'; 12 | $scope.attrs = { 13 | "caption": "Sales - 2012 v 2013", 14 | "numberprefix": "$", 15 | "plotgradientcolor": "", 16 | "bgcolor": "FFFFFF", 17 | "showalternatehgridcolor": "0", 18 | "divlinecolor": "CCCCCC", 19 | "showvalues": "0", 20 | "showcanvasborder": "0", 21 | "canvasborderalpha": "0", 22 | "canvasbordercolor": "CCCCCC", 23 | "canvasborderthickness": "1", 24 | "yaxismaxvalue": "30000", 25 | "captionpadding": "30", 26 | "linethickness": "3", 27 | "yaxisvaluespadding": "15", 28 | "legendshadow": "0", 29 | "legendborderalpha": "0", 30 | "palettecolors": "#f8bd19,#008ee4,#33bdda,#e44a00,#6baa01,#583e78", 31 | "showborder": "0" 32 | }; 33 | 34 | $scope.categories = [ 35 | { 36 | "category": [ 37 | { 38 | "label": "Jan" 39 | }, 40 | { 41 | "label": "Feb" 42 | }, 43 | { 44 | "label": "Mar" 45 | }, 46 | { 47 | "label": "Apr" 48 | }, 49 | { 50 | "label": "May" 51 | }, 52 | { 53 | "label": "Jun" 54 | }, 55 | { 56 | "label": "Jul" 57 | }, 58 | { 59 | "label": "Aug" 60 | }, 61 | { 62 | "label": "Sep" 63 | }, 64 | { 65 | "label": "Oct" 66 | }, 67 | { 68 | "label": "Nov" 69 | }, 70 | { 71 | "label": "Dec" 72 | } 73 | ] 74 | } 75 | ]; 76 | 77 | $scope.dataset = [ 78 | { 79 | "seriesname": "2013", 80 | "data": [ 81 | { 82 | "value": "22400" 83 | }, 84 | { 85 | "value": "24800" 86 | }, 87 | { 88 | "value": "21800" 89 | }, 90 | { 91 | "value": "21800" 92 | }, 93 | { 94 | "value": "24600" 95 | }, 96 | { 97 | "value": "27600" 98 | }, 99 | { 100 | "value": "26800" 101 | }, 102 | { 103 | "value": "27700" 104 | }, 105 | { 106 | "value": "23700" 107 | }, 108 | { 109 | "value": "25900" 110 | }, 111 | { 112 | "value": "26800" 113 | }, 114 | { 115 | "value": "24800" 116 | } 117 | ] 118 | }, 119 | { 120 | "seriesname": "2012", 121 | "data": [ 122 | { 123 | "value": "10000" 124 | }, 125 | { 126 | "value": "11500" 127 | }, 128 | { 129 | "value": "12500" 130 | }, 131 | { 132 | "value": "15000" 133 | }, 134 | { 135 | "value": "16000" 136 | }, 137 | { 138 | "value": "17600" 139 | }, 140 | { 141 | "value": "18800" 142 | }, 143 | { 144 | "value": "19700" 145 | }, 146 | { 147 | "value": "21700" 148 | }, 149 | { 150 | "value": "21900" 151 | }, 152 | { 153 | "value": "22900" 154 | }, 155 | { 156 | "value": "20800" 157 | } 158 | ] 159 | } 160 | ]; 161 | }); 162 | 163 | }()); 164 | -------------------------------------------------------------------------------- /demos/src/codebox.ejs: -------------------------------------------------------------------------------- 1 | 2 | {{ html }} 3 | {{ js }} 4 | -------------------------------------------------------------------------------- /demos/src/data.json: -------------------------------------------------------------------------------- 1 | { 2 | "chart": { 3 | "caption": "Monthly revenue for last year", 4 | "subCaption": "Harry's SuperMart", 5 | "xAxisName": "Month", 6 | "yAxisName": "Revenues (In USD)", 7 | "numberPrefix": "$", 8 | "paletteColors": "#0075c2", 9 | "bgColor": "#ffffff", 10 | "borderAlpha": "20", 11 | "canvasBorderAlpha": "0", 12 | "usePlotGradientColor": "0", 13 | "plotBorderAlpha": "10", 14 | "placevaluesInside": "1", 15 | "rotatevalues": "1", 16 | "valueFontColor": "#ffffff", 17 | "showXAxisLine": "1", 18 | "xAxisLineColor": "#999999", 19 | "divlineColor": "#999999", 20 | "divLineDashed": "1", 21 | "showAlternateHGridColor": "0", 22 | "subcaptionFontBold": "0", 23 | "subcaptionFontSize": "14" 24 | }, 25 | "data": [ 26 | { 27 | "label": "Jan", 28 | "value": "420000" 29 | }, 30 | { 31 | "label": "Feb", 32 | "value": "810000" 33 | }, 34 | { 35 | "label": "Mar", 36 | "value": "720000" 37 | }, 38 | { 39 | "label": "Apr", 40 | "value": "550000" 41 | }, 42 | { 43 | "label": "May", 44 | "value": "910000" 45 | }, 46 | { 47 | "label": "Jun", 48 | "value": "510000" 49 | }, 50 | { 51 | "label": "Jul", 52 | "value": "680000" 53 | }, 54 | { 55 | "label": "Aug", 56 | "value": "620000" 57 | }, 58 | { 59 | "label": "Sep", 60 | "value": "610000" 61 | }, 62 | { 63 | "label": "Oct", 64 | "value": "490000" 65 | }, 66 | { 67 | "label": "Nov", 68 | "value": "900000" 69 | }, 70 | { 71 | "label": "Dec", 72 | "value": "730000" 73 | } 74 | ], 75 | "trendlines": [ 76 | { 77 | "line": [ 78 | { 79 | "startvalue": "700000", 80 | "color": "#1aaf5d", 81 | "valueOnRight": "1", 82 | "displayvalue": "Monthly Target" 83 | } 84 | ] 85 | } 86 | ] 87 | } -------------------------------------------------------------------------------- /demos/src/index.ejs: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Angular FusionCharts Demos 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | <% for(var i=0; i 16 | 17 | <% } %> 18 | 27 | 28 | 29 | 34 | 35 | 36 | 41 |
42 |
43 |
44 |
45 | <% for(var i=0; i 46 | 47 |

<%= demos[i].title %>

48 |

<%= demos[i].desc %>

49 | 50 | <% } %> 51 |
52 |
53 |
54 | 55 |
56 |
57 |
58 | 59 | -------------------------------------------------------------------------------- /demos/src/index.ghpages.ejs: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Angular FusionCharts Demos 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | <% for(var i=0; i 16 | 17 | <% } %> 18 | 27 | 28 | 29 | 72 | 73 | 74 |
75 |
76 |
77 | 79 |

80 |
81 |
82 | 83 |

Angular-FusionCharts

84 |

Simple and effective AngularJS bindings for FusionCharts JavaScript Charting Library.

85 |

Download (0.0.1-alpha4)

86 |
87 |
88 |
89 |

About Angular-FusionCharts

90 |

91 | This project provides AngularJS bindings for FusionCharts JavaScript Charting Library. It makes adding rich, interactive charting to your Angular JS Projects easy and works in the Angular Way. 92 |

93 |
94 |
95 |

Features

96 |

97 |

    98 |
  • Add a chart using just a single directive
    • 99 |
  • Auto-updates your chart object on modifying scope
    • 100 |
  • Angular-friendly events let you call controller functions directly from the chart
    • 101 |
  • Offers advanced control by giving you access to full FusionCharts object
    • 102 |
  • Has variety of ways to add a chart, from JSON URL to Scope Array Binding
    • 103 |
  • Plenty of examples and good documentation (coming soon)
    • 104 |
105 |

106 |
107 |
108 |

Community

109 |

110 |

116 | 117 |

Support

118 |

Simply open up a github issue with your question/bug report/suggestion.

119 |
120 |
121 |
122 |
123 |
124 | <% for(var i=0; i 125 | 126 |

<%= demos[i].title %>

127 |

<%= demos[i].desc %>

128 | 129 | <% } %> 130 |
131 |
132 |
133 | 134 |
135 |
136 |
137 |

QuickStart

138 |

Step 1: Include angular-fusioncharts.js

139 |

In your HTML, include angular-fusioncharts.js after all other scripts:

140 | 
<script type="text/javascript" src="/path/to/fusioncharts.js"></script>
141 | <script type="text/javascript" src="/path/to/angular.js"></script>
142 | <script type="text/javascript" src="/path/to/angular-fusioncharts.js"></script>
143 |

Step 2: Include ng-fusioncharts in your module

144 |

In the app, include ng-fusioncharts as a dependency. If you looking for where to add the dependency, look for the call to angular.module in your code.

145 | 
angular.module("myApp", ["ng-fusioncharts"])
146 |

Step 3: Add the fc-chart directive

147 |

In your HTML, find the section where you wish to add the chart and add a <div> with the fc-chart directive. We are assuming it's inside a controller called MyController which would change based on your usage.

148 | 
<div ng-controller="MyController">
149 |   <div fc-chart
150 |        fc-width="600"
151 |        fc-height="400"
152 |        fc-type="column2d"
153 |        fc-dataSource="" >
154 |   </div>
155 | </div>
156 |

Now this is bound to a datasource with the myDataSource scope object.

157 |

Step 4: Populate required variables in controller

158 |

In the previous code, we are binding to a scope variable myDataSource, but that hasn't been defined yet.

159 |

In your controller, set the DataSource as you would for a regular FusionCharts JSON Format DataSource (see this tutorial for a general introduction to this format).

160 | 
app.controller('MyController', function ($scope) {
161 |   $scope.myDataSource = {
162 |     chart: {
163 |         caption: "Harry's SuperMart",
164 |         subCaption: "Top 5 stores in last month by revenue",
165 |     },
166 |     data:[{
167 |         label: "Bakersfield Central",
168 |         value: "880000"
169 |     },
170 |     {
171 |         label: "Garden Groove harbour",
172 |         value: "730000"
173 |     },
174 |     {
175 |         label: "Los Angeles Topanga",
176 |         value: "590000"
177 |     },
178 |     {
179 |         label: "Compton-Rancho Dom",
180 |         value: "520000"
181 |     },
182 |     {
183 |         label: "Daly City Serramonte",
184 |         value: "330000"
185 |     }]
186 |   };
187 | });
188 |

And your chart should display when you load the page.

189 |

Licensing

190 |

Angular-FusionCharts is open-source and distributed under the terms of the MIT/X11 License. You will still need to download and include FusionCharts in your page. This project provides no direct functionality. You can Download an evaluation. You will still need to purchase a FusionCharts license to use in a commercial environment (FusionCharts is free for non-commercial and personal use) .

191 | 192 |
193 |
194 |
195 | 196 | 197 | -------------------------------------------------------------------------------- /demos/views/ex1.html: -------------------------------------------------------------------------------- 1 | 7 | {{ html }} 8 | {{ js }} 9 | -------------------------------------------------------------------------------- /demos/views/ex10.html: -------------------------------------------------------------------------------- 1 | 2 | {{ html }} 3 | {{ js }} 4 | -------------------------------------------------------------------------------- /demos/views/ex2.html: -------------------------------------------------------------------------------- 1 | 7 | {{ html }} 8 | {{ js }} 9 | -------------------------------------------------------------------------------- /demos/views/ex3.html: -------------------------------------------------------------------------------- 1 |
7 | {{ html }} 8 | {{ js }} 9 | -------------------------------------------------------------------------------- /demos/views/ex4.html: -------------------------------------------------------------------------------- 1 | 7 |
13 | 14 | {{ html }} 15 | {{ js }} 16 | -------------------------------------------------------------------------------- /demos/views/ex5.html: -------------------------------------------------------------------------------- 1 | 2 | {{ html }} 3 | {{ js }} 4 | -------------------------------------------------------------------------------- /demos/views/ex5a.html: -------------------------------------------------------------------------------- 1 | 2 | {{ html }} 3 | {{ js }} 4 | -------------------------------------------------------------------------------- /demos/views/ex6.html: -------------------------------------------------------------------------------- 1 |
7 |

Click me to change data

8 | {{ html }} 9 | {{ js }} 10 | -------------------------------------------------------------------------------- /demos/views/ex7.html: -------------------------------------------------------------------------------- 1 |
8 |

The value that you have selected is: {{ selectedValue }}

9 | {{ html }} 10 | {{ js }} 11 | -------------------------------------------------------------------------------- /demos/views/ex8.html: -------------------------------------------------------------------------------- 1 |
7 |

Change chart background color 8 | Make Caption text left-aligned 9 |

10 | {{ html }} 11 | {{ js }} 12 | -------------------------------------------------------------------------------- /demos/views/ex9.html: -------------------------------------------------------------------------------- 1 |
9 | {{ html }} 10 | {{ js }} 11 | -------------------------------------------------------------------------------- /dist/angular-fusioncharts.js: -------------------------------------------------------------------------------- 1 | // The MIT License (MIT) 2 | // 3 | // Copyright (c) 2014 FusionCharts, Inc. 4 | // 5 | // Permission is hereby granted, free of charge, to any person obtaining a copy 6 | // of this software and associated documentation files (the "Software"), to deal 7 | // in the Software without restriction, including without limitation the rights 8 | // to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | // copies of the Software, and to permit persons to whom the Software is 10 | // furnished to do so, subject to the following conditions: 11 | // 12 | // The above copyright notice and this permission notice shall be included in all 13 | // copies or substantial portions of the Software. 14 | // 15 | // THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | // IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | // FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | // AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | // LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | // SOFTWARE. 22 | (function() { 23 | var fc = angular.module('ng-fusioncharts', []), 24 | scope = { 25 | width: '@', 26 | height: '@', 27 | data: '@', 28 | dataset: '@', 29 | categories: '@', 30 | chart: '@', 31 | linkeddata: '@', 32 | trendlines: '@', 33 | vtrendlines: '@', 34 | annotations: '@', 35 | colorrange: '@', 36 | lineset: '@', 37 | axis: '@', 38 | connectors: '@', 39 | pointers: '@', 40 | value: '@', 41 | processes: '@', 42 | tasks: '@', 43 | rows: '@', 44 | columns: '@', 45 | map: '@', 46 | markers: '@', 47 | initialized: '&', 48 | datasourceDt: '=datasourceDt' 49 | }, 50 | fcEvents = [ 51 | 'beforelinkeditemopen', 52 | 'linkeditemopened', 53 | 'beforelinkeditemclose', 54 | 'linkeditemclosed', 55 | 'printreadystatechange', 56 | 'dataloadrequestcompleted', 57 | 'dataloaderror', 58 | 'dataloadcancelled', 59 | 'dataloadrequestcancelled', 60 | 'dataupdated', 61 | 'dataupdatecancelled', 62 | 'dataloadrequested', 63 | 'beforedataupdate', 64 | 'realtimeupdatecomplete', 65 | 'chartcleared', 66 | 'slicingend', 67 | 'slicingstart', 68 | 'entityrollout', 69 | 'entityrollover', 70 | 'entityclick', 71 | 'connectorrollover', 72 | 'connectorrollout', 73 | 'connectorclick', 74 | 'markerrollover', 75 | 'markerrollout', 76 | 'markerclick', 77 | 'pagenavigated', 78 | 'rotationend', 79 | 'rotationstart', 80 | 'centerlabelrollover', 81 | 'centerlabelrollout', 82 | 'centerlabelclick', 83 | 'centerlabelchanged', 84 | 'chartclick', 85 | 'chartmousemove', 86 | 'chartrollover', 87 | 'chartrollout', 88 | 'backgroundloaded', 89 | 'backgroundloaderror', 90 | 'legenditemclicked', 91 | 'legenditemrollover', 92 | 'legenditemrollout', 93 | 'logorollover', 94 | 'logorollout', 95 | 'logoclick', 96 | 'logoloaded', 97 | 'logoloaderror', 98 | 'beforeexport', 99 | 'exported', 100 | 'exportcancelled', 101 | 'beforeprint', 102 | 'printcomplete', 103 | 'printcancelled', 104 | 'datalabelclick', 105 | 'datalabelrollover', 106 | 'datalabelrollout', 107 | 'scrollstart', 108 | 'scrollend', 109 | 'onscroll', 110 | 'zoomreset', 111 | 'zoomedout', 112 | 'zoomedin', 113 | 'zoomed', 114 | 'zoommodechanged', 115 | 'pinned', 116 | 'datarestored', 117 | 'beforedatasubmit', 118 | 'datasubmiterror', 119 | 'datasubmitted', 120 | 'datasubmitcancelled', 121 | 'chartupdated', 122 | 'nodeadded', 123 | 'nodeupdated', 124 | 'nodedeleted', 125 | 'connectoradded', 126 | 'connectorupdated', 127 | 'connectordeleted', 128 | 'labeladded', 129 | 'labeldeleted', 130 | 'selectionremoved', 131 | 'selectionstart', 132 | 'selectionend', 133 | 'labelclick', 134 | 'labelrollover', 135 | 'labelrollout', 136 | 'labeldragstart', 137 | 'labeldragend', 138 | 'dataplotdragstart', 139 | 'dataplotdragend', 140 | 'processclick', 141 | 'processrollover', 142 | 'processrollout', 143 | 'categoryclick', 144 | 'categoryrollover', 145 | 'categoryrollout', 146 | 'milestoneclick', 147 | 'milestonerollover', 148 | 'milestonerollout', 149 | 'charttypechanged', 150 | 'overlaybuttonclick', 151 | 'loaded', 152 | 'rendered', 153 | 'drawcomplete', 154 | 'rendercomplete', 155 | 'datainvalid', 156 | 'dataxmlinvalid', 157 | 'dataloaded', 158 | 'nodatatodisplay', 159 | 'legendpointerdragstart', 160 | 'legendpointerdragstop', 161 | 'legendrangeupdated', 162 | 'alertcomplete', 163 | 'realtimeupdateerror', 164 | 'dataplotrollover', 165 | 'dataplotrollout', 166 | 'dataplotclick', 167 | 'linkclicked', 168 | 'beforerender', 169 | 'rendercancelled', 170 | 'beforeresize', 171 | 'resized', 172 | 'resizecancelled', 173 | 'beforedispose', 174 | 'disposed', 175 | 'disposecancelled', 176 | 'linkedchartinvoked', 177 | 'beforedrilldown', 178 | 'drilldown', 179 | 'beforedrillup', 180 | 'drillup', 181 | 'drilldowncancelled', 182 | 'drillupcancelled' 183 | ], 184 | currIndex, 185 | eventName, 186 | eventsLen = fcEvents.length; 187 | for (currIndex = 0; currIndex < eventsLen; currIndex++) { 188 | eventName = 189 | 'fcevent' + 190 | fcEvents[currIndex][0].toUpperCase() + 191 | fcEvents[currIndex].slice(1); 192 | scope[eventName] = '&'; 193 | } 194 | 195 | fc.directive('fusioncharts', [ 196 | '$http', 197 | function($http) { 198 | return { 199 | scope: scope, 200 | link: function(scope, element, attrs) { 201 | function updateData() { 202 | // no need to check for key. datasourceDt is 2 way binded. 203 | // also scope.datasourceDt.key = data; is logically wrong. 204 | chart.setJSONData(scope.datasourceDt); 205 | } 206 | 207 | function createWatchersForAttrs(datasource) { 208 | const keys = Object.keys(datasource); 209 | keys.forEach(function(key) { 210 | const isDeep = key !== 'data'; 211 | scope.$watch( 212 | 'datasourceDt.' + key, 213 | function(newData, oldData) { 214 | if (newData !== oldData && isDeep) updateData(); 215 | }, 216 | isDeep 217 | ); 218 | }); 219 | } 220 | 221 | var observeConf = { 222 | // non-data componenet observers 223 | NDCObserver: { 224 | width: { 225 | ifExist: false, 226 | observer: function(newVal) { 227 | if (newVal && chartConfigObject.width != newVal) { 228 | chartConfigObject.width = newVal; 229 | chart.resizeTo(scope.width, scope.height); 230 | } 231 | } 232 | }, 233 | height: { 234 | ifExist: false, 235 | observer: function(newVal) { 236 | if (newVal && chartConfigObject.height != newVal) { 237 | chartConfigObject.height = newVal; 238 | chart.resizeTo(scope.width, scope.height); 239 | } 240 | } 241 | }, 242 | datasource: { 243 | ifExist: true, 244 | observer: function(newVal) { 245 | if (dataStringStore.dataSource != newVal) { 246 | dataStringStore.dataSource = newVal; 247 | if (chartConfigObject.dataFormat === 'json') { 248 | chartConfigObject.dataSource = JSON.parse(newVal); 249 | setChartData(); 250 | } else { 251 | chartConfigObject.dataSource = newVal; 252 | if (chartConfigObject.dataFormat === 'xml') { 253 | chart.setXMLData(newVal); 254 | } else if (chartConfigObject.dataFormat === 'jsonurl') { 255 | chart.setJSONUrl(newVal); 256 | } else if (chartConfigObject.dataFormat === 'xmlurl') { 257 | chart.setXMLUrl(newVal); 258 | } 259 | } 260 | } 261 | } 262 | }, 263 | type: { 264 | ifExist: false, 265 | observer: function(newVal) { 266 | if (newVal && chartConfigObject.type != newVal) { 267 | chartConfigObject.type = newVal; 268 | // createFCChart(); 269 | chart.chartType(newVal); 270 | } 271 | } 272 | }, 273 | config: { 274 | ifExist: false, 275 | observer: function(newVal) { 276 | var configObj, 277 | attr, 278 | doReRender = false; 279 | if (newVal) { 280 | configObj = JSON.parse(newVal); 281 | for (attr in configObj) { 282 | // detect the value change 283 | if (chartConfigObject[attr] != configObj[attr]) { 284 | doReRender = true; 285 | chartConfigObject[attr] = configObj[attr]; 286 | } 287 | } 288 | if (doReRender) { 289 | createFCChart(); 290 | } 291 | } 292 | } 293 | } 294 | }, 295 | // data componenet observers 296 | DCObserver: { 297 | chart: { 298 | ifExist: true, 299 | observer: function(newVal) { 300 | if ( 301 | chartConfigObject.dataFormat === 'json' && 302 | typeof chartConfigObject.dataSource == 'object' && 303 | dataStringStore.chart != newVal 304 | ) { 305 | dataStringStore.chart = newVal; 306 | chartConfigObject.dataSource.chart = JSON.parse(newVal); 307 | setChartData(); 308 | } 309 | } 310 | }, 311 | data: { 312 | ifExist: true, 313 | observer: function(newVal) { 314 | if ( 315 | chartConfigObject.dataFormat === 'json' && 316 | typeof chartConfigObject.dataSource == 'object' && 317 | dataStringStore.data != newVal 318 | ) { 319 | dataStringStore.data = newVal; 320 | chartConfigObject.dataSource.data = JSON.parse(newVal); 321 | setChartData(); 322 | } 323 | } 324 | }, 325 | categories: { 326 | ifExist: true, 327 | observer: function(newVal) { 328 | if ( 329 | chartConfigObject.dataFormat === 'json' && 330 | typeof chartConfigObject.dataSource == 'object' && 331 | dataStringStore.categories != newVal 332 | ) { 333 | dataStringStore.categories = newVal; 334 | chartConfigObject.dataSource.categories = JSON.parse( 335 | newVal 336 | ); 337 | setChartData(); 338 | } 339 | } 340 | }, 341 | dataset: { 342 | ifExist: true, 343 | observer: function(newVal) { 344 | if ( 345 | chartConfigObject.dataFormat === 'json' && 346 | typeof chartConfigObject.dataSource == 'object' && 347 | dataStringStore.dataset != newVal 348 | ) { 349 | dataStringStore.dataset = newVal; 350 | chartConfigObject.dataSource.dataset = JSON.parse(newVal); 351 | setChartData(); 352 | } 353 | } 354 | }, 355 | linkeddata: { 356 | ifExist: true, 357 | observer: function(newVal) { 358 | if ( 359 | chartConfigObject.dataFormat === 'json' && 360 | typeof chartConfigObject.dataSource == 'object' && 361 | dataStringStore.linkeddata != newVal 362 | ) { 363 | dataStringStore.linkeddata = newVal; 364 | chartConfigObject.dataSource.linkeddata = JSON.parse( 365 | newVal 366 | ); 367 | setChartData(); 368 | } 369 | } 370 | }, 371 | trendlines: { 372 | ifExist: true, 373 | observer: function(newVal) { 374 | if ( 375 | chartConfigObject.dataFormat === 'json' && 376 | typeof chartConfigObject.dataSource == 'object' && 377 | dataStringStore.trendlines != newVal 378 | ) { 379 | dataStringStore.trendlines = newVal; 380 | chartConfigObject.dataSource.trendlines = JSON.parse( 381 | newVal 382 | ); 383 | setChartData(); 384 | } 385 | } 386 | }, 387 | vtrendlines: { 388 | ifExist: true, 389 | observer: function(newVal) { 390 | if ( 391 | chartConfigObject.dataFormat === 'json' && 392 | typeof chartConfigObject.dataSource == 'object' && 393 | dataStringStore.vtrendlines != newVal 394 | ) { 395 | dataStringStore.vtrendlines = newVal; 396 | chartConfigObject.dataSource.vtrendlines = JSON.parse( 397 | newVal 398 | ); 399 | setChartData(); 400 | } 401 | } 402 | }, 403 | annotations: { 404 | ifExist: true, 405 | observer: function(newVal) { 406 | if ( 407 | chartConfigObject.dataFormat === 'json' && 408 | typeof chartConfigObject.dataSource == 'object' && 409 | dataStringStore.annotations != newVal 410 | ) { 411 | dataStringStore.annotations = newVal; 412 | chartConfigObject.dataSource.annotations = JSON.parse( 413 | newVal 414 | ); 415 | setChartData(); 416 | } 417 | } 418 | }, 419 | colorrange: { 420 | ifExist: true, 421 | observer: function(newVal) { 422 | if ( 423 | chartConfigObject.dataFormat === 'json' && 424 | typeof chartConfigObject.dataSource == 'object' && 425 | dataStringStore.colorrange != newVal 426 | ) { 427 | dataStringStore.colorrange = newVal; 428 | chartConfigObject.dataSource.colorrange = JSON.parse( 429 | newVal 430 | ); 431 | setChartData(); 432 | } 433 | } 434 | }, 435 | lineset: { 436 | ifExist: true, 437 | observer: function(newVal) { 438 | if ( 439 | chartConfigObject.dataFormat === 'json' && 440 | typeof chartConfigObject.dataSource == 'object' && 441 | dataStringStore.lineset != newVal 442 | ) { 443 | dataStringStore.lineset = newVal; 444 | chartConfigObject.dataSource.lineset = JSON.parse(newVal); 445 | setChartData(); 446 | } 447 | } 448 | }, 449 | axis: { 450 | ifExist: true, 451 | observer: function(newVal) { 452 | if ( 453 | chartConfigObject.dataFormat === 'json' && 454 | typeof chartConfigObject.dataSource == 'object' && 455 | dataStringStore.axis != newVal 456 | ) { 457 | dataStringStore.axis = newVal; 458 | chartConfigObject.dataSource.axis = JSON.parse(newVal); 459 | setChartData(); 460 | } 461 | } 462 | }, 463 | connectors: { 464 | ifExist: true, 465 | observer: function(newVal) { 466 | if ( 467 | chartConfigObject.dataFormat === 'json' && 468 | typeof chartConfigObject.dataSource == 'object' && 469 | dataStringStore.connectors != newVal 470 | ) { 471 | dataStringStore.connectors = newVal; 472 | chartConfigObject.dataSource.connectors = JSON.parse( 473 | newVal 474 | ); 475 | setChartData(); 476 | } 477 | } 478 | }, 479 | pointers: { 480 | ifExist: true, 481 | observer: function(newVal) { 482 | if ( 483 | chartConfigObject.dataFormat === 'json' && 484 | typeof chartConfigObject.dataSource == 'object' && 485 | dataStringStore.pointers != newVal 486 | ) { 487 | dataStringStore.pointers = newVal; 488 | chartConfigObject.dataSource.pointers = JSON.parse( 489 | newVal 490 | ); 491 | setChartData(); 492 | } 493 | } 494 | }, 495 | value: { 496 | ifExist: true, 497 | observer: function(newVal) { 498 | if ( 499 | chartConfigObject.dataFormat === 'json' && 500 | typeof chartConfigObject.dataSource == 'object' && 501 | dataStringStore.value != newVal 502 | ) { 503 | dataStringStore.value = newVal; 504 | chartConfigObject.dataSource.value = JSON.parse(newVal); 505 | setChartData(); 506 | } 507 | } 508 | }, 509 | processes: { 510 | ifExist: true, 511 | observer: function(newVal) { 512 | if ( 513 | chartConfigObject.dataFormat === 'json' && 514 | typeof chartConfigObject.dataSource == 'object' && 515 | dataStringStore.processes != newVal 516 | ) { 517 | dataStringStore.processes = newVal; 518 | chartConfigObject.dataSource.processes = JSON.parse( 519 | newVal 520 | ); 521 | setChartData(); 522 | } 523 | } 524 | }, 525 | tasks: { 526 | ifExist: true, 527 | observer: function(newVal) { 528 | if ( 529 | chartConfigObject.dataFormat === 'json' && 530 | typeof chartConfigObject.dataSource == 'object' && 531 | dataStringStore.tasks != newVal 532 | ) { 533 | dataStringStore.tasks = newVal; 534 | chartConfigObject.dataSource.tasks = JSON.parse(newVal); 535 | setChartData(); 536 | } 537 | } 538 | }, 539 | rows: { 540 | ifExist: true, 541 | observer: function(newVal) { 542 | if ( 543 | chartConfigObject.dataFormat === 'json' && 544 | typeof chartConfigObject.dataSource == 'object' && 545 | dataStringStore.rows != newVal 546 | ) { 547 | dataStringStore.rows = newVal; 548 | chartConfigObject.dataSource.rows = JSON.parse(newVal); 549 | setChartData(); 550 | } 551 | } 552 | }, 553 | columns: { 554 | ifExist: true, 555 | observer: function(newVal) { 556 | if ( 557 | chartConfigObject.dataFormat === 'json' && 558 | typeof chartConfigObject.dataSource == 'object' && 559 | dataStringStore.columns != newVal 560 | ) { 561 | dataStringStore.columns = newVal; 562 | chartConfigObject.dataSource.columns = JSON.parse(newVal); 563 | setChartData(); 564 | } 565 | } 566 | }, 567 | map: { 568 | ifExist: true, 569 | observer: function(newVal) { 570 | if ( 571 | chartConfigObject.dataFormat === 'json' && 572 | typeof chartConfigObject.dataSource == 'object' && 573 | dataStringStore.map != newVal 574 | ) { 575 | dataStringStore.map = newVal; 576 | chartConfigObject.dataSource.map = JSON.parse(newVal); 577 | setChartData(); 578 | } 579 | } 580 | }, 581 | markers: { 582 | ifExist: true, 583 | observer: function(newVal) { 584 | if ( 585 | chartConfigObject.dataFormat === 'json' && 586 | typeof chartConfigObject.dataSource == 'object' && 587 | dataStringStore.markers != newVal 588 | ) { 589 | dataStringStore.markers = newVal; 590 | chartConfigObject.dataSource.markers = JSON.parse(newVal); 591 | setChartData(); 592 | } 593 | } 594 | } 595 | } 596 | }, 597 | eventsObj = {}, 598 | attribs = Object.keys(attrs), 599 | chart = null, 600 | events = { 601 | '*': function(ev, props) { 602 | if (eventsObj.hasOwnProperty(ev.eventType)) { 603 | eventsObj[ev.eventType](ev, props); 604 | } 605 | } 606 | }, 607 | setDataTimer, 608 | setChartData = function() { 609 | // clear previous dataUpdate timer 610 | if (setDataTimer) { 611 | clearTimeout(setDataTimer); 612 | } 613 | // Update the data with setTimeout 614 | // This will solve the issue of consiquitive data update within very small interval 615 | setDataTimer = setTimeout(function() { 616 | if (chart && chart.setJSONData) { 617 | chart.setJSONData(chartConfigObject.dataSource); 618 | } 619 | }, 0); 620 | // chart.setJSONData(chartConfigObject.dataSource); 621 | }, 622 | createFCChart = function() { 623 | // dispose if previous chart exists 624 | if (chart && chart.dispose) { 625 | chart.dispose(); 626 | } 627 | chart = new FusionCharts(chartConfigObject); 628 | scope.initialized && scope.initialized({ chart: chart }); 629 | for (currIndex = 0; currIndex < eventsLen; currIndex++) { 630 | eventName = 631 | 'fcevent' + 632 | fcEvents[currIndex][0].toUpperCase() + 633 | fcEvents[currIndex].slice(1); 634 | // assign all events on chart instance 635 | (function(eventName) { 636 | chart.addEventListener(fcEvents[currIndex], function( 637 | event, 638 | args 639 | ) { 640 | scope[eventName] && 641 | scope[eventName]({ event: event, args: args }); 642 | }); 643 | })(eventName); 644 | } 645 | /* @todo validate the ready function whether it can be replaced in a better way */ 646 | angular.element(document).ready(function() { 647 | element.ready(function() { 648 | // Render the chart only when angular is done compiling the element and DOM. 649 | chart = chart.render(); 650 | scope[attrs.chartobject] = chart; 651 | }); 652 | }); 653 | }, 654 | dataStringStore = {}, 655 | i, 656 | attr, 657 | _eobj, 658 | key, 659 | observableAttr, 660 | chartConfigObject, 661 | configObj, 662 | dataComponent, 663 | eventScopeArr, 664 | l; 665 | 666 | if (attrs.events) { 667 | eventScopeArr = attrs.events.split('.'); 668 | l = eventScopeArr.length; 669 | _eobj = scope.$parent; 670 | for (i = 0; i < l; i += 1) { 671 | _eobj = _eobj && _eobj[eventScopeArr[i]]; 672 | } 673 | if (_eobj) { 674 | for (key in _eobj) { 675 | if (_eobj.hasOwnProperty(key)) { 676 | eventsObj[key.toLowerCase()] = _eobj[key]; 677 | } 678 | } 679 | } 680 | } 681 | 682 | for (i = 0; i < attribs.length; i++) { 683 | attr = attribs[i]; 684 | if (attr.match(/^on/i)) { 685 | key = attr.slice(2).toLowerCase(); 686 | eventsObj[key] = scope.$parent[attrs[attr]]; 687 | } 688 | } 689 | 690 | chartConfigObject = { 691 | type: attrs.type, 692 | width: attrs.width, 693 | height: attrs.height, 694 | renderAt: element[0], 695 | id: attrs.chartid, 696 | dataFormat: attrs.dataformat || 'json', 697 | dataSource: {}, 698 | events: events 699 | }; 700 | 701 | for (observableAttr in observeConf.NDCObserver) { 702 | attrConfig = observeConf.NDCObserver[observableAttr]; 703 | if (attrConfig.ifExist === false || attrs[observableAttr]) { 704 | attrs.$observe(observableAttr, attrConfig.observer); 705 | } 706 | } 707 | 708 | if (attrs.datasource) { 709 | chartConfigObject.dataSource = 710 | chartConfigObject.dataFormat === 'json' 711 | ? JSON.parse(attrs.datasource) 712 | : attrs.datasource; 713 | dataStringStore.dataSource = attrs.datasource; 714 | } 715 | 716 | for (observableAttr in observeConf.DCObserver) { 717 | attrConfig = observeConf.DCObserver[observableAttr]; 718 | dataComponent = attrs[observableAttr]; 719 | if (dataComponent) { 720 | attrs.$observe(observableAttr, attrConfig.observer); 721 | dataStringStore[observableAttr] = dataComponent; 722 | if ( 723 | chartConfigObject.dataFormat === 'json' && 724 | typeof chartConfigObject.dataSource === 'object' 725 | ) { 726 | chartConfigObject.dataSource[observableAttr] = JSON.parse( 727 | dataComponent 728 | ); 729 | } 730 | } else if (attrConfig.ifExist === false) { 731 | attrs.$observe(observableAttr, attrConfig.observer); 732 | } 733 | } 734 | 735 | // add configurations from config 736 | if (attrs.config) { 737 | configObj = JSON.parse(attrs.config); 738 | for (attr in configObj) { 739 | chartConfigObject[attr] = configObj[attr]; 740 | } 741 | } 742 | 743 | createFCChart(); 744 | 745 | if (attrs.type.toLowerCase() === 'timeseries' && scope.datasourceDt) { 746 | scope.$watch( 747 | 'datasourceDt.data', 748 | function(newData, oldData) { 749 | if (newData !== oldData) updateData(); 750 | }, 751 | false 752 | ); 753 | createWatchersForAttrs(scope.datasourceDt); 754 | // set the data anyway, initially. 755 | chart.setJSONData(scope.datasourceDt); 756 | } else if (scope.datasourceDt) { 757 | attrs.datasourceDt = scope.datasourceDt; 758 | chartConfigObject.dataSource = scope.datasourceDt; 759 | dataStringStore.dataSource = scope.datasourceDt; 760 | setChartData(); 761 | scope.$watch( 762 | 'datasourceDt', 763 | function(newData, oldData) { 764 | if (newData !== oldData) { 765 | chartConfigObject.dataSource = scope.datasourceDt; 766 | dataStringStore.dataSource = scope.datasourceDt; 767 | setChartData(); 768 | if (chartConfigObject.dataFormat === 'json') { 769 | setChartData(); 770 | } else { 771 | if (chartConfigObject.dataFormat === 'xml') { 772 | chart.setXMLData(newData); 773 | } else if (chartConfigObject.dataFormat === 'jsonurl') { 774 | chart.setJSONUrl(newData); 775 | } else if (chartConfigObject.dataFormat === 'xmlurl') { 776 | chart.setXMLUrl(newData); 777 | } 778 | } 779 | } 780 | }, 781 | true 782 | ); 783 | } 784 | 785 | scope.$on('$destroy', function() { 786 | // on destroy free used resources to avoid memory leaks 787 | if (chart && chart.dispose) { 788 | chart.dispose(); 789 | } 790 | }); 791 | } 792 | }; 793 | } 794 | ]); 795 | })(); 796 | -------------------------------------------------------------------------------- /dist/angular-fusioncharts.min.js: -------------------------------------------------------------------------------- 1 | /*! angularjs-fusioncharts - v5.0.3*/ 2 | 3 | !function(){var a,b,c=angular.module("ng-fusioncharts",[]),d={width:"@",height:"@",data:"@",dataset:"@",categories:"@",chart:"@",linkeddata:"@",trendlines:"@",vtrendlines:"@",annotations:"@",colorrange:"@",lineset:"@",axis:"@",connectors:"@",pointers:"@",value:"@",processes:"@",tasks:"@",rows:"@",columns:"@",map:"@",markers:"@",initialized:"&",datasourceDt:"=datasourceDt"},e=["beforelinkeditemopen","linkeditemopened","beforelinkeditemclose","linkeditemclosed","printreadystatechange","dataloadrequestcompleted","dataloaderror","dataloadcancelled","dataloadrequestcancelled","dataupdated","dataupdatecancelled","dataloadrequested","beforedataupdate","realtimeupdatecomplete","chartcleared","slicingend","slicingstart","entityrollout","entityrollover","entityclick","connectorrollover","connectorrollout","connectorclick","markerrollover","markerrollout","markerclick","pagenavigated","rotationend","rotationstart","centerlabelrollover","centerlabelrollout","centerlabelclick","centerlabelchanged","chartclick","chartmousemove","chartrollover","chartrollout","backgroundloaded","backgroundloaderror","legenditemclicked","legenditemrollover","legenditemrollout","logorollover","logorollout","logoclick","logoloaded","logoloaderror","beforeexport","exported","exportcancelled","beforeprint","printcomplete","printcancelled","datalabelclick","datalabelrollover","datalabelrollout","scrollstart","scrollend","onscroll","zoomreset","zoomedout","zoomedin","zoomed","zoommodechanged","pinned","datarestored","beforedatasubmit","datasubmiterror","datasubmitted","datasubmitcancelled","chartupdated","nodeadded","nodeupdated","nodedeleted","connectoradded","connectorupdated","connectordeleted","labeladded","labeldeleted","selectionremoved","selectionstart","selectionend","labelclick","labelrollover","labelrollout","labeldragstart","labeldragend","dataplotdragstart","dataplotdragend","processclick","processrollover","processrollout","categoryclick","categoryrollover","categoryrollout","milestoneclick","milestonerollover","milestonerollout","charttypechanged","overlaybuttonclick","loaded","rendered","drawcomplete","rendercomplete","datainvalid","dataxmlinvalid","dataloaded","nodatatodisplay","legendpointerdragstart","legendpointerdragstop","legendrangeupdated","alertcomplete","realtimeupdateerror","dataplotrollover","dataplotrollout","dataplotclick","linkclicked","beforerender","rendercancelled","beforeresize","resized","resizecancelled","beforedispose","disposed","disposecancelled","linkedchartinvoked","beforedrilldown","drilldown","beforedrillup","drillup","drilldowncancelled","drillupcancelled"],f=e.length;for(a=0;a 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 13 | 14 | 18 | 22 | 23 | 24 | 25 |
26 |
33 |
40 |
48 |
56 | 57 |
58 | 59 | 60 | -------------------------------------------------------------------------------- /example/index.js: -------------------------------------------------------------------------------- 1 | var jsonify = res => res.json(); 2 | var dataFetch = fetch( 3 | 'https://s3.eu-central-1.amazonaws.com/fusion.store/ft/data/line-chart-with-time-axis-data.json' 4 | ).then(jsonify); 5 | var schemaFetch = fetch( 6 | 'https://s3.eu-central-1.amazonaws.com/fusion.store/ft/schema/line-chart-with-time-axis-schema.json' 7 | ).then(jsonify); 8 | 9 | var app = angular.module('myApp', ['ng-fusioncharts']); 10 | 11 | app.controller('MyController', function($scope) { 12 | $scope.timeSeriesDS = { 13 | data: null, 14 | caption: { 15 | text: 'Sales Analysis' 16 | }, 17 | subcaption: { 18 | text: 'Grocery' 19 | }, 20 | yAxis: [ 21 | { 22 | plot: { 23 | value: 'Grocery Sales Value', 24 | type: 'line' 25 | }, 26 | format: { 27 | prefix: '$' 28 | }, 29 | title: 'Sale Value' 30 | } 31 | ] 32 | }; 33 | 34 | $scope.columnDS = { 35 | chart: { 36 | caption: 'Countries With Most Oil Reserves [2017-18]', 37 | subCaption: 'In MMbbl = One Million barrels', 38 | xAxisName: 'Country', 39 | yAxisName: 'Reserves (MMbbl)', 40 | numberSuffix: 'K', 41 | theme: 'fusion' 42 | }, 43 | data: [ 44 | { label: 'Venezuela', value: '290' }, 45 | { label: 'Saudi', value: '260' }, 46 | { label: 'Canada', value: '180' }, 47 | { label: 'Iran', value: '140' }, 48 | { label: 'Russia', value: '115' }, 49 | { label: 'UAE', value: '100' }, 50 | { label: 'US', value: '30' }, 51 | { label: 'China', value: '30' } 52 | ] 53 | }; 54 | 55 | $scope.update = function() { 56 | $scope.timeSeriesDS.caption.text = 'Something Else'; 57 | $scope.columnDS.chart.caption = 'Something Else'; 58 | $scope.columnDS.data[1].value = '340'; 59 | }; 60 | 61 | Promise.all([dataFetch, schemaFetch]).then(res => { 62 | const data = res[0]; 63 | const schema = res[1]; 64 | const fusionTable = new FusionCharts.DataStore().createDataTable( 65 | data, 66 | schema 67 | ); 68 | $scope.$apply(function() { 69 | $scope.timeSeriesDS.data = fusionTable; 70 | }); 71 | }); 72 | }); 73 | 74 | // getData(); 75 | -------------------------------------------------------------------------------- /grunt-tasks/compile_demos.js: -------------------------------------------------------------------------------- 1 | var fs = require('fs'); 2 | var path = require('path'); 3 | var ejs = require('ejs'); 4 | module.exports = function (grunt) { 5 | var demosRoot = "./demos/demosources"; 6 | var demosList = fs.readdirSync (demosRoot); 7 | 8 | 9 | grunt.task.registerMultiTask('makeDemos', 'Makes the Demo Browser app', function () { 10 | var options = this.options({ 11 | 12 | }); 13 | var mainTemplate = grunt.file.read('./demos/src/' + options.mainTemplate); 14 | var codeboxTemplate = grunt.file.read('./demos/src/codebox.ejs'); 15 | 16 | var demosMeta = []; 17 | grunt.file.mkdir (options.out + '/js/demos'); 18 | grunt.file.mkdir (options.out + '/views'); 19 | grunt.file.mkdir (options.out + '/data'); 20 | 21 | for(var i=0; i