KoolReport's Forum

Official Support Area, Q&As, Discussions, Suggestions and Bug reports.
Forum's Guidelines

ApexCharts item select #3201

Open John opened this topic on on Nov 28, 2023 - 14 comments

John commented on Nov 28, 2023

How can i implement something like the actionRowSelect($request, $response) in Apexcharts? I mean something like the example in KPI Dashboards / Products where i click on a Donut slice and i get the records on the table beside. I think there is dataPointSelection method but i i couldn't find any documentation... Can you help with a small example?

David Winterburn commented on Nov 29, 2023

So far KoolReport's ApexCharts package has not had own client events yet but you can use the default events of the apexcharts javascript library like this:

In normal report:

        \koolreport\apexcharts\ColumnChart::create(array(
            ...
            "options" => [
                'chart | events | dataPointSelection' => "function(event, chartContext, config) {
                    // The last parameter config contains additional information like `seriesIndex` and `dataPointIndex` for cartesian charts
                    console.log('chart dataPointSelection');
                }", 

Or in Dashboard:

class ColumnChartDemo extends ColumnChart
{
    protected function onCreated()
    {
        $this->settings([
            "stacked" => true,
            "stackType" => "100%",
            "options" => [
                "chart | events | dataPointSelection" => "function(event, chartContext, config) {
                    // The last parameter config contains additional information like `seriesIndex` and `dataPointIndex` for cartesian charts
                    console.log(chartContext, config);
                    params = getParamDataFrom(chartContext, config);
                    widgetAction('ColumnChartDemo','itemSelect',params);
                }",
            ],
        ]);
    } 

    protected function actionItemSelect($request, $response)
    {
        //...
    }
John commented on Nov 30, 2023

I added the above code in a HeatMapChart to my Dashboard but it didn't work. I wonder if it needs extra code somewhere or it works only for Column charts... When i checked to console, nothing happened there too.

David Winterburn commented on Dec 1, 2023

We have tested HeatMapChart and the event dataPointSelection is working for it, too, in both normal report and Dashboard:

//Dashboard widget
class HeatMapChartDemo extends HeatMapChart
{
    protected function onInit()
    {
        $this
        ->settings([
            ...
            'options' => [
                'chart | events | dataPointSelection' => "function(event, chartContext, config) {
                    console.log('HeatMapChart dataPointSelection');
                }",
            ]
        ]);
    } 
//KoolReport Pro widget
        \koolreport\apexcharts\HeatMapChart::create(array(
            ...
            "options" => [
                'chart | events | dataPointSelection' => "function(event, chartContext, config) {
                    console.log('HeatMapChart dataPointSelection');
                }",
            ], 

If you still can not see the console log message pls post your code for us to check it for you. Rgds,

John commented on Dec 1, 2023

Still no log message... :(

Do you also have this or something else? use \koolreport\dashboard\widgets\apexcharts\HeatMapChart;

I use the HeatMapChart widget in a tab container...

John commented on Dec 2, 2023

Wait.. i think i found what it needs

John commented on Dec 4, 2023

I had mislocated the dataPointSelection function in my code and i fixed it, so i managed to see the console.log But i couldn't manage to continue from there... Are you sure that actionItemSelect works in Apexcharts? I also tried the actionRowSelect unsuccesfully...

David Winterburn commented on Dec 4, 2023

Pls add the widgetAction command to the event listener as well:

                "chart | events | dataPointSelection" => "function(event, chartContext, config) {
                    // The last parameter config contains additional information like `seriesIndex` and `dataPointIndex` for cartesian charts
                    console.log(chartContext, config);
                    params = getParamDataFrom(chartContext, config);
                    widgetAction('ColumnChartDemo','itemSelect',params); //send ajax request to server so that Dashboard ApexCharts widget's php funtion actionItemSelect() is performed on server side
                }", 
John commented on Dec 4, 2023

Yes of course and i had added the widgetAction, but it doesn't work. Later i have this to my class:

protected function actionItemSelect($request, $response)
{
    $params = $request->params();

I also added this part to test further (as your example shows):

public function selectedProductLine()
{
    return $this->state("selectedProductLine");
}
John commented on Dec 10, 2023

Any news for this please?

John commented on Jan 25

I'm stuck on this :-(

Sebastian Morales commented on Jan 26

Do you see this console.log output in your browser's dev console?

                "chart | events | dataPointSelection" => "function(event, chartContext, config) {
                    // The last parameter config contains additional information like `seriesIndex` and `dataPointIndex` for cartesian charts
                    console.log(chartContext, config); // check this console.log output
                    ...
John commented on Jan 26

Thanks for response, does the image below help you?

Sebastian Morales commented on Feb 2

Sorry for the delayed reply. It looks like the event listener function runs correctly. What you must do is build the parameter needed:

    params = getParamDataFrom(chartContext, config); // write this function yourself to get a needed parameter from chartContext and config
    widgetAction('ColumnChartDemo','itemSelect',params);  // send the itemSelect request attached with the needed parameter
Marloes commented on Oct 15

Hi John,

I am very curious, because I need this solution too for the ApexCharts. Did you finally managed it to work? What I need is actually the same as you described as the example, but ihen ApexCharts instead of GoogleCharts:

With kind regards, Marloes

Build Your Excellent Data Report

Let KoolReport help you to make great reports. It's free & open-source released under MIT license.

Download KoolReport View demo
help needed

ApexCharts