Inclure des données HTML comme valeur dans "arrayToDataTable" de Google Pie Chart
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:
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:
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:
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.
