Question posted in
You can find the official documentation here.

The chart gets the wrong months using laravel /ajax – Jquery ajax

I’m trying to display data on a chart using laravel.

So I’m using the following code :

Controller :

$contrats_par_mois = Contrat::select(DB::raw("COUNT(*) as count"))
                    ->whereYear('date_signature', date('Y'))
                    ->groupBy(DB::raw("Month(date_signature)"))
                    ->pluck('count');

My view :

<div class="card-body">
     <h5 class="card-title">Sales</h5>
     <div id="container"></div>
 </div>

Script :

<script src="https://code.highcharts.com/highcharts.js"></script>
<script type="text/javascript">

    var contrats_par_mois = <?php echo json_encode($contrats_par_mois)?>;
     var d = new Date();
    Highcharts.chart('container', {
        title: {
            text: 'Contrats Par mois'
        },
       
        xAxis: {
            categories: ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Aout', 'Septembre',
                'Octobre', 'Novembre', 'Décembre'
            ]
        },
        yAxis: {
            title: {
                text: 'Nombre de contrats'
            }
        },
        legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'middle'
        },
        plotOptions: {
            series: {
                allowPointSelect: true
            }
        },
        series: [{
            name: 'Nombre de contrats',
            data: contrats_par_mois
        }],
        responsive: {
            rules: [{
                condition: {
                    maxWidth: 500
                },
                chartOptions: {
                    legend: {
                        layout: 'horizontal',
                        align: 'center',
                        verticalAlign: 'bottom'
                    }
                }
            }]
        }
    });

</script>

The problem is it gets the wrong month , the count information is correct but it display the wrong month.

For example in my database I have the following dates :

2021-08-07 , 2021-06-01

But in the chart I’m getting :

enter image description here

I should get in my chart : Juin and Aout instead of Janvier et février

If you have any idea , please help

UPDATE

The output of dd($contrats_par_mois); :

IlluminateSupportCollection {#1474 ▼
  #items: array:2 [▼
    0 => 6
    1 => 1
  ]
}
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I resolve it by change my controller to :

     $year = [0,0,0,0,0,0,0,0,0,0,0,0];
                   $contrats_par_mois=DB::table('contrats')
                 ->select(DB::raw('count(*) as count'), DB::raw('MONTH(date_signature) as month'))
                 ->groupBy('month')
                 ->get();


                foreach($contrats_par_mois as $key){
                   $year[$key->month-1] = $key->count;

                }

  2. 0

    It looks like your dates have an incorrect format, you could try several things, fix your dates to match what is required in your chart, or format your dates in JavaScript before passing the variable contrats_par_mois to the series data.

    First I would see the actual data in the console, so you could do this after this variable and check how the dates are coming:

    var contrats_par_mois = <?php echo json_encode($contrats_par_mois)?>;
console.log(contrats_par_mois);

    After this you can check in your console in the dev tools to see the actual results of the dates, if the dates looks like "12-12-2000 August blabla", it won’t work, I think the graph expects a specific date.

    Another thing I would first try, is to pass your data in your JavaScript first, so something like:

    var contrats_par_mois = [{'02-12-2000', 'Février'}, {'12-12-2000', 'Décembre'}];

    Just to check if that’s how the graph needs the series of the data to be delivered, trial and error until you get the correct dates into the graph.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search