Hitachi Vantara Pentaho Community Forums
Results 1 to 7 of 7

Thread: BarChart clickAction Table: Highlight more than one bar

  1. #1
    Join Date
    May 2013
    Posts
    8

    Post BarChart clickAction Table: Highlight more than one bar

    Hello everyone! I managed to get the interaction where clicking on a bar in a CCC bar chart component will filter the values in a separate Table component.

    I.E.: Clicking on the 'Animal' bar will show only items with category 'Animal' in my table. If anyone is looking for this solution:
    - Create parameter
    - Add it to listeners & parameters in your table
    - Add it to parameters in your datasource and adjust the query to utilize the paramter accordingly (making sure that the data types match up, likely STRING. Also making sure you are using ${parameter})
    - Add to parameters in your chart
    - Toggle clickable = True
    - clickAction: function(){ Dashboards.fireChange('your_parameter_here', this.scene.atoms.category.value); }


    My question is if anyone has been able to have it so that this interaction works appropriately when you click or highlight more than one category. Ex: If I click on the 'Animal' bar and then CTRL+click on the 'Food' bar, then my table will show only items with either the category 'Food' or 'Animal'.

    I don't even know if this is possible in the current stage. Does anyone have any ideas or has anyone done this/something similar successfully?

  2. #2
    Join Date
    Mar 2012
    Posts
    645

    Default

    Hi Tanner,

    I've been told around here that there is a "string array" parameter type and that it can be used to feed a query (like IN(values...) or consecutive OR clasues). Can anyone confirm/help-on this part?

    Believing that that's true, in CCC, you would change to listening the selectionChangedAction instead of the clickAction:
    Code:
    function(selectedDatums) {
      // Extract the category values of selected datums, assuming that there is only one
      // category dimension and that the name of the dimension is "category" (the default)
      var categories = selectedDatums.map(function(datum) { return datum.atoms.category.value; })
      
      Dashboards.fireChange('your_parameter_here', categories);
    }
    Simple?

    You'll need to enable selection:
    Code:
    selectable: true
    You should be aware that there may be no selected datums - the user may deselect every datum by clicking an empty space (although this is controllable by the option clearSelectionMode).

    Also, in case you want an initial selection to be loaded to the chart you have to do as explained here. In your case, you should pass an array of values, as in:
    Code:
    ... .datums([{category: categoriesArray}])

  3. #3
    Join Date
    May 2013
    Posts
    8

    Default

    This worked beautifully, thank you very much I appreciate it a ton!

    If anyone else is trying to do something similar set your parameter type as 'StringArray' in the Data Source.

    My query resembled something like this:

    SELECT ...,filter_string,...
    FROM ...
    WHERE CASE WHEN 'All' IN (${selected_array}) THEN true

    ELSE filter_string IN (${selected_array}) END

    I set the property value of the parameter as 'All' so that when the query runs, if the StringArray parameter contains the string 'All' then it will return true by default and filter nothing. Otherwise it will filter based on the values you select (with the selectionChangedAction given by duarte, selecting categories will automatically rewrite 'All' in your StringArray)

    The parenthesis around the ${selected_array} are necessary because ${selected_array} is replaced with "Item1", "Item2", "Item3", note the lack of necessary parenthesis.





  4. #4
    Join Date
    Jan 2013
    Posts
    135

    Default

    Hi Tanner, Hi Duarte,

    thanks for really good description. I got it working ... I have small difference that I can not solve alone.
    In my first graph I'm displaying 2 values for each category (previous and actual) and in the second graph I'm doing the same but on more detailed level. Question is whether it is possible that both values for the category are colored(selected are any way as they have the same category) even if user marks only one bar from this two.

    Name:  selection.jpg
Views: 168
Size:  7.6 KB
    Last edited by timfu83; 06-17-2013 at 03:21 PM. Reason: image missing

  5. #5
    Join Date
    Mar 2012
    Posts
    645

    Default

    Hi timfu83,

    I think I know what you're asking for. You want that any time a user selects one bar, every bar that has the same category gets selected as well?

    There's a handler for exactly this scenario, it allows you to modify a user selection, just before it is actually applied to the datums, userSelectionAction:

    Code:
    function(selectingDatums){
        var selectedCatsSet = {};
        var selectedCats = [];
        selectingDatums.forEach(function(datum) { 
            var cat = datum.atoms.category.value;
            if(selectedCatsSet[cat] !== true) {
                 selectedCatsSet[cat] = true;
                 selectedCats.push(cat);
            }
        });
    
        // Return a new array, containing all datums having the same categories
        return this.chart.data.datums([{category: selectedCats}]).array();
    }
    Last edited by duarte.leao; 08-29-2013 at 07:39 AM. Reason: wrong user name to reply to

  6. #6
    Join Date
    Jan 2013
    Posts
    135

    Default

    Hi duarte.leao,

    yes, it is the function I wanted to find. Is it possible that it doesn't work in combination with selectionChangedAction ? I have selectable TRUE and after using this code I can not select/mark anything. It remains as it is displayed at the beginning.

    Many thanks if you can help.

  7. #7
    Join Date
    Mar 2012
    Posts
    645

    Default

    This action works like:

    User click/rubber-band identifies visual elements to be selected.
    Those visual elements represent certain datums.
    Those datums are the "to be selected" (toggled, etc) datums.
    They are passed through the userSelectionAction, and the result of that function is used instead of the datums originally selected by the user.
    Then the selected state of those datums is changed.
    Then the selectionChangedAction is "fired".
    Then the chart is re-rendered.

    So one of the ways I see you could get into a «no-datums being selected situation» is if you are returning an empty datums array from the action handler. Please check if this is the case with the debugger.
    If this is the case, then there must be something wrong with the building of the "selectedCats" array.
    Can you check if this array contains any value(s) after the "selectingDatums.forEach" statement is executed?

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
Privacy Policy | Legal Notices | Safe Harbor Privacy Policy

Copyright © 2005 - 2019 Hitachi Vantara Corporation. All Rights Reserved.