110 lines
2.6 KiB
HTML
110 lines
2.6 KiB
HTML
<script type="text/javascript" src="{{ static('libs/chart.js/Chart.js') }}"></script>
|
|
<script type="text/javascript">
|
|
function draw_pie_chart(data, $chart) {
|
|
var ctx = $chart.find('canvas')[0].getContext('2d');
|
|
var chart = new Chart(ctx, {
|
|
type: 'pie',
|
|
data: data,
|
|
options: {
|
|
maintainAspectRatio: false,
|
|
responsive: false,
|
|
animation: false,
|
|
legend: {
|
|
position: 'right',
|
|
labels: {
|
|
fontColor: 'black',
|
|
boxWidth: 20,
|
|
},
|
|
},
|
|
},
|
|
});
|
|
}
|
|
|
|
function draw_bar_chart(data, $chart) {
|
|
var ctx = $chart.find('canvas')[0].getContext('2d');
|
|
ctx.canvas.height = 20 * data.labels.length + 100;
|
|
var chart = new Chart(ctx, {
|
|
type: 'horizontalBar',
|
|
data: data,
|
|
options: {
|
|
maintainAspectRatio: false,
|
|
legend: {
|
|
display: false,
|
|
},
|
|
tooltips: {
|
|
callbacks: {
|
|
label: function(tooltipItem, data) {
|
|
return (Math.round(tooltipItem.value * 100) / 100) + '%';
|
|
},
|
|
},
|
|
},
|
|
},
|
|
});
|
|
}
|
|
|
|
function draw_stacked_bar_chart(data, $chart) {
|
|
var ctx = $chart.find('canvas')[0].getContext('2d');
|
|
ctx.canvas.height = 20 * data.labels.length + 100;
|
|
var chart = new Chart(ctx, {
|
|
type: 'horizontalBar',
|
|
data: data,
|
|
options: {
|
|
maintainAspectRatio: false,
|
|
tooltips: {
|
|
mode: 'index',
|
|
intersect: false,
|
|
},
|
|
scales: {
|
|
xAxes: [{
|
|
stacked: true,
|
|
}],
|
|
yAxes: [{
|
|
stacked: true,
|
|
}],
|
|
},
|
|
},
|
|
});
|
|
}
|
|
function draw_histogram(data, $chart) {
|
|
var ctx = $chart.find('canvas')[0].getContext('2d');
|
|
ctx.canvas.height = 20 * data.labels.length + 100;
|
|
var chart = new Chart(ctx, {
|
|
type: 'bar',
|
|
data: data,
|
|
options: {
|
|
maintainAspectRatio: false,
|
|
legend: {
|
|
display: false,
|
|
},
|
|
tooltips: {
|
|
callbacks: {
|
|
label: function(tooltipItem, data) {
|
|
return tooltipItem.value;
|
|
},
|
|
},
|
|
},
|
|
},
|
|
});
|
|
return chart;
|
|
}
|
|
|
|
function draw_timeline(data, $chart) {
|
|
var ctx = $chart.find('canvas')[0].getContext('2d');
|
|
var chart = new Chart(ctx, {
|
|
type: 'line',
|
|
data: data,
|
|
options: {
|
|
maintainAspectRatio: false,
|
|
legend: {
|
|
display: false,
|
|
},
|
|
scales: {
|
|
xAxes: [{
|
|
type: 'time',
|
|
}]
|
|
},
|
|
},
|
|
});
|
|
return chart;
|
|
}
|
|
</script>
|