Makanz
My trend line doesn't show up
My code is this:
`
<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>
Have you looked at the examples? Need more information of whats not working. Can you create a jsfiddle that I can look at?
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;
}
},
}
}
}
})
})
@Sjos12 - I had the same issue...try commenting out type: time. for some reason trendline can't handle that type.
@Makanz are you aware of this issue?
@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 ?
