KoolReport's Forum

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

How to implement Drilldown with different charts in each level? #1203

Closed Sowmya opened this topic on on Dec 4, 2019 - 7 comments

Sowmya commented on Dec 4, 2019

Hi Support team,

I have a requirement from my customer. I have to implement Drilldown with 3 different charts in 3 levels ie in 

Level 1: Column Chart, Level 2: Donut Chart or Pie Chart, Level 3: Grid view with Export Excel Or PDF

How can I do this? Can you give me some example...

I changed my graph from ColumnChart to Donut Chart in Level2, it displays correctly. But it doesn't propagate to 3 Level. Here is my Code

DrillDown::create(array(
        "name"=> "saleDrillDown",
        "title"=>"Sale Report",
        "levels"=>array(
          array(                //level1
            "title" => "All Years",
            "content"=>function($params,$scope){
              ColumnChart::create(array(
                "dataSource"=>(
                  $this->src("invoice")->query("SELECT Year,SUM(InvValue) as invoice from MonthWiseSalesSummeriesNew group by Year Order by Year") ),
                "columns"=>array(
                  "Year",
                  "invoice"
                ),//columns end
                "clientEvents"=>array(
                  "itemSelect" => "function(params){
                    saleDrillDown.next({Year:params.selectedRow[0]});
                  }",
                )//clientEvents end

              ));//ColumnChart1
            }
          ), //Level1 End

array(
            "title" => function($params,$scope)
            {
              return "Year ".$params["Year"];
            },
            "content"=>function($params,$scope)
            {
              DonutChart::create(array(
                "dataSource"=>(
                  $this->src("invoice")->query("
                    SELECT Year,Month,SUM(InvValue) as invoice from MonthWiseSalesSummeriesNew  where Year=:Year 
                      group by Year,Month
                      Order by Year,Month
                    ")
                  ->params(array(
                    ":Year" =>$params["Year"]
                  ))

                ),//dataSource End
                "columns"=>array(
                  "Month",
                  "invoice"),
                "clientEvents"=>array(
                  "itemSelect" => "function(params){
                    saleDrillDown.next({Month:params.selectedRow[0]});
                  }",
                )//clientEvents end

              ));///DonutChart2

            }//content end

          ),//Level2

Sowmya commented on Dec 5, 2019

Hello Support team, Please help me... Are you there?

Sowmya commented on Dec 5, 2019

Hello KoolReport Team, is there? We have urgent meeting with my customer about this Drilldown.... Please confirm us weather it is possible or not???????????????

KoolReport commented on Dec 5, 2019

It is definitely possible. Are you using Google Chart.

Sowmya commented on Dec 5, 2019

Ya. I am using Google Charts only. How can I implement Level3? Here is my level 3 code, it is continution of my above code... Which mistake I done here? Please correct me...

 array(
            "title" => function($params,$scope){

              return date('F',mktime(0,0,0,$params["Month"],10));

            },
            "content"=>function($params,$scope){
               Table::create(array(
                "dataSource"=>(
                  $this->src("invoice")->query("
                  SELECT Year,Month,Day,SUM(InvValue) as invoice from MonthWiseSalesSummeriesNew  where Year=:Year and Month=:Month group by Year,Month,Day Order by Year,Month,Day")
                ->params(array(
                  ":Year"=>$params["Year"],
                  ":Month"=>$params["Month"]

                ))
              ),//dataSource
              "columns"=>array(
                "Day"=>array(
                  "formatValue"=>function($value,$row){
                    return $row["Day"];//date("F jS, Y",strtotime($row["Day"]));
                  },

                ),
                 "invoice"=>array(
                     "label" =>" Sale Amount",
                     "prefix"=> "₹",
                     "type"=>"number",
                     "thounsandSeparator"=>","

                  )

              )//Columns End

              ));//ColumnChart3
            }//content end


          )//Level3

Thanks for your reply...

KoolReport commented on Dec 5, 2019

This is kind of special for PieChart and DonutChart, in the level 2, you change "itemSelect" to "rowSelect". Let me know if it works.

Sowmya commented on Dec 5, 2019

Ya It worked. Thank You so much......

KoolReport commented on Dec 5, 2019

You are welcome :)

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
solved

DrillDown