ClientEvents for D3 Waterfall

Eugene commented on Jul 27, 2021

Hi,

I have more than 2 columns in my datastore. 2 of them I use to render the waterfall chart. Is it possible to get access to others? For example, if my datastore is:

"dataSource" => [
            ["name" => "Product Revenue", "amount" => 420000, "type"=>'1'],
            ["name" => "Services Revenue", "amount" => 210000,"type"=>'2'],
            ["name" => "Fixed Costs", "amount" => -170000,"type"=>'3'],
            ["name" => "Variable Costs", "amount" => -140000, "type"=>'1']
        ],

And I use "name" and "amount" for my waterfall how can I show the corresponding "type" value in the alert for example. So I wish to use something like that

"clientEvents"=>array(
            "itemSelect"=>"function(params){
            alert( *** How to get access to the corresponding  "type" value here? ***);
        }"

Is it possible?

PS Why tooltips are not available for this type of chart?

Eugene commented on Jul 28, 2021

Hi again

Below is my solution. I am not sure is it the best way but it works.

 "clientEvents" => array(
            "itemSelect" => "function(params){
            alert(params.selectedName+' = '+params.selectedValue);
            var arr = " . json_encode($dataSource) . ";
             alert('Type = ' + arr[params.selectedRowIndex]['type']);
        }"

$dataSource is the "dataSource" array

But please answer my question about tooltips

Sebastian Morales commented on Jul 28, 2021

It's not yet possible for D3 Waterfall chart to access columns other than name and value ones (index 0 and 1) in its client events. If you don't mind editing code you could make an work around like this.

1 . Open the file koolreport/d3/Waterfall.php and replace the following lines:

            array_push($data, array(
                "name"=>$row[$cKeys[0]],
                "value"=>(float)$row[$cKeys[1]]
            ));

with these ones:

            array_push($data, array(
                "name"=>$row[$cKeys[0]],
                "value"=>(float)$row[$cKeys[1]],
                "row" => $row,
            ));

2 . Open the file koolreport/d3/clients/waterfall/waterfall.js and replace the following lines:

            params = {
                selectedRowIndex:selectedRowIndex,
                selectedName:d.name,
                selectedValue:d.value,
                selectedRow:selectedRow,
                isSummaryColumn:false
            };

with these ones:

            params = {
                selectedRowIndex:selectedRowIndex,
                selectedName:d.name,
                selectedValue:d.value,
                selectedRow:selectedRow,
                isSummaryColumn:false,
                selectedWholeRow:this.settings.data[selectedRowIndex].row,
            };

Then in your D3 Waterfall's itemSelect's params there should exist params.selectedWholeRow which contains the additional column values that you want. Hope this works for you. Rgds,

Eugene commented on Jul 28, 2021

Thank you Sebastian Morales

Do you plan to add this to the next version of D3?

Sebastian Morales commented on Jul 30, 2021

I just read your solution and it's a brilliant solution without any change needed in the chart's source code. We will think of a general solution for D3 charts than specifically for only waterfall one. Rgds,

KoolReport's Forum

ClientEvents for D3 Waterfall #2232

Build Your Excellent Data Report