Hello everybody and thanks in advance. I am using a multi line charts.js to compare follower data from different accounts. I managed to solve the dynamic filling of the graph with the following JS code:
$(document).ready(function() {
// Read data file with random string generated by current time
// to bypass browser cache, and create chart
$.get('db/consultas/comparaFollowers.php', {'_': $.now()}, function(csvString) {
var datafollowers = Papa.parse(csvString).data;
var timeLabelsF = datafollowers.slice(1).map(function(row) { return row[0]; });
var datasetsF = [];
for (var i = 1; i < datafollowers[0].length; i ) {
datasetsF.push(
{
label: datafollowers[0][i], // column name
data: datafollowers.slice(1).map(function(row) {return row[i]}), // data in that column
fill: false // `true` for area charts, `false` for regular line charts
}
)
}
// Get container for the chart
var ctx = document.getElementById('ChartCompFollowers').getContext('2d');
new Chart(ctx, {
type: 'line',
data: {
labels: timeLabelsF,
datasets: datasetsF,
},
options: {
legend: {
display: true,
},
maintainAspectRatio: false,
scales: {
max: 5,
xAxes: [{
time: {
unit: 'date'
},
gridLines: {
display: false,
drawBorder: false
},
ticks: {
maxTicksLimit: 10,
}
}],
yAxes: [{
ticks: {
beginAtZero: false,
},
gridLines: {
color: "rgb(234, 236, 244)",
zeroLineColor: "rgb(234, 236, 244)",
drawBorder: false,
borderDash: [2],
zeroLineBorderDash: [2]
}
}],
},
tooltips: {
displayColors: true,
callbacks: {
label: function(tooltipItem, all) {
return all.datasets[tooltipItem.datasetIndex].label
': ' tooltipItem.yLabel.toLocaleString();
}
}
},
plugins: {
colorschemes: {
/*
Replace below with any other scheme from
https://nagix.github.io/chartjs-plugin-colorschemes/colorchart.html
*/
scheme: 'office.Excel16'
}
}
}
});
});
});
The problem now is that if the values of the different profiles are very far apart, the lines are seen as two straight lines, the variations in the time line not being appreciated.
The problem is that I have many graphics and I would have to adapt the code of all the graphics to work with version 3 (which I will do but I am very new to this and it would take time to fix them all). Is there any way to do the same with version 2? And how could I do so that all the axes and created would not be seen?