Pentaho

 View Only

 Bar chart readers

  • Pentaho
  • Ctools
  • Pentaho
Andy Rathbone's profile image
Andy Rathbone posted 10-09-2018 15:31

Hi,

I'm creating a bar line chart with a data set that has 5 columns and around 30 rows.

LocationSalesRejectsMarketSiteLondon246151001ABrighton12351002A

The last two columns are ID's and do not need to show on the chart or in the tool-tip.  But I will need to access them as part of the click action.  I have done something similar before, but I can't get this to work.

I have tried the below in pre execution but this is not working.

function a(){     var d = this.chartDefinition;         d.crosstabMode = false;     d.seriesInRows = false,         d.readers = [         {names: 'category', indexes: 0},         {names: 'value', indexes: 1},         {names: 'value2', indexes: 2},                 {names: 'ma', indexes: 3},         {names: 'site', indexes: 4}         ];         d.plot2 = true; }

Could someone please let me know what I am doing wrong and what I need to do to get the result I am after.

Thank you

Andy


#Ctools
#Pentaho
Duarte Cunha Leao's profile image
Duarte Cunha Leao

If you want to show "value" on the main plot — a bar plot —, and "value2" on the second plot, named "plot2", you need to change the following:

    cd.plots = [       {         name: 'plot2',         dataPart: "0",         visualRoles: {           "value": "value2"         }       }     ];

Cheers!

Andy Rathbone's profile image
Andy Rathbone

Thanks for the reply.  I have sort of got it to work but I am still having a couple of problems.

Firstly whatever I do I can't get plot 2 to be a different colour.

And, secondly when using the on click, how can I differentiate between whether the user has clicked on the bars or the dots?

Below is the code I am using.

pre exec

function a(){

    var d = this.chartDefinition;

    d.crosstabMode = false;

    d.seriesInRows = false,

   

    d.readers = [ 

            {names: 'Location', indexes: 0}, 

            {names: 'Complaints', indexes: 3}, 

            {names: 'CEOComplaints', indexes: 4}, 

             

            {names: 'Market', indexes: 1}, 

            {names: 'Site', indexes: 2} 

        ];

   

    d.dimensions = {

        Market:{ isHidden : true},

        Site:{ isHidden : true}

    };

   

    d.plots = [

        {

            name: 'main',

            visualRoles: {

                value:      'Complaints',

                category:   'Location'

            }

        },

        {

            type: 'point',

            linesVisible: false,

            dotsVisible:  true,

            valuesVisible: true,

            valuesOptimizeLegibility: true,

            orthoAxis: 2,

            visualRoles: {

                value: 'CEOComplaints'

            }

        }

    ];

 

    d.xAxisLabel_textAngle = -0.8,

    d.xAxisLabel_textAlign = 'right',

    d.valuesVisible = true,

    d.valuesOptimizeLegibility = true,

   

    d.plotFrameVisible = false,

    d.barSizeMax = 60,

   

    d.clickable = true; 

    d.clickAction = function(scene) { 

        console.log(scene);

    }; 

}

 

Post Fetch

function f() {

    var d = this.chartDefinition;

   

     d.colorMap = {

        "Complaints": '#808080',

        "CEOComplaints": '#00B0F0'

    };

}

 

Thanks

Andy

Duarte Cunha Leao's profile image
Duarte Cunha Leao

Hi,

the way things are configured now, there's a single series value, null, and two measures in each row. In fact, none of the data table columns is mapped to the series visual role, but because the series visual role must be mapped, a dummy series dimension is created nonetheless, with a constant value of null.

Moreover, by default, the color visual role is mapped to the same dimensions as the series visual role, and so, in this case, it only has a single value, null. Thus, a single color will be used, for every row. (And the colorMap keys you specified are never matched; they would for the key "").

Moreover, still, custom plots use the default color axis, 1, just like the main plot (bar) does, and so, for both plots, the null color value will use the same color scale and be mapped to the same color.

The conclusion is that you need to assign a different color axis to the second, custom plot that you've defined.

d.plots = [   // ...   {     type: "point",     // ...     colorAxis: 2   } ]

Then, you assign different colors to the second color axis:

d.color2AxisColors = ["red"];

As for the second question, because the two plots are displaying different measures of the same rows, you can't use the series value to distinguish the plot from which the click was triggered, you should use the object model to detect the plot (see reference documentation). In the click action handler:

if(this.panel.plot.type === "bar") {   // Bar plot } else {   // Point plot }

Cheers

Andy Rathbone's profile image
Andy Rathbone

Perfect, thank you so much.