My trend line doesn't show up
Closed this issue · 5 comments
invaliduser231 commented
My code is this:
`
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script> <script src="https://cdn.jsdelivr.net/npm/chart.js/dist/Chart.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-trendline"></script><script type="text/javascript" async>
let testing;
async function myFunction() {
let each = new Array();
let test = await fetch(
"https://api.corona-zahlen.org/districts/09462/history/incidence/7"
);
/*.then((res) => res.json())
.then((data) => {
console.log(data.data["09472"].history);
data.data["09472"].history
.slice()
.reverse()
.forEach(async (data) => {
await each.push(Number(data.weekIncidence.toFixed()))
//document.write(`${data.weekIncidence.toFixed()}<br>`);
});
});*/
testing = await test.json();
console.log(testing.data["09462"].history);
return testing;
}
myFunction().then((result) => {
result = result.data["09462"].history;
function date(date) {
var date = new Date(date);
var result = date.toLocaleDateString("de-DE", {
year: "numeric",
month: "2-digit",
day: "2-digit",
});
return result;
}
const labels = [
date(result[0].date),
date(result[1].date),
date(result[2].date),
date(result[3].date),
date(result[4].date),
date(result[5].date),
date(result[6].date),
];
const data = {
labels: labels,
datasets: [
{
label: "Inzidenz in Bayreuth",
backgroundColor: "rgb(255, 99, 132)",
borderColor: "rgb(255, 99, 132)",
data: [
result[0].weekIncidence,
result[1].weekIncidence,
result[2].weekIncidence,
result[3].weekIncidence,
result[4].weekIncidence,
result[5].weekIncidence,
result[6].weekIncidence,
],
fill: false,
trendlineLinear: {
style: "#8e5ea2",
lineStyle: "line",
width: 1,
},
},
],
};
const config = {
type: "line",
data,
options: {},
};
var myChart = new Chart(document.getElementById("myChart"), config);
});
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>
Makanz commented
Have you looked at the examples? Need more information of whats not working.
Can you create a jsfiddle that I can look at?
Sjos12 commented
I'm getting the same issue while using Chartisan. I'm getting no errors in the console, I'm importing the plugin via the cdn. Here's the code.
const chartisan = new Chartisan({
el: `#chart${id}`,
data: chart,
hooks: new ChartisanHooks()
.legend(true)
.colors(colorarray)
.datasets(objectarray)
.padding({
left: 0,
right: 0,
bottom: 0,
top: 20,
})
.options({
options: {
// animation,
maintainAspectRatio: false,
plugins: {
datalabels: {
anchor: 'center',
clamp: true,
align: 'top',
color: () => {
if (type === 'bar'){
return 'white'
} else {
return '#5D2A42'
}
},
},
tooltip: {
enabled: false,
},
legend: {
position: 'bottom',
fullSize: true,
labels: {
boxHeight: 5,
textAlign: 'left',
usePointStyle: true,
// This more specific font property overrides the global property
font: {
size: 15,
family: 'Roboto',
weight: 'thin',
}
}
}
},
scales: {
x: {
grid: {
color: 'white',
borderWidth: 2,
tickWidth: 2,
tickLength: 8,
offset: false,
borderColor: `rgba(93, 42, 66, ${borderopacity})`,
tickColor: '#FFFFFF',
},
type: 'time',
time: {
unit: 'day'
},
},
y: {
beginAtZero: () => {
if (type == 'bar') {
return true
}
return false
},
grid: {
color: 'white',
borderWidth: 2,
tickWidth: 2,
tickLength: 8,
offset: false,
borderColor: `rgba(93, 42, 66, ${borderopacity})`,
tickColor: '#FFFFFF',
},
ticks: {
// Include a unit in the ticks
callback: function(value, index, values) {
return value + unit;
}
},
}
}
}
})
})
bbohling commented
Makanz commented
I have never used Chartisan so I can unfortunately not help you with that.
leinad9905 commented
@bbohling encountering the same issue you had but we weren't able to remove type: time yet, did you come up with a solution that could work with type: time ?