Hitachi Vantara Pentaho Community Forums
Page 1 of 2 12 LastLast
Results 1 to 10 of 15

Thread: Bar chart colors dynamically changed based on data value. Along with JavaScript vars

Hybrid View

Previous Post Previous Post   Next Post Next Post
  1. #1

    Default Bar chart colors dynamically changed based on data value. Along with JavaScript vars

    Hey Everyone,

    I am sorry if I am asking a question that has been asked before, but I have not been able to get the desired funtionality out of my bar chart.

    First my goal. I would like to change the bar chart individual bars to different colors based on the data that they represent. For example, if they are less than 1 the color would be green, if they are between 1 and 3 they would be yellow, and if they were above 3 they would be red.

    I have seen two approaches to manipulating the charts, one is through using the extension points and putting a function in the value. The second is by using the post execution scripts.

    I have tried some of these, for example with extension points:

    bar_fillStyle | function(a){if(a<99.8){return "red"}else{return "green"}}

    However this always returns green. I added an alert(a); at the beginning to see what my "a" variable returned, and the message I got was "pvc.visual.Scene". This was clearly not the variable I wanted, because I wanted the data for each bar chart.

    I guess this boils down to being new at JavaScript (and CDE), but how do I know what a variable represents? I noticed that a lot of people seem to pass through "d" as a data variable but that also returns "pvc.visual.Scene". Do I need to define the variable somewhere before I can use it, or is there a list of already defined variables? Any help would be appreiated. Thanks!

  2. #2


    In the latest version i.e. CCC2 you should be able to use the following in post fetch:

    function f() {
    // Series Value : Color
    this.chartDefinition.colorMap = {
    "10": 'red',
    "12": 'green'

    To get access to the actual data, in the same postfetch:

    function f(values)

    values has metadata and resultset.

  3. #3


    When I do this the log describes values as "undefined". Is there anywhere I can go to see all these variables, like values, metadata, or resultset?

  4. #4


    thanks for the direction, but am I missing something totally obvious? I am fairly new to Pentaho and saying something like "this.scene.series" means absolutely nothing to me at this point mostly because I dont know where to go from there. Is there any documentation where I could find more information about what this.scene.series contains? Its attributes and stuff, sort of like a javadocs. I feel like many people on this forum know a bunch of different variables to play around with in these things and I am always just lost with them.

  5. #5
    Join Date
    Mar 2012



    you can find some information about the scene structure here.

    Generally, when executing code in an extension point, you have a "scene" argument, that is the same as «this.scene».

    The scene contains a map of variables, named "vars", so you write «this.scene.vars».

    Variables are generally named after the visual roles of each chart type, so you'll have a "series" variable, a "category" variable, a "value" variable, for a typical categorical chart.

    A variable is itself an object cause you have, at the minimum, the variable's "value" and the variable's "label".

    So, summing it all up, for accessing the series value in an extension point, you write: «this.scene.vars.series.value».

    We're working on some sugar functions, accessible from «this» to make your and our wrists type less.

    Edit 2013-10-23: Added to master of CDF and CGG new sugar methods for this end.

    You can now use the following, from the pvc.visual.Context or the pvc.visual.Scene, to obtain the value of scene variables:

    • most charts (except, notably, the Pie chart): getSeries()
    • categorical charts: getCategory()
    • categorical charts and the legend scenes: getValue()
    • metric charts: getX(), getY()
    • cartesian axes panel scenes: getTick()

    There are also getSeriesLabel(), getCategoryLabel(), etc., versions of all these.

    For those variables/visual-roles for which no sugar method exist, or if you prefer/need a more dynamic approach, the new "get" method can be used as in the following example:
    • get("category") <=> getCategory()
    • get("category", "label") <=> getCategoryLabel()
    Last edited by duarte.leao; 04-10-2014 at 01:56 PM.

  6. #6
    Join Date
    Mar 2012


    Hi decarlo,

    if I understand well, you want to assign colors to bars according to their value being in value bucket A, B, C,...

    See this example for a clean way to do this. It works well with the legend. Basically, you create an auxiliary data dimension (another column...) that calculates the bucket in which the value falls.
    Then, you bind the color role to that new dimension.

    In the future, we might provide a way to configure scales to do the quantization directly, given the value ranges.

  7. #7


    try the f(values) in postfetch

  8. #8


    Thanks, this post has been extremely helpful and I was able to get it to work using the vars.category.label. Thanks again!

  9. #9


    The function f(values) is working, thanks.

    Duarte Leao,

    I have seen this jFiddle before but am not too familiar with it too much. I use the Community Dashboard Editor to create my dashboards, and it seems to hide the javascript from the user. How would I go about using the javascript that you showed me?


  10. #10
    Join Date
    Mar 2012


    Hi decarlo,

    most CCC options are available directly as CDE properties.
    For the ones that are not, usually complex-valued options, you have to use JavaScript to set them.
    See how here, here and here.

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.