Bonjour.

J'essaie d'utiliser Google PieChart (https://developers.google.com/chart/...llery/piechart) avec PHP (Laravel) et JavaScript dont le code est le suivant:

Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
$(document).ready(function() {
    if ($('#dashboard_date_filter').length == 1) {
        dateRangeSettings.startDate = moment();
        dateRangeSettings.endDate = moment();
        $('#dashboard_date_filter').daterangepicker(dateRangeSettings, function(start, end) {
            $('#dashboard_date_filter span').html(
                start.format(moment_date_format) + ' ~ ' + end.format(moment_date_format)
            );
            update_statistics(start.format('YYYY-MM-DD'), end.format('YYYY-MM-DD'));
            if ($('#quotation_table').length && $('#dashboard_location').length) {
                quotation_datatable.ajax.reload();
            }
        });
 
        update_statistics(moment().format('YYYY-MM-DD'), moment().format('YYYY-MM-DD'));
    }
 
    $('#dashboard_location').change( function(e) {
        var start = $('#dashboard_date_filter')
                    .data('daterangepicker')
                    .startDate.format('YYYY-MM-DD');
 
        var end = $('#dashboard_date_filter')
                    .data('daterangepicker')
                    .endDate.format('YYYY-MM-DD');
 
        update_statistics(start, end);
    });
});
 
function update_statistics(start, end) {
    var location_id = '';
    if ($('#dashboard_location').length > 0) {
        location_id = $('#dashboard_location').val();
    }
    var data = { start: start, end: end, location_id: location_id };
    //get purchase details
    var loader = '<i class="fas fa-sync fa-spin fa-fw margin-bottom"></i>';
    $('.total_purchase').html(loader);
    $('.purchase_due').html(loader);
    $('.total_sell').html(loader);
    $('.invoice_due').html(loader);
    $('.total_expense').html(loader);
    $('.total_purchase_return').html(loader);
    $('.total_sell_return').html(loader);
    $('.net').html(loader);
    $.ajax({
        method: 'get',
        url: '/home/get-totals',
        dataType: 'json',
        data: data,
        success: function(data) {
            //purchase details
            $('.total_purchase').html(__currency_trans_from_en(data.total_purchase, true));
            $('.purchase_due').html(__currency_trans_from_en(data.purchase_due, true));
 
            //sell details
            $('.total_sell').html(__currency_trans_from_en(data.total_sell, true));
            $('.invoice_due').html(__currency_trans_from_en(data.invoice_due, true));
            //expense details
            $('.total_expense').html(__currency_trans_from_en(data.total_expense, true));
 
            $('.total_purchase_return').html(__currency_trans_from_en(data.total_purchase_return, true));
            $('.total_sell_return').html(__currency_trans_from_en(data.total_sell_return, true));
            $('.net').html(__currency_trans_from_en(data.net, true));
        },
    });
}
Et celui de Google Pie Chart par défaut est le suivant:

Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load("current", {packages:["corechart"]});
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Task', 'Hours per Day'],
          ['Work',     11],
          ['Eat',      2],
          ['Commute',  2],
          ['Watch TV', 2],
          ['Sleep',    7]
        ]);
 
        var options = {
          title: 'My Daily Activities',
          pieHole: 0.4,
        };
 
        var chart = new google.visualization.PieChart(document.getElementById('donutchart'));
        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="donutchart" style="width: 900px; height: 500px;"></div>
  </body>
</html>

Comment donc modifier la fonction ou méthode arrayToDataTable de la variable data de Google Pie Chart ci-dessus par la réponse en HTML sachant que l'AJAX de mon code JavaScript ci-dessus renvoie dans la fonction update_statistics et utilise la méthode html() de jQuery pour remplacer les valeur de la méthode arrayToDataTable ???

Devrais faire ceci:
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ["{{ __('lang_v1.total_purchase_return') }}",    '<span class="total_purchase_return"><i class="fas fa-sync fa-spin fa-fw margin-bottom"></i></span>'],
          ["{{ __('home.total_sell') }}",    '<span class="total_sell"><i class="fas fa-sync fa-spin fa-fw margin-bottom"></i></span>'],
          ["{{ __('home.total_purchase') }}",    '<span class="total_purchase"><i class="fas fa-sync fa-spin fa-fw margin-bottom"></i></span>'],
          ["{{ __('lang_v1.total_sell_return') }}",    '<span class="total_sell_return"><i class="fas fa-sync fa-spin fa-fw margin-bottom"></i></span>'],
          ["{{ __('home.invoice_due') }}",    '<span class="invoice_due"><i class="fas fa-sync fa-spin fa-fw margin-bottom"></i></span>'],
          ["{{ __('lang_v1.expense') }}",    '<span class="total_expense"><i class="fas fa-sync fa-spin fa-fw margin-bottom"></i></span>'],
          ["{{ __('home.purchase_due') }}",    '<span class="purchase_due"><i class="fas fa-sync fa-spin fa-fw margin-bottom"></i></span>'],
          ["{{ __('lang_v1.net') }}",    '<span class="net"><i class="fas fa-sync fa-spin fa-fw margin-bottom"></i></span>']
        ]);
Mais est-ce qu'en faisant cela, c'est-à-dire en passant du code HTML <span class="total_purchase_return"><i class="fas fa-sync fa-spin fa-fw margin-bottom"></i></span> en 2ème paramètre de arrayToDataTable, la méthode html() pourrait réussir le Update comme souhaité ???

Si non, quelle solution me proposeriez-vous ???
Merci de m'aider s'il vous plaît.