logo
down
shadow

How to catch the Click-Event on the stream legend with Angular NVD3 MultiBar Chart?


How to catch the Click-Event on the stream legend with Angular NVD3 MultiBar Chart?

Content Index :

How to catch the Click-Event on the stream legend with Angular NVD3 MultiBar Chart?
Tag : angularjs , By : Steve O.
Date : January 12 2021, 08:33 AM

I hope this helps you . You will have to set the legend status from a service and then use a callback service in nvd3 chart options to set the initial legend status based on the service.
Then, the legend click events need to be captured and the array from the service has to be changed accordingly. NVD3 already provides legend events to capture these.
                //legend events
                    legend: {   
                        dispatch: {   
                          //legend single click event
        legendClick: function(e) {

  /**below are the different scenarios and we are setting the array value accordingly. You can probably
  make it dynamic by writing a for loop based on the number of streams you have, rather than hardcoding
  **/
          if(e.key == "Stream0" && e.disabled)  {
            console.log('Stream0 enabled');
          getChartProperties[0]=0;
          }
                 if(e.key == "Stream1" && e.disabled) {
                   console.log('Stream1 enabled');
          getChartProperties[1]=0;
                 }
                 if(e.key == "Stream2" && e.disabled) {
                     console.log('Stream2 enabled');
          getChartProperties[2]=0;
                 }
                 if(e.key == "Stream0" && !e.disabled) {
                     console.log('Stream0 disabled');
          getChartProperties[0]=1;
                 }
                 if(e.key == "Stream1" && !e.disabled) {
                     console.log('Stream1 disabled');
          getChartProperties[1]=1;
                 }
                 if(e.key == "Stream2" && !e.disabled) {
                     console.log('Stream2 disabled');
          getChartProperties[2]=1;
                 }
                 console.log(getChartProperties);
        },
         //legend double click event
        legendDblclick: function(e) {console.log(e)},
        legendMouseover: function(e) {},
        legendMouseout: function(e) {},
        stateChange: function(e) {}
      }
    },
    /**callback function to set the initial state of legend from the service "getChartProperties" which returns the 
    array . Below, disabled is set to [0,0,0] from service. Note that in javascript 0 is false, hence disabled 
    is [false,false,false], which means the legend is enabled. If its 1, then its disabled:true and the legens will be
    disabled
     **/
                callback: function(chart){
                  chart.dispatch.changeState({disabled:getChartProperties})
                }
            }
        };

Comments
No Comments Right Now !

Boards Message :
You Must Login Or Sign Up to Add Your Comments .

Share : facebook icon twitter icon

nvd3 multibar - update existing chart with different legend states (as if they were clicked)


Tag : javascript , By : pacorro2000
Date : March 29 2020, 07:55 AM
Hope this helps Maybe this helps: http://plnkr.co/edit/CoGZkNoe4COEtjHMWtk6?p=preview
    data = data.map(function(series){
      if (series.key === 'Disabled Series Key'){
        series.disabled = true;
      }
      return series;
    });

Angular NVD3 Multibar Chart with dual y-axis to showup only line using json data


Tag : javascript , By : Meg
Date : March 29 2020, 07:55 AM
To fix this issue This is the data format you may need to generate in order to use with NVD3 chart.
[
    {
        "key": "Stream0",
        "values": [
            {
                "x": 0,
                "y": -0.14263036487474057
            },
            {
                "x": 1,
                "y": -0.1331488246687006
            }
        ],
        "type": "line",
        "yAxis": 1
    },
    {
        "key": "Stream1",
        "values": [
            {
                "x": 0,
                "y": -0.27248210886232416
            },
            {
                "x": 1,
                "y": -0.28823740073421067
            }
        ],
        "type": "bar",
        "yAxis": 2
    }
]

How to create angular nvd3 multibar and stacked chart using json data


Tag : angularjs , By : ugufugu
Date : March 29 2020, 07:55 AM
Hope this helps Since values is an array of objects, you can't access its attributes via their index like you are doing (object properties are not ordered):
// d[0] and d[1] are undefined!
x: function(d){ return new d[0]; },
y: function(d){ return d[1]; }
x: function(d){ return new d['dates']; },
y: function(d){ return d['numOfTrades']; }

How do I add a custom tooltip to angular-nvd3 multibar chart?


Tag : javascript , By : Martin
Date : March 29 2020, 07:55 AM
I wish did fix the issue. You'll want to use the chart.tooltip.contentGenerator method (ES6 equivalent to what I mocked in this plunker):
$scope.countsChart.options = {
  chart: {
    ...,
    tooltip: {
      contentGenerator: function (key, x, y, e, graph) { 
        return '<h1>Test</h1>';
      }
   // or if you're writing ES6:
   // contentGenerator: (key, x, y, e, graph) => '<h1>Test</h1>'; 
    }
  }
}

nvd3 multibar chart state incorrectly updating on legend toggle?


Tag : javascript , By : francisco santos
Date : March 29 2020, 07:55 AM
Related Posts Related QUESTIONS :
  • Cannot read property 'then' of undefined in angularjs
  • value of input field bind in angularjs
  • Transferring data between non-nested components
  • What is the alternative of $apply in AngularJS Component
  • Question about $controller service in AngularJS documentation tutorial
  • how to open unsafe URL's from angular8?
  • How to pass a value from ng-click to controller function? and How to use that assigned value outside the function
  • Uncaught Error: [$injector:nomod] in karma test afterAll
  • Trying to get a value of custom field from a SharePoint Online library using Graph api
  • angularjs WebAPI authentication project template
  • How to structure ui-router to have SEO friendly url structure
  • Dialog becomes blur after applying animation
  • AngularJS - Does $resource requests send cookies automatically?
  • Communication between two nested directives angularjs
  • Calling controller method using @Url.Action in angularjs
  • ui-router State Children and Resolvers
  • Select2 not working in angular
  • what can or cannot be done with a controller created in a module Vs controller created globally?
  • How to properly convert controller and service from AngularJS to using ng-resource
  • Have some generator can gener angular component api document?
  • AngularJs - communication between controller and directive
  • Angularjs - add ng-* attributes using directives
  • Using $http inside my own service - variable does not persist
  • Define global variable with Typescript Angularjs in components
  • Angular UI-Router childs
  • Apache Alias forbidden
  • getSelectedRows in Angular UI grid
  • What is the use case of md-no-select-click in angularJs material tabs
  • Is it possible to resend image url received from server back to it as an image after processing
  • When is "onEnter" exactly executed
  • Jasmine how do I set the response of a spy
  • AngularJS date input not showing initial value inside directives in Firefox
  • What is scope of a variable inside ng-repeat block in angular js
  • Angular.Foreach in $firebaseObject
  • How to create a new instance of variables in AngularJs so that their values would be independent of the original one?
  • Is there a direct way to know to which view I am going in ionic?
  • How to use variable from a Controller in a Directive link function?
  • AngularJS - set validity of wrapped directives
  • AngularJS config causes error when minified
  • Why are my Angular, absolute path, URL's not compiling properly with Closure Compiler?
  • How to write test-case for Directive with in Directive using jasmine
  • How to pass variables from an array to ng-repeat
  • Launch an android app from Ionic app
  • Email Validation with AngularJS 1.2.0
  • How to pass data from login page to OAuth 2.0 and then get it back?
  • AngularJS routing not working properly in PhoneGap
  • AngularJS: Create new scope variable name using a variable value
  • Directive scope update does not update controller scope (AngularJs)
  • Angular UI Bootstrap4 Vertical Tabs
  • How to show/hide different data on clicking different links in AngularJS?
  • can i paste text input value on-keyup in angular?
  • ui-view do not bind to controler
  • ng-keyup doesn't execute the expression
  • Unit-test a angular controller function in a directive
  • AngularJS - always show two digits after comma
  • Angular View Showing Wrong Result
  • Angular not found until after it's needed?
  • learning angular, having issues with ng-options
  • Angularjs chat with strange polling
  • jQuery Sparkline in a cell in ng-grid using CellTemplate and Directive
  • shadow
    Privacy Policy - Terms - Contact Us © scrbit.com