KoolReport's Forum

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

Connecting dots in scatter chart (CharJS) #1757

Open Thomas opened this topic on on Dec 10, 2020 - 1 comments

Thomas commented on Dec 10, 2020

I am trying to connect the dots in the scatter chart but don't know how to accomplish that.

I found that (https://jsfiddle.net/p4tyLgme/) example, but how is the syntax within koolreport?

Sebastian Morales commented on Dec 14, 2020

Thomas, pls extend the class koolreport/chartjs/ScatterChart, then override the processData method and add some dataset options like this: ` class MyScatterChart extends koolreport/chartjs/ScatterChart {

protected function processData()
{
    $datasets = array();
    foreach($this->series as $i=>$series)
    {
        $columnKeys = array();
        $dataset = array(
            "label"=>"Series $i",
            "borderColor"=>$this->getColor($i),
            "backgroundColor"=>$this->getRgba($this->getColor($i),$this->backgroundOpacity),

            "showLine" => true, //add this line and other dataset options like in your jsfiddle example
        );
        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]],
            ));
        }
        array_push($datasets,$dataset);
    }
    return array(
        "datasets"=>$datasets,
    );
} 

} ` Let us know the result. Cheers,

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