From 993c36efd6ddb8e8d5228b21ec3db89ef3ef77e2 Mon Sep 17 00:00:00 2001 From: Rohan Dey Date: Fri, 4 Jan 2019 15:38:54 +0530 Subject: [PATCH 1/3] Added initial support for timeseries --- dist/angular-fusioncharts.js | 39 +++++++++++++++---- dist/angular-fusioncharts.min.js | 2 +- example/index.html | 67 +++++++++++++++----------------- src/angular-fusioncharts.js | 39 +++++++++++++++---- 4 files changed, 96 insertions(+), 51 deletions(-) diff --git a/dist/angular-fusioncharts.js b/dist/angular-fusioncharts.js index 3e98898..c051e8c 100644 --- a/dist/angular-fusioncharts.js +++ b/dist/angular-fusioncharts.js @@ -44,7 +44,8 @@ columns: '@', map: '@', markers: '@', - initialized: '&' + initialized: '&', + datasourceDt: '=datasourceDt' }, fcEvents = [ 'beforelinkeditemopen', @@ -197,6 +198,36 @@ return { scope: scope, link: function(scope, element, attrs) { + function updateData(key, data) { + scope.datasourceDt.key = data; + chart.setJSONData(scope.datasourceDt); + } + + function createWatchersForAttrs(datasource) { + const keys = Object.keys(datasource); + keys.forEach(function(key) { + const isDeep = key !== 'data'; + scope.$watch( + 'datasourceDt.' + key, + function(newData, oldData) { + if (newData !== oldData && isDeep) updateData(key, newData); + }, + isDeep + ); + }); + } + + if (scope.datasourceDt) { + scope.$watch( + 'datasourceDt.data', + function(newData, oldData) { + if (newData !== oldData) updateData(newData, 'data'); + }, + false + ); + createWatchersForAttrs(scope.datasourceDt); + } + var observeConf = { // non-data componenet observers NDCObserver: { @@ -221,7 +252,6 @@ datasource: { ifExist: true, observer: function(newVal) { - console.log('datasource'); if (dataStringStore.dataSource != newVal) { dataStringStore.dataSource = newVal; if (chartConfigObject.dataFormat === 'json') { @@ -291,7 +321,6 @@ data: { ifExist: true, observer: function(newVal) { - console.log('data'); if ( chartConfigObject.dataFormat === 'json' && typeof chartConfigObject.dataSource == 'object' && @@ -587,7 +616,6 @@ }, setDataTimer, setChartData = function() { - console.log('setChartData'); // clear previous dataUpdate timer if (setDataTimer) { clearTimeout(setDataTimer); @@ -603,7 +631,6 @@ // chart.setJSONData(chartConfigObject.dataSource); }, createFCChart = function() { - console.log('createFCChart'); // dispose if previous chart exists if (chart && chart.dispose) { chart.dispose(); @@ -688,8 +715,6 @@ } } - console.log(attrs.datasource); - if (attrs.datasource) { chartConfigObject.dataSource = chartConfigObject.dataFormat === 'json' diff --git a/dist/angular-fusioncharts.min.js b/dist/angular-fusioncharts.min.js index 6848346..ece3036 100644 --- a/dist/angular-fusioncharts.min.js +++ b/dist/angular-fusioncharts.min.js @@ -1,3 +1,3 @@ /*! angularjs-fusioncharts - v4.0.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:"&"},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 { const data = res[0]; const schema = res[1]; - const fusionTable = new FusionCharts.DataStore().createDataTable( + fusionTable = new FusionCharts.DataStore().createDataTable( data, schema ); - ft = fusionTable; - console.log(ft); + console.log('Done'); + app.controller('MyController', function($scope) { + $scope.timeSeriesDS.data = fusionTable; + $scope.$apply(); + }); }); } - getData(); - app.controller('MyController', function($scope) { $scope.timeSeriesDS = { caption: { text: 'Online Sales of a SuperStore in the US' }, @@ -62,14 +61,7 @@ ] }; - $scope.update = function() { - $scope.timeSeriesDS.data = ft; - }; - }); - - /* - app.controller('MyController', function($scope) { - $scope.dataSource = { + $scope.columnDS = { chart: { caption: 'Countries With Most Oil Reserves [2017-18]', subCaption: 'In MMbbl = One Million barrels', @@ -79,7 +71,7 @@ theme: 'fusion' }, data: [ - { label: 'Venezuela', value: '29' }, + { label: 'Venezuela', value: '290' }, { label: 'Saudi', value: '260' }, { label: 'Canada', value: '180' }, { label: 'Iran', value: '140' }, @@ -90,38 +82,41 @@ ] }; - $scope.timeSeriesDS = { - caption: { text: 'Online Sales of a SuperStore in the US' }, - data: null, - yAxis: [ - { - plot: [ - { - value: 'Sales ($)' - } - ] - } - ] + $scope.update = function() { + $scope.timeSeriesDS.caption.text = 'Something Else'; + $scope.columnDS.chart.caption = 'Something Else'; }; - }) - */ + + Promise.all([dataFetch, schemaFetch]).then(res => { + const data = res[0]; + const schema = res[1]; + const fusionTable = new FusionCharts.DataStore().createDataTable( + data, + schema + ); + $scope.timeSeriesDS.data = fusionTable; + $scope.$apply(); + }); + }); + + // getData();
- + type="timeseries" + >
diff --git a/src/angular-fusioncharts.js b/src/angular-fusioncharts.js index 3e98898..c051e8c 100644 --- a/src/angular-fusioncharts.js +++ b/src/angular-fusioncharts.js @@ -44,7 +44,8 @@ columns: '@', map: '@', markers: '@', - initialized: '&' + initialized: '&', + datasourceDt: '=datasourceDt' }, fcEvents = [ 'beforelinkeditemopen', @@ -197,6 +198,36 @@ return { scope: scope, link: function(scope, element, attrs) { + function updateData(key, data) { + scope.datasourceDt.key = data; + chart.setJSONData(scope.datasourceDt); + } + + function createWatchersForAttrs(datasource) { + const keys = Object.keys(datasource); + keys.forEach(function(key) { + const isDeep = key !== 'data'; + scope.$watch( + 'datasourceDt.' + key, + function(newData, oldData) { + if (newData !== oldData && isDeep) updateData(key, newData); + }, + isDeep + ); + }); + } + + if (scope.datasourceDt) { + scope.$watch( + 'datasourceDt.data', + function(newData, oldData) { + if (newData !== oldData) updateData(newData, 'data'); + }, + false + ); + createWatchersForAttrs(scope.datasourceDt); + } + var observeConf = { // non-data componenet observers NDCObserver: { @@ -221,7 +252,6 @@ datasource: { ifExist: true, observer: function(newVal) { - console.log('datasource'); if (dataStringStore.dataSource != newVal) { dataStringStore.dataSource = newVal; if (chartConfigObject.dataFormat === 'json') { @@ -291,7 +321,6 @@ data: { ifExist: true, observer: function(newVal) { - console.log('data'); if ( chartConfigObject.dataFormat === 'json' && typeof chartConfigObject.dataSource == 'object' && @@ -587,7 +616,6 @@ }, setDataTimer, setChartData = function() { - console.log('setChartData'); // clear previous dataUpdate timer if (setDataTimer) { clearTimeout(setDataTimer); @@ -603,7 +631,6 @@ // chart.setJSONData(chartConfigObject.dataSource); }, createFCChart = function() { - console.log('createFCChart'); // dispose if previous chart exists if (chart && chart.dispose) { chart.dispose(); @@ -688,8 +715,6 @@ } } - console.log(attrs.datasource); - if (attrs.datasource) { chartConfigObject.dataSource = chartConfigObject.dataFormat === 'json' From 3986fabd62f519022da3f44d648976e2e23c3394 Mon Sep 17 00:00:00 2001 From: Rohan Dey Date: Fri, 4 Jan 2019 15:55:16 +0530 Subject: [PATCH 2/3] Separated js code in a file for example --- example/index.html | 83 +--------------------------------------------- example/index.js | 75 +++++++++++++++++++++++++++++++++++++++++ 2 files changed, 76 insertions(+), 82 deletions(-) create mode 100644 example/index.js diff --git a/example/index.html b/example/index.html index 68c8b79..37c3a0c 100644 --- a/example/index.html +++ b/example/index.html @@ -19,88 +19,7 @@ type="text/javascript" src="../dist/angular-fusioncharts.js" > - +
diff --git a/example/index.js b/example/index.js new file mode 100644 index 0000000..49bd1b2 --- /dev/null +++ b/example/index.js @@ -0,0 +1,75 @@ +var jsonify = res => res.json(); +var dataFetch = fetch( + 'https://raw.githubusercontent.com/fusioncharts/dev_centre_docs/fusiontime-beta-release/charts-resources/fusiontime/online-sales-single-series/data.json' +).then(jsonify); +var schemaFetch = fetch( + 'https://raw.githubusercontent.com/fusioncharts/dev_centre_docs/fusiontime-beta-release/charts-resources/fusiontime/online-sales-single-series/schema.json' +).then(jsonify); + +var app = angular.module('myApp', ['ng-fusioncharts']); + +function getData() { + Promise.all([dataFetch, schemaFetch]).then(res => { + const data = res[0]; + const schema = res[1]; + fusionTable = new FusionCharts.DataStore().createDataTable(data, schema); + console.log('Done'); + app.controller('MyController', function($scope) { + $scope.timeSeriesDS.data = fusionTable; + $scope.$apply(); + }); + }); +} + +app.controller('MyController', function($scope) { + $scope.timeSeriesDS = { + caption: { text: 'Online Sales of a SuperStore in the US' }, + data: null, + yAxis: [ + { + plot: [ + { + value: 'Sales ($)' + } + ] + } + ] + }; + + $scope.columnDS = { + chart: { + caption: 'Countries With Most Oil Reserves [2017-18]', + subCaption: 'In MMbbl = One Million barrels', + xAxisName: 'Country', + yAxisName: 'Reserves (MMbbl)', + numberSuffix: 'K', + theme: 'fusion' + }, + data: [ + { label: 'Venezuela', value: '290' }, + { label: 'Saudi', value: '260' }, + { label: 'Canada', value: '180' }, + { label: 'Iran', value: '140' }, + { label: 'Russia', value: '115' }, + { label: 'UAE', value: '100' }, + { label: 'US', value: '30' }, + { label: 'China', value: '30' } + ] + }; + + $scope.update = function() { + $scope.timeSeriesDS.caption.text = 'Something Else'; + $scope.columnDS.chart.caption = 'Something Else'; + }; + + Promise.all([dataFetch, schemaFetch]).then(res => { + const data = res[0]; + const schema = res[1]; + const fusionTable = new FusionCharts.DataStore().createDataTable( + data, + schema + ); + $scope.timeSeriesDS.data = fusionTable; + $scope.$apply(); + }); +}); From 5b2f2eed256e84227ceac7cda72641dddb80b816 Mon Sep 17 00:00:00 2001 From: Rohan Dey Date: Fri, 4 Jan 2019 18:33:39 +0530 Subject: [PATCH 3/3] Fixed README --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 303376a..21dbef3 100644 --- a/README.md +++ b/README.md @@ -399,7 +399,7 @@ Again in your `index.html` width="600" height="400" type="timeseries" - datasource-dt="{{dataSource}}"> + datasource-dt="dataSource"> // When using TimeSeries pass your dataSource in "datasource-dt" attribute not in "datasource".