Johnathan Johnathan - 2 months ago 9
AngularJS Question

D3plus boxplots don't appear when I use Angular's directive angular-d3plus

This post is a follow up of: I am trying to inject a partial template in Angular that contains a graph
Essentially, I have an Angular app, and I am trying to inject a partial template called "employees.html" when I click "employee" on a dropdown menu.

Thanks to previous answers, I can call a d3plus boxplot with an Angualr controller (angular-d3plus.js: https://github.com/mariohmol/angular-d3plus) . I am using the box demo: http://codepen.io/mariomol/pen/vGNQaV
just to make it first work.

However, the boxplots are extremely faint (I can barely see them on my screen):

enter image description here

Normally, they should appear clearly: http://d3plus.org/examples/basic/78018ce8c3787d4e30d9/
Is it because I am interfering with CSS somehow?

Here is my updated employees.html:

<div data-ng-app="myModule">
<div data-ng-controller="employeesController">
<d3plus-box data="base_data" id='name' y="value" x="year"></d3plus-box>
</div>
</div>


Here is my updated Angular module (I am using test data):

/// <reference path="angular.min.js" />

var app = angular.module("myModule", ['ngRoute','angular-d3plus'])
.config(function ($routeProvider) {
$routeProvider
.when('/cases', { // Root: initialize with cases
templateUrl: 'templates/cases.html',
controller: 'casesController'
})
.when('/protocols', { // Root: initialize with cases
templateUrl: 'templates/protocols.html',
controller: 'protocolsController'
})
.when('/employees', {
templateUrl: 'templates/employees.html',
controller: 'employeesController'
})
})
.controller('casesController', function ($scope) {
$scope.message = "Cases!";
})
.controller('protocolsController', function ($scope) {
$scope.message = "This is the protocols page!";
})
.controller('employeesController', function ($scope, $http) {
$http.get('dataWebService.asmx/getTotalForDateIntervalEmployees', {
params: { startDate: '2015-01-01', endDate: '2016-08-01' }
})
.then(function (response) {
$scope.base_data = [
{ "year": 1991, "name": "alpha", "value": 15, "group": "black" },
{ "year": 1991, "name": "beta", "value": -10, "group": "black" },
{ "year": 1991, "name": "gamma", "value": 5, "group": "black" },
{ "year": 1991, "name": "delta", "value": -50, "group": "black" },
{ "year": 1992, "name": "alpha", "value": 20, "group": "black" },
{ "year": 1992, "name": "beta", "value": -10, "group": "black" },
{ "year": 1992, "name": "gamma", "value": 10, "group": "black" },
{ "year": 1992, "name": "delta", "value": -43, "group": "black" },
{ "year": 1993, "name": "alpha", "value": 30, "group": "black" },
{ "year": 1993, "name": "beta", "value": -40, "group": "black" },
{ "year": 1993, "name": "gamma", "value": 20, "group": "black" },
{ "year": 1993, "name": "delta", "value": -17, "group": "black" },
{ "year": 1994, "name": "alpha", "value": 60, "group": "black" },
{ "year": 1994, "name": "beta", "value": -60, "group": "black" },
{ "year": 1994, "name": "gamma", "value": 25, "group": "black" },
{ "year": 1994, "name": "delta", "value": -32, "group": "black" }
];

});
});


Thank you very much for your time!

EDIT:

I am trying yo make D3plus accept non-date value for boxplot and reduce space between rows in bootstrap

Answer

good to know that you are using.

In your case, is not because you are making a get and the .then() must receive a error callback as well?

here is a example using your code:

http://codepen.io/mariomol/pen/BLjmGV?editors=1111

<div data-ng-app="myModule"> 
 <div data-ng-controller="employeesController">
   <h1>Hello</h1>
    <d3plus-box data="base_data" id='name' y="value" x="year"></d3plus-box>
   -----------
 </div>

var app = angular.module("myModule", ['ngRoute','angular-d3plus'])
             .config(function ($routeProvider) {

                 $routeProvider
                     .when('/cases', { // Root: initialize with cases
                         templateUrl: 'templates/cases.html',
                         controller: 'casesController'
                     })
                     .when('/protocols', { // Root: initialize with cases
                         templateUrl: 'templates/protocols.html',
                         controller: 'protocolsController'
                     })
                     .when('/employees', {
                         templateUrl: 'templates/employees.html',
                         controller: 'employeesController'
                     })
             })
            .controller('casesController', function ($scope) {
                $scope.message = "Cases!";
            })
            .controller('protocolsController', function ($scope) {
                $scope.message = "This is the protocols page!";
            })
            .controller('employeesController', function ($scope, $http) {


    $http.get('http://google.com')
                .then(function (response) {

                    $scope.base_data = [
      { "year": 1991, "name": "alpha", "value": 15, "group": "black" },
      { "year": 1991, "name": "beta", "value": -10, "group": "black" },
      { "year": 1991, "name": "gamma", "value": 5, "group": "black" },
      { "year": 1991, "name": "delta", "value": -50, "group": "black" },
      { "year": 1992, "name": "alpha", "value": 20, "group": "black" },
      { "year": 1992, "name": "beta", "value": -10, "group": "black" },
      { "year": 1992, "name": "gamma", "value": 10, "group": "black" },
      { "year": 1992, "name": "delta", "value": -43, "group": "black" },
      { "year": 1993, "name": "alpha", "value": 30, "group": "black" },
      { "year": 1993, "name": "beta", "value": -40, "group": "black" },
      { "year": 1993, "name": "gamma", "value": 20, "group": "black" },
      { "year": 1993, "name": "delta", "value": -17, "group": "black" },
      { "year": 1994, "name": "alpha", "value": 60, "group": "black" },
      { "year": 1994, "name": "beta", "value": -60, "group": "black" },
      { "year": 1994, "name": "gamma", "value": 25, "group": "black" },
      { "year": 1994, "name": "delta", "value": -32, "group": "black" }
                    ];


    },function(error){

                 $scope.base_data = [
      { "year": 1991, "name": "alpha", "value": 15, "group": "black" },
      { "year": 1991, "name": "beta", "value": -10, "group": "black" },
      { "year": 1991, "name": "gamma", "value": 5, "group": "black" },
      { "year": 1991, "name": "delta", "value": -50, "group": "black" },
      { "year": 1992, "name": "alpha", "value": 20, "group": "black" },
      { "year": 1992, "name": "beta", "value": -10, "group": "black" },
      { "year": 1992, "name": "gamma", "value": 10, "group": "black" },
      { "year": 1992, "name": "delta", "value": -43, "group": "black" },
      { "year": 1993, "name": "alpha", "value": 30, "group": "black" },
      { "year": 1993, "name": "beta", "value": -40, "group": "black" },
      { "year": 1993, "name": "gamma", "value": 20, "group": "black" },
      { "year": 1993, "name": "delta", "value": -17, "group": "black" },
      { "year": 1994, "name": "alpha", "value": 60, "group": "black" },
      { "year": 1994, "name": "beta", "value": -60, "group": "black" },
      { "year": 1994, "name": "gamma", "value": 25, "group": "black" },
      { "year": 1994, "name": "delta", "value": -32, "group": "black" }
                    ];
                console.log(error);
              });

});

bests