I'm having some trouble creating a bar chart using crossfilter, dc.js, and angular-dc. The rowchart is working properly, but the barchart is not displaying the bars. When I inspect the element in Chrome, I can see the values, and when I force focus, the chart appears. I've tried various suggestions, but it seems like there are three main issues:
- All bars start at 0 on the x-axis.
- The width of each bar is only 1px.
- The bars are not rendering on the screen.
Can someone provide a solution to the above problems? I followed this link to create my barchart: https://github.com/TomNeyland/angular-dc/blob/master/example/stocks/nasdaq.html
Is there any other helpful link related to creating bar charts using angular-dc?
Here is a snippet of the code being used:
<!DOCTYPE html>
<html lang="en">
<head>
<title>dc.js - Pie Chart Example</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="public/lib/dcjs/web/css/dc.css"/>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js"></script>
<script type="text/javascript" src="public/lib/d3/d3.js"></script>
<script type="text/javascript" src="public/lib/crossfilter/crossfilter.js"></script>
<script type="text/javascript" src="public/lib/dcjs/dc.js"></script>
<script type="text/javascript" src="public/lib/angular/angular.js"></script>
<script type="text/javascript" src="public/lib/angular-dc/dist/angular-dc.js"></script>
</head>
<body ng-app="app">
<div ng-controller="myController">
<div dc-chart="pieChart"
dc-chart-group="1"
dc-width="780"
dc-height="480"
dc-inner-radius="100"
dc-dimension="fruit"
dc-group="fruitSales"
dc-legend="dc.legend()">
</div>
<div dc-chart="barChart"
dc-width="780"
dc-height="480"
dc-dimension="fruit"
dc-group="fruitSales"
dc-x="d3.scale.ordinal().domain(['','Apple','Banana'])"
dc-xUnits ="dc-units-ordinal"
dc-elastic-y="true"
dc-center-bar="true"
dc-gap="1"
dc-bar-padding="0.5"
dc-xAxisPadding="50"
dc-legend="dc.legend()">
</div>
</div>
</div>
<script type="text/javascript">
angular.module("app", ["angularDc"]);
myController = function($scope) {
var fruitCf = crossfilter([
{Name: 'Apple', Sales: 40},
{Name: 'Apple', Sales: 40},
{Name: 'Banana', Sales: 20}]);
$scope.fruit = fruitCf.dimension(function(d) {return d.Name;});
$scope.fruitSales = $scope.fruit.group().reduceSum(function(d) {return d.Sales;});
};
</script>
</body>
</html>