Show dynamic data with dynamic colours in chartjs

Question

I have an array of data as follows

getDates stores all the dates set by the backend team (01 => 1 April, 02 =>2 April and so on)

getAllApplicantsPerDay stores the number of registrations on each day

Array Name                                          All Data                         
-------------------------------------------------------------------
getDates                                         '01', '02','03'

getAllApplicantsPerDay                           6,4,5,8,7,8

So, basically the data stored are as follows

getDates

Array ( [0] => '01' [1] => '02' [2] => '03')

getAllApplicantsPerDay   

Array ( [0] => 6 [1] => 4 [2] => 5 [3] => 8 [4] => 7 [5] => 8 )                                                                 

Now, as per the requirement of the backend team, they can change the date by adding or removing some dates

So, let's say they add 3 days, the new getDates array would be

getGender

Array ( [0] => '01' [1] => '02' [2] => '03' [3] => '04' [4] => '05' [5] => '06')

In accordance, getAllApplicantsPerDay would also change. I would also want different colours each time (randomly selected color)

However, I cannot show that in a graph. I dont know the syntax to do it.

here is what I tried so far

Script

  var config111 = {
      type: 'bar',
      data: {
        labels: [
        <?php  echo json_encode($getDates); ?>
        

      
        ],

        datasets: [{
          label: 'DAILY REGISTRATIONS',
          backgroundColor:'rgba(178,150,200,0.9)',   ------>I want this dynamic too
          borderColor: 'rgba(70,158,210,0.9)',
         data: [

          <?php echo json_encode($getAllApplicantsPerDay   ); ?>
       
          ],
          fill: false,
        },
        
        ]
      },
      options: {
        responsive: true,
        title: {
          display: false,
          text: 'Daily Registrations'
        },
        tooltips: {
          mode: 'index',
          intersect: false,
        },
        /*hover: {
          mode: 'nearest',
          intersect: true
        },*/
        hover: {
          mode: 'nearest',
          "animationDuration": 0,
          intersect: true
        },

        "animation": {
        "duration": 1,
        "onComplete": function () {
          var chartInstance = this.chart,
          ctx = chartInstance.ctx;

          ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontSize, Chart.defaults.global.defaultFontStyle, Chart.defaults.global.defaultFontFamily);
          ctx.textAlign = 'left';
            ctx.textBaseline = 'bottom';

          this.data.datasets.forEach(function (dataset, i) {
            var meta = chartInstance.controller.getDatasetMeta(i);
            meta.data.forEach(function (bar, index) {
              var data = dataset.data[index];                            
              ctx.fillText(data, bar._model.x, bar._model.y - 5);
            });
          });
        }
            },
        scales: {
          xAxes: [{
            display: true,
            scaleLabel: {
              display: true,
              labelString: ' Monthly Panchayat Samiti'
            }
          }],
          /*yAxes: [{
            display: true,
            scaleLabel: {
              display: true,
              labelString: 'Value'
            }
          }]*/
           yAxes: [{
                ticks: {
                    beginAtZero: true
                }
            }]
        }
      }
    };

    $(function () {
    var ctx111 = document.getElementById('canvas').getContext('2d');
    window.myLine = new Chart(ctx111, config111);
  }); 

Answer 1

Using json_encode would mean that you are encoding the data in JSON format. This format,may not be acceptable by chartjs,as chartjs requires strings for labels, and numbers for data.

Here is what you can do (only the required section of the code)

(Please Note):- Copy and paste this in label tag in chartjs. You can do this exact same thing for data tag as well.

labels: [
        <?php
         for($i=0;$i<count($getDates);$i++){
            echo $getDates[$i];
            echo ','; 
         }
        ?>
         
        ],

Also, make sure to send the data as an array from the backend, if you want to use this method.

As for the random color thing, I suggest you check out this github repository. You can search for other options for random colors as well.