Ways to utilize an angularjs bar chart directive across numerous div elements

I'm new to angularjs and I have a question about directives. Are they reusable? If so, how can we use them?

Currently, I have a bar chart directive as follows:

directive('bars1', function ($parse) {

  return {
     restrict: 'E',
     scope: {
         data: '=',
         label: '@'
       },
       replace: true,

     link: function (scope, element, attrs) {

       var chart = d3.select('#chart')
         .append("div").attr("class", "chart")
         .selectAll('div')
         .data(scope.data).enter()
         .append("div")
         .transition().ease("elastic")
         .style("width", function(d) { return (d/1000)-10 + "%"; })
         .text(function(d) { return d ; });
     } 
  };
  })

I want to use the directive in two different divs like this:

<div id="dashboard1" >
   <div id="bars" style="margin-top:20%">

     <div id="chart">
          <bars1  data=val></bars1> 
     </div>
     </div>
 </div>

<div id="dashboard2" >
   <div id="bars" style="margin-top:20%" >

     <div id="chart">
          <bars1  data=val></bars1> 
     </div>
     </div>


</div>

However, I am facing an issue where only one chart is created in the first div instead of two separate charts in two different divs. Can anyone help me with this problem?

htmlcssangularjs

Answer №1

It's better to update d3.select('#chart') to d3.select(element[0]).

Answer №2

Revamp your directive:

directive('customBars', function ($parse) {

  return {
     restrict: 'E',
     scope: {
         data: '=',
         label: '@'
       },
       replace: true,

     link: function (scope, element, attrs) {

       var chart = d3.select(scope.label)//<--use element id rather than specific
         .append("div").attr("class", "chart")
         .selectAll('div')
         .data(scope.data).enter()
         .append("div")
         .transition().ease("elastic")
         .style("width", function(d) { return (d/1000)-10 + "%"; })
         .text(function(d) { return d ; });
     } 
  };
  })

Here's your revised html:

<div id="dashboard1">
   <div id="custom-bars-container" style="margin-top:20%">

     <div id="custom-chart1"><!--use different id -->
          <customBars data="val" label="#custom-chart1"></customBars> 
     </div>
     </div>
 </div>

<div id="dashboard2">
   <div id="custom-bars-container" style="margin-top:20%">

     <div id="custom-chart2"><!--use different id -->
          <customBars data="val" label="#custom-chart2"></customBars> 
     </div>
     </div>


</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Group objects with the same id in an array into separate arrays

Suppose I have an array of objects called 'myArray' that is populated as follows: var myArray = []; The objects in 'myArray' are structured like this: var myObject = { id: 1, name: 'example' }; If 'myArray' co ...

javascriptjqueryangularjs

Modifying the CSS style of an element on PageA by clicking a button on PageB

For my app, I am incorporating tabs. I want to implement a user button that, when clicked on tab-detail.html, will update the CSS of an element located on its parent tab page, tab.html. .controller('TabCtrl', function($scope,Tabs) { $scope.t ...

cssangularjscontrollersbetween

Eliminating the impact of a CSS selector

I have a complex mark-up structure with multiple CSS classes associated: classA, classB, classC, classD. These classes are used for both styling via CSS and event binding using jQuery selectors. The Challenge: I need the jQuery events to be functional whi ...

javascriptjqueryhtmlcss

Anchor elements and other inline elements not triggering MouseLeave event

Take a look at this CodePen link, particularly in Chrome: https://codepen.io/pkroupoderov/pen/jdRowv Sometimes, the mouseLeave event doesn't trigger when a user quickly moves the mouse over multiple images. This results in some images still having t ...

htmlcssreactjs

Hovering on the division element will only trigger an effect when the mouse

Currently working on designing a navbar, where each button consists of a <div> for the box and an anchor tag for text along with a hyperlink. The challenge I'm facing is changing the color of the div when hovering over it. Adding a :hover pseud ...

htmlcss

Select the initial element from a group of elements with a specific attribute using CSS

Imagine we are faced with the following code snippet: <node> <element bla="1"/> <element bla="2"/> <element bla="3"/> <element bla="3"/> <element bla="3"/> <element bla="4"/> </node> How can we ...

csscss-selectors

Ways to implement reclick functionality in a JQuery dropdown

I'm starting my JQuery scripting journey and to test my skills in the basics, I am working on a simple dropdown menu using JQuery. The code is functioning perfectly, but there's a small issue - I want the text to close when I click again on the b ...

javascriptjqueryhtmlcssdrop-down-menu

What is the best method for using XMLhttpRequest in PHP to append options to a select element?

I'm looking to dynamically fetch values from a MySQL database using PHP and then add them as choices within a select element. Here is my HTML code: <label for='listDivision'>Division</label><select id='listDivision&apos ...

javascriptphphtmlajax

Attempting to utilize parseFloat in order to eliminate trailing characters

The code snippet provided retrieves state names and miles in the format TN 71.6 mi. I am attempting to remove the mi by converting the string to a number while ignoring unwanted characters. Strangely, when using the parseFloat function, it appears to be ...

javascriptjqueryhtml

Add a preventDefault event listener to a submit button that triggers a specific function

$(function() { $('#login').submit(function(e){ preventSubmission(); e.preventDefault(); }); }); function preventSubmission() { $('#btnLogin').attr('disabled','disabled'); $("#btnLogi ...

javascriptjqueryhtml

Is it possible to change the inner html to null during an active ajax request?

My goal is to have two separate data.html files inserted into two different HTML files without needing a click event. I want the structure of my data.html files to remain consistent, while allowing the template of my website to change dynamically by callin ...

javascripthtmlajax

Accessing Facebook through Login with only a button visible

I need help with checking the user's login status on Facebook. I have implemented the code provided by Facebook, but all I see is the login button. How can I determine if the user is already logged in or not? function testAPI() { console.log(&apo ...

javascriptjqueryhtmlfacebook

Kendo UI NumericTextBox does not properly handle displaying zero values

Issue with displaying initial value of variable "0" in NumericTextBox field. Sample Code: <div ng-app="app"> <div ng-controller="MyCtrl"> <input type="text" ng-model="value" kendo-numeric-text-box> <br> ...

angularjskendo-uiangular-kendokendonumerictextbox

Toggle the visibility of an AngularJS element based on a boolean variable in the controller

I'm currently working on a form where I need to hide or show certain sections based on a variable in the Controller. Here's the HTML code I have: <div id="sheetform-container" ng-controller="SheetController as SheetCtrl"> <form action ...

angularjsangularjs-controller

To navigate to the next page, simply click on the box instead of relying on text links

Here is a piece of code where you can click on the (account) text to open the next page. I am looking to modify this so that clicking on (.box.boxAccounts) will also take you to the next page, not just the text (account). The link_to function provides the ...

htmlruby-on-railsrubybootstrap-4haml

Button in Angular gets stuck when a touchscreen is long pressed

In my Angular2 application, I am facing an issue with a button when running on a Windows 10 touchscreen PC in Chrome. Normally, the button works fine and executes the click function. However, if the button is held for 1-2 seconds, it gets stuck and fails t ...

cssangulartypescript

What is the process for including a field specific to a date in a form?

I need the user to select a month and year. In one column, there will be the days of the month they selected [e.g. 1-30]. Users can then add habits in other columns. I want users to be able to input an 'X' for each habit row on a specific date [e ...

javascripthtmlreactjs

Guide on applying css to a single element while concealing another using Jquery

Looking to enhance my javascript skills by adding CSS to another element when a particular element is hidden. I've got the hiding/showing part down, but now I want to take it a step further. For example: How can I style div2 differently when div1 is ...

jquerycsshideshow

Is there a way to store AngularJS data on the server by saving it to a file?

Currently, I am attempting to transfer data between the front-end and back-end of my application using AngularJS and Java EE. In my AngularJS code, I have defined a variable as follows: $scope.result I want to send this variable to the back-end part of m ...

angularjsjakarta-ee

Updating the view in AngularJS with a service to keep users engaged even when they are offline

I'm currently developing an application that requires the ability to detect when a user loses internet connection or is unable to reach the server. Various controllers and services should be able to check and update this status easily. I have successf ...

javascriptangularjstypescript