KoolReport's Forum

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

Chartjs AreaChart problem #1924

Open James Chan opened this topic on on Feb 26, 2021 - 4 comments

James Chan commented on Feb 26, 2021

If the maximum number of the chart is 3 The highest point of the chart will cut half example below

maximum = 3

maximum = 242.4

KoolReport commented on Mar 1, 2021

Do you mean the line on top is cut a little by the top border.

James Chan commented on Mar 1, 2021

Yes. The canvas which chartjs rendering will cut the top of the chart if the column value = 3 but not 242.4. Thanks

KoolReport commented on Mar 1, 2021

May you post the code of your chart so we can see all settings

James Chan commented on Mar 1, 2021

by reference "koolreport\amazon\ChartCard"

protected function drawChart($dataStore,$columns,$height,$color,$backgroundColor="transparent")
    {
        if ($columns==array()) {
            $firstRow = $dataStore->get(0);
            $keys = array_keys($firstRow);
            if (count($keys)>1) {
                $columns = array(
                    $keys[0]=>array(),
                    $keys[1]=>array(),
                );
            }
        }

        $keys = array_keys($columns);
        
        if (count($keys)<2) {
            return null;
        }
        
        if (!isset($columns[$keys[1]]["config"])) {
            $columns[$keys[1]]["config"] = array();
        }
        $columns[$keys[1]]["config"]["backgroundColor"] = $backgroundColor;
        $columns[$keys[1]]["config"]["borderColor"] = $color;

        return AreaChart::html(array(
            "dataSource"=>$dataStore,
            "columns"=>$columns,
            "colorScheme"=>array($color),
            "height"=>$height,
            "options"=>array(
                "maintainAspectRatio"=>false,
                "legend"=>array(
                    "display"=>false,
                ),
                "scales"=>array(
                    "xAxes"=>array(
                        array(
                            "display"=>false,
                        )
                    ),
                    "yAxes"=>array(
                        array(
                            "display"=>false,
                        )
                    )
                ),
                "elements"=>array(
                    "line"=>array(
                        "borderWidth"=>2,
                    ),
                    "point"=>array(
                        "radius"=>0,
                        "hitRadius"=>10,
                        "hoverRadius"=>4,
                    )
                )
            )
        ));
    }
            echo $this->drawChart(
                $this->chartDataStore,
                $this->chartColumns,
                "100px",
                "rgba(0,0,255,.55)",
                "rgba(0,0,255,.2)"
            );

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
bug

ChartJS