Cutlery/invoiceninja
1
0
Fork 0
mirror of https://github.com/invoiceninja/invoiceninja.git synced 2025-06-23 20:00:33 -04:00
Code Issues Packages Projects Releases Wiki Activity

Adding charts to reports

Browse Source
This commit is contained in:
Hillel Coren 2018-02-27 09:43:58 +02:00
parent 51d2cdf1bd
commit bac8c6af63
2 changed files with 50 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/Ninja/Reports/AbstractReport.php
View File

@ -184,7 +184,7 @@ class AbstractReport
return $date->format('Y' . $dateFormat); return $date->format('Y' . $dateFormat);
} }
public function getChartData() public function getLineChartData()
{ {
$startDate = date_create($this->startDate); $startDate = date_create($this->startDate);
$endDate = date_create($this->endDate); $endDate = date_create($this->endDate);

116
resources/views/reports/chart_builder.blade.php
View File

@ -1,85 +1,67 @@
<script type="text/javascript"> <script type="text/javascript">
function loadChart(data) { function loadLineChart(data) {
var ctx = document.getElementById('chart-canvas').getContext('2d'); var ctx = document.getElementById('lineChartCanvas').getContext('2d');
if (window.myChart) { window.myChart = new Chart(ctx, {
window.myChart.config.data = data; type: 'line',
window.myChart.config.options.scales.xAxes[0].time.unit = chartGroupBy.toLowerCase(); data: data,
window.myChart.config.options.scales.xAxes[0].time.round = chartGroupBy.toLowerCase(); options: {
window.myChart.update(); tooltips: {
} else { mode: 'x-axis',
$('#progress-div').hide(); titleFontSize: 15,
$('#chart-canvas').fadeIn(); titleMarginBottom: 12,
window.myChart = new Chart(ctx, { bodyFontSize: 15,
type: 'line', bodySpacing: 10,
data: data, callbacks: {
options: { title: function(item) {
tooltips: { return moment(item[0].xLabel).format("{{ $account->getMomentDateFormat() }}");
mode: 'x-axis', },
titleFontSize: 15, label: function(item, data) {
titleMarginBottom: 12, //return label + formatMoney(item.yLabel, chartCurrencyId, account.country_id);
bodyFontSize: 15, /*
bodySpacing: 10, console.log('tooltip:');
callbacks: { console.log(item);
title: function(item) { console.log(data);
return moment(item[0].xLabel).format("{{ $account->getMomentDateFormat() }}"); */
}, return item.yLabel;
label: function(item, data) {
//return label + formatMoney(item.yLabel, chartCurrencyId, account.country_id);
/*
console.log('tooltip:');
console.log(item);
console.log(data);
*/
return item.yLabel;
}
} }
},
title: {
display: false,
fontSize: 18,
text: '{{ trans('texts.total_revenue') }}'
},
scales: {
xAxes: [{
type: 'time',
time: {
unit: chartGroupBy,
round: chartGroupBy,
},
gridLines: {
display: false,
},
}],
yAxes: [{
ticks: {
beginAtZero: true,
callback: function(label, index, labels) {
return roundSignificant(label);
}
},
}]
} }
},
scales: {
xAxes: [{
type: 'time',
time: {
unit: "{{ $report->chartGroupBy() }}",
round: "{{ $report->chartGroupBy() }}",
},
gridLines: {
display: false,
},
}],
yAxes: [{
ticks: {
beginAtZero: true,
callback: function(label, index, labels) {
return roundSignificant(label);
}
},
}]
} }
}); }
} });
} }
var account = {!! $account !!};
var chartGroupBy = "{{ $report->chartGroupBy() }}";
$(function() { $(function() {
var chartData = {!! json_encode($report->getChartData()) !!}; var lineChartData = {!! json_encode($report->getLineChartData()) !!};
//console.log(chartData); //console.log(chartData);
loadChart(chartData); loadLineChart(lineChartData);
}); });
</script> </script>
<div class="row"> <div class="row">
<div class="col-md-12"> <div class="col-md-12">
<canvas id="chart-canvas" style="background-color:white; padding:20px; width:100%; height: 250px;"></canvas> <canvas id="lineChartCanvas" style="background-color:white; padding:20px; width:100%; height: 250px;"></canvas>
</div> </div>
</div> </div>