AngularJs and Realtimechart

[Desmodue]

Hi

 

I am using AngularJS 1.4. I have the required fusionchart.js modules loaded

 

<!-- build:js(.) scripts/vendor.js -->

<script type="text/javascript" src="bower_components/fusioncharts-suite-xt/js/fusioncharts.js"></script>

<script type="text/javascript" src="bower_components/fusioncharts-suite-xt/js/fusioncharts.widgets.js"></script>

<!-- bower:js -->

<script src="bower_components/jquery/dist/jquery.js"></script>

<script src="bower_components/angular/angular.js"></script>

<script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>

<script src="bower_components/angular-animate/angular-animate.js"></script>

<script src="bower_components/angular-cookies/angular-cookies.js"></script>

<script src="bower_components/angular-resource/angular-resource.js"></script>

<script src="bower_components/angular-route/angular-route.js"></script>

<script src="bower_components/angular-sanitize/angular-sanitize.js"></script>

<script src="bower_components/angular-touch/angular-touch.js"></script>

<!-- endbower -->

<script src="bower_components/angular-fusioncharts/angular-fusioncharts.min.js"></script>

<!-- endbuild -->

 

I have a view with just this HTML

 

<fusioncharts dataformat="jsonurl" datasource="torque" type="RealTimeLine" width="600" height="400"></fusioncharts>

 

The controller for the page has the example json setup data

 

		$scope.torque = {
			chart: {
				manageresize: '1',
				bgcolor: '000000',
				bgalpha: '100',
				canvasborderthickness: '1',
				canvasbordercolor: '008040',
				canvasbgcolor: '000000',
				yaxismaxvalue: '100',
				decimals: '0',
				numdivlines: '9',
				numvdivlines: '28',
				numdisplaysets: '30',
				divlinecolor: '008040',
				vdivlinecolor: '008040',
				divlinealpha: '100',
				chartleftmargin: '10',
				basefontcolor: '00dd00',
				showrealtimevalue: '1',
				datastreamurl: '/torque',
				refreshinterval: '2',
				numbersuffix: '%',
				labeldisplay: 'rotate',
				slantlabels: '1',
				tooltipbgcolor: '000000',
				tooltipbordercolor: '008040',
				basefontsize: '11',
				showalternatehgridcolor: '0',
				legendbgcolor: '000000',
				legendbordercolor: '008040',
				legendpadding: '35',
				showlabels: '1',
				showborder: '0',
				useMessageLog: '1',
				showRTMenuItem: '1'
			},
			categories: [{
				category: [{
					label: 'Start'
				}]
			}],
			dataset: [
				{
					color: '00 dd00',
					seriesname: 'Processor A',
					showvalues: '0',
					alpha: '100',
					anchoralpha: '0',
					linethickness: '2',
					data: [{
						value: '0'
					}]
				}, {
					color: 'ff5904',
					seriesname: 'Processor B',
					showvalues: '0',
					alpha: '100',
					anchoralpha: '0',
					linethickness: '2',
					data: [{
						value: '0'
					}]
				}]
		};

My back end serves a JSON object for the /torque URL

{"dataset":[{"data":[{"value":0.24336521932855248}]},{"data":[{"value":0.21534751658327878}]}]}

The URL is called on page refresh. The chart displays , has no errors, does not give an invalid data error.

However the url is not poled again for more data ?

I have the refreshinterval: '2' set, which should be every 2 seconds.

 

What am I doing wrong ?

 

Regards

 

Gary

 

 

 

 

 

 

 

[Desmodue]

Don't know how I missed this !!!

I was missing {{}} around the datasource !

 

 datasource="torque" should be datasource="{{torque}}"

 

However I did get an invalid URI error in the browser with dataformat="jsonurl". Removing this and changing the server to issue &value=34|25 format responses cured it. All now functions.

[Swarnam]