ChartJS set color of Line chart points depending on Y Axis

Question

I am trying to do the same thing as here : ChartJS - Different color per data point

But in PHP so I cant use the javascript selectors like the accepted answers there.

To build my charts I use PHP sessions var in SQL request so it is necessary to integrate the code with PHP. I have several charts that I load with Ajax with a switch case.

I instanciate the value of Chartjs parameters like this :

$html .= "<p>Results from " . $_SESSION['statDateFrom'] . " to " . $_SESSION['statDateTo'] . "</p>";
    $html .= "<canvas id='myChart' width='400' height='300'>";
    $html .= "</canvas>";
    $html .= $legend;
    $html .= "<script>";
    $html .= "var ctx=document.getElementById('myChart').getContext('2d');";
    $html .= "var myChart = new Chart(ctx, {";
    $html .= "type:'". $type . "',";
    $html .= "data:" . $mydata . ",";
    $html .= "options: " . $options;
    $html .= "});";
    $html .= "</script>";

And the chart that I want to custom here is a line chart on which I only keep the dot. I want to color the dot with different colors value depending on the Y axis value

For now I've tried this :

$arrDatasets = array(
                array('label' => "event_name",
                      'fill' => false,
                      'showLine' => false,
                      'pointBackgroundColor' => array("#82f827", "#ff4040", "#31698A", "#6666FF","#ff7F50","#fe6b60","#6c1ba1","#97bdd6"),
                      'data' => $datasetR1
                      ));
            $arrReturn = (array('labels' => $labels, 
                    'datasets' => $arrDatasets));
            $mydata = json_encode(($arrReturn));

Passing an array to pointBackgroundColor definitively change the colors of the points but it only adds the colors to the first results!

Like this :

So I guess I just have to do a loop with conditions but I don't know how to proceed.

So before generating `$arrDatasets` prepare a array which will have color value for all your point. then put it's reference in `pointBackgroundColor` — sandyJoshi, May 02 '18 at 11:27
loop thru `$datasetR1` and prepare '$colorsArray' and while defining `$arrDatasets` use `$colorsArray`. — sandyJoshi, May 02 '18 at 11:30
I have put an array of colors into a var, but how do I loop thru $dataset and define the colors associated with the value ? — rn605435, May 02 '18 at 12:25
`foreach ($arrDatasets as $item) { // Get value from $item and push to $colorsArray }` — sandyJoshi, May 02 '18 at 13:19
Possible duplicate of [Chartjs - Loop thru dataset and assign colors](https://stackoverflow.com/questions/50135044/chartjs-loop-thru-dataset-and-assign-colors) — sandyJoshi, May 03 '18 at 05:07

score -3 · Answer 1 · answered May 02 '18 at 13:40

Ok I've done it with the help of sandyJoshi.

this is the code :

foreach($datasetR1 as $value){
                if($value == 1){
                    array_push($intColors, "#82f827");
                }
                elseif($value == 2){
                    array_push($intColors, "#ff4040");
                }
                elseif($value == 3){
                    array_push($intColors, "#31698A");
                }
                elseif($value == 4){
                    array_push($intColors, "#6666FF");
                }
                elseif($value == 5){
                    array_push($intColors, "#ff7F50");
                }
                elseif($value == 6){
                    array_push($intColors, "#fe6b60");
                }
                elseif($value == 7){
                    array_push($intColors, "#6c1ba1");
                }
                elseif($value == 8){
                    array_push($intColors, "#97bdd6");
                }
            }

Thanks for the downvoting by the way, great community.

ChartJS set color of Line chart points depending on Y Axis

1 Answers1