Example code for line chart not working.

[garretwilson]

I'm trying out Angular Chart with Angular 1.5. I copied an example right off their home page:

<canvas id="line" class="chart chart-line" chart-data="data"
  chart-labels="labels" chart-series="series" chart-options="options"
  chart-dataset-override="datasetOverride" chart-click="onClick">
</canvas>

I even copied the sample JavaScript into my controller. Yet absolutely nothing shows up.

In Bug #591, somebody else was having the same problem, but they closed that issue so I'm opening this one. I have also asked a question on Stack Overflow.

Their site looks so professional---surely their library isn't broken! I must be making some stupid mistake. Any ideas?

(On second thought, looking at Angular Chart GitHub project, it seems like it hasn't been updated for quite a while. Maybe I should try to find a different charting library for Angular.)

[shafeerambatt]

<title>Chart_Tutorials</title> <script src="angular.js" ></script> <script src="Chart.js"></script> <script src="angular-chart.min.js"></script>

	<div ng-app = "app" ng-controller = "LineCtrl">
	<canvas id="line" class="chart chart-line" chart-data="data" chart-labels="labels" chart-series="series" chart-options="options" chart-dataset-override="datasetOverride" chart-click="onClick">
	</canvas>
	</div>
	
	<script>
		var linechart = angular.module("app", ["chart.js"]);
		linechart.controller("LineCtrl", function ($scope) { $scope.labels = ["January", "February", "March", "April", "May", "June", "July"];$scope.series = ['Series A', 'Series B'];
		$scope.data = [[65, 59, 80, 81, 56, 55, 40],[28, 48, 40, 19, 86, 27, 90]];
		$scope.onClick = function (points, evt) {
		console.log(points, evt);};
		$scope.datasetOverride = [{ yAxisID: 'y-axis-1' }, { yAxisID: 'y-axis-2' }];
		$scope.options = {
			scales: {
				yAxes: [
			        {
			          id: 'y-axis-1',
			          type: 'linear',
			          display: true,
			          position: 'left'
			        },
			        {
			          id: 'y-axis-2',
			          type: 'linear',
			          display: true,
			          position: 'right'
			        }
			      ]
			    }
			  };
			});
	</script>



</body>

[shafeerambatt]

I made some minor changes in the javascript given in the site, and it worked. See the code above. Hope it helps.

[shafeerambatt]

@garretwilson did it work for you?

[garretwilson]

I gave up and switched to Angular-nvD3, built on top of NVD3, in turn built on top of D3, the hugely extensive, flexible, and popular data-driven document library which goes far beyond charts. It uses SVG, and the data representation for a scatter plot is more intuitive that Angular Chart. Tip: Currently nvD3 only supports D3 v3.x.

[Ygilany]

@garretwilson okay, This might not make any sense. But I only put the canvas element within a div and it worked

The canvas needs to be in a div wrapper apparently .. hope it may help someone

[laryssamagalhaes]

@Ygilany it worked! :)