KoolReport's Forum

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

Gradient or image in background (chartjs) #1846

Open Thomas opened this topic on on Jan 13, 2021 - 4 comments

Thomas commented on Jan 13, 2021

Is it possible to add a gradient to the background of a chart?

If not, could I add an image to the background of the data area? With css I can only add it to the whole background but I want it to show only in the data area (without the scale).

David Winterburn commented on Jan 14, 2021

Which type of chart (bar, line, area, etc) are you talking about? Thanks!

Thomas commented on Jan 14, 2021

Bubble chart (chartjs).

David Winterburn commented on Jan 15, 2021

At the moment it's not easy to set an option for Chartjs' bubble chart to have a gradient background. Please try the following method:

1 . Create a file call MyBubbleChart.php in koolreport/chartjs directory with the following content:

<?php

namespace koolreport\chartjs;
use \koolreport\core\Utility;

class MyBubbleChart extends BubbleChart
{
    protected function processData()
    {
        $datasets = array();
        foreach($this->series as $i=>$series)
        {
            $columnKeys = array();
            $dataset = array(
                "label"=>"Series $i",
                "borderColor"=>$this->getColor($i),
                "backgroundColor"=>"function getGradient() {
                    var ctx = document.getElementById('{$this->name}').getContext('2d');
                    var gradient = ctx.createLinearGradient(0, 0, 0, 400);
                    gradient.addColorStop(0, 'rgba(250,174,50,1)');  //modify these lines for your preferred gradient
                    gradient.addColorStop(1, 'rgba(250,174,50,0)');
                    return gradient;
                }",
            );
            foreach($series as $item)
            {
                
                if(gettype($item)=="string")
                {
                    array_push($columnKeys,$item);
                }
                elseif(gettype($item)=="array")
                {
                    $dataset = array_merge($dataset,$item);
                }
            }
            $dataset["data"] = array();
            $this->dataStore->popStart();
            while($row = $this->dataStore->pop())
            {
                array_push($dataset["data"],array(
                    "x"=>$row[$columnKeys[0]],
                    "y"=>$row[$columnKeys[1]],
                    "v"=>$row[$columnKeys[2]],
                    "s"=>Utility::get($dataset,"scale",$this->scale),
                ));
            }
            array_push($datasets,$dataset);
        }
        return array(
            "datasets"=>$datasets,
        );
    }

} 

Then in your report view use \koolreport\chartjs\MyBubbleChart widget instead of \koolreport\chartjs\BubbleChart.

Thomas commented on Jan 28, 2021

Hey David,

I finally got time to test your code. The background is only shown inside the bubble. Event though this is interesting for the future and I don't know if this was intended but I would like to have the gradient on the whole background of the chart area.

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

ChartJS