private createChart() {
if (this.chart) {
this.chart.destroy();
}
if (this.canvas) {
const ctx = this.canvas.nativeElement;
this.chart = new Chart(ctx, this.configuration);
}
}
draw(sum: number) {
const labels = [];
const colors = [];
const dataSet1 = [];
let rest = 0;
this.categories.getData().forEach((cat: Category) => {
if (cat.name != CategoryList.INCOME) {
const amount = Math.abs(cat.amount);
const perCent = 100 * amount / sum;
if (perCent > 3) {
labels.push(cat.name);
dataSet1.push(amount.toFixed(2));
colors.push(cat.color);
} else {
rest += amount;
}
}
});
labels.push('Rest');
dataSet1.push(rest.toFixed(2));
const data = {
labels: labels,
datasets: [
{
data: dataSet1,
backgroundColor: colors,
hoverBackgroundColor: colors,
}
]
};
// console.log(labels, dataSet1);
if (this.myPieChart) {
this.myPieChart.destroy();
}
const canvas = document.getElementById('pieChart');
// console.log(canvas, canvas.style.display);
// console.log(canvas.parentElement);
canvas.style.display = 'block';
canvas.parentElement.style.display = 'block';
this.myPieChart = new Chart(canvas, {
type: 'pie',
data: data,
options: {
legend: {
display: false,
},
animation: {
duration: 0
},
},
});
}
const chart: Chart = new Chart(new CanvasRenderingContext2D(), {
type: 'bar',
data: {
labels: ['group 1'],
datasets: [
{
backgroundColor: '#000000',
borderWidth: 1,
label: 'test',
data: [1]
}
]
},
options: {
hover: {
intersect: true
},
tooltips: {
filter: data => Number(data.yLabel) > 0,
intersect: true,
itemSort: (a, b) => Math.random() - 0.5,
position: "average",
caretPadding: 2,
displayColors: true,
borderColor: "rgba(0,0,0,0)",
borderWidth: 1,
},
scales: {
xAxes: [{
ticks: {
callback: Math.floor
},
gridLines: {
display: false,
borderDash: [5, 15],
borderDashOffset: 2,
zeroLineBorderDash: [5, 15],
zeroLineBorderDashOffset: 2
}
}]
},
plugins: { arbitraryPlugin: {option: "value"} }
}
});
ngOnDestroy() {
if (this.chart) {
this.chart.destroy();
}
}
const chart: Chart = new Chart(new CanvasRenderingContext2D(), {
type: "bar",
plugins: [plugin, plugin],
data: {
labels: ["group 1"],
datasets: [
{
backgroundColor: "#000000",
borderWidth: 1,
label: "test",
data: [1]
}
]
},
options: {
hover: {
intersect: true
},
onHover(ev: MouseEvent, points: any[]) {
return;
},
title: {
text: ["foo", "bar"]
},
tooltips: {
filter: data => Number(data.yLabel) > 0,
intersect: true,
itemSort: (a, b) => Math.random() - 0.5,
position: "average",
caretPadding: 2,
displayColors: true,
borderColor: "rgba(0,0,0,0)",
borderWidth: 1
},
scales: {
xAxes: [
{
ticks: {
callback: Math.floor
},
gridLines: {
display: false,
borderDash: [5, 15],
borderDashOffset: 2,
zeroLineBorderDash: [5, 15],
zeroLineBorderDashOffset: 2
}
}
]
},
legend: {
display: true,
labels: {
usePointStyle: true,
padding: 40
}
},
devicePixelRatio: 2
}
});
renderLineChart(lineChart: number) {
if (this.myChart) {
this.myChart.destroy();
}
var canvas = this.element;
var ctx = canvas.getContext('2d');
var dataValues = [];
var labels = [];
var agg = 0;
for (let i = 1; i <= 52; i++) {
dataValues.push(agg);
labels.push("" + i);
agg += lineChart;
}
var data = {
labels: labels,
datasets: [
{
label: "Your Savings",
fill: false,
lineTension: 0.1,
backgroundColor: "rgba(75,192,192,0.4)",
borderColor: "rgba(75,192,192,1)",
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: "rgba(75,192,192,1)",
pointBackgroundColor: "#fff",
pointBorderWidth: 1,
pointHoverRadius: 5,
pointHoverBackgroundColor: "rgba(75,192,192,1)",
pointHoverBorderColor: "rgba(220,220,220,1)",
pointHoverBorderWidth: 2,
pointRadius: 1,
pointHitRadius: 10,
data: dataValues
}
],
};
var _options = {
scales: {
xAxes: [{
gridLines: {
display:false
},
scaleLabel: {
display: true,
labelString: 'Weeks'
}
}],
yAxes: [{
gridLines: {
display:false
},
scaleLabel: {
display: true,
labelString: 'Savings (£)'
}
}]
}
};
this.myChart = new Chart(ctx, {
type: 'line',
data: data,
options: _options
});
}
const chart: Chart = new Chart(new CanvasRenderingContext2D(), {
type: "bar",
plugins: [plugin, plugin],
data: {
labels: ["group 1"],
datasets: [
{
backgroundColor: "#000000",
borderWidth: 1,
label: "test",
data: [1, null, 3]
}
]
},
options: {
hover: {
intersect: true
},
onHover(ev: MouseEvent, points: any[]) {
return;
},
title: {
text: ["foo", "bar"]
},
tooltips: {
filter: data => Number(data.yLabel) > 0,
intersect: true,
mode: 'index',
itemSort: (a, b) => Math.random() - 0.5,
position: "average",
caretPadding: 2,
displayColors: true,
borderColor: "rgba(0,0,0,0)",
borderWidth: 1
},
scales: {
xAxes: [
{
ticks: {
callback: Math.floor
},
gridLines: {
display: false,
borderDash: [5, 15],
borderDashOffset: 2,
zeroLineBorderDash: [5, 15],
zeroLineBorderDashOffset: 2
}
}
]
},
legend: {
display: true,
labels: {
usePointStyle: true,
padding: 40
}
},
devicePixelRatio: 2
}
});