Sign in to follow this  

AngularJs and Realtimechart

Recommended Posts



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


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 ?









Share this post

Link to post
Share on other sites

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.

Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this