on my project im using chart js bar graph and line graph for data visualization from mysql database using php and javascript , both works perfect but when i try to open it on mobile device
only the line graph doesn’t work properly .
I cant see the line and also i see only 2 axis.
I tried to change mantainAspectRatio and responsive options .
I also tried to add resize-observer-polyfill.
nothing works
Does anyone have an idea how to solve this??
js file:
”’
function myFunction() {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var type = [];
var gain = [];
var range = [];
var dates =[];
var gains = [];
var gains2=[];
range=getDates(new Date(data2[data2.length-1].TargetStart), new Date(data2[data2.length-1].TargetEnd))
for(var i in data2) {
type.push("raise type: "+data2[i].type);
gain.push( data2[i].SellPrice- (data2[i].amount* data2[i].BuyPrice) );
dates.push(new Date(data2[i].EndDate));
}
var x= [];
for(let i=0;i<data2.length;i++) {
for (var j in range){
if(range[j]>=dates[i]){x.push({d:range[j],g:gain[i]});break;}
}
}
for (var j in range){
// if(range[3]<range[j])break;
var culgain=0;
for(var i in x) {
if(range[j]>=x[i].d)culgain+=x[i].g;
}
gains.push({x:range[j] , y:culgain});
}
for (var j in gains){
if(gains[3].x<gains[j].x)break;
gains2.push({x:gains[j].x,y:gains[j].y});
}
var he=data2[data2.length-1].Aname+': רווחי גיוסים צפויים';
var he2=data2[data2.length-1].Aname+':רווחי גיוסים';
const data = {
datasets: [{
label: he,
data: gains,
backgroundColor: "rgba(59, 89, 152, 0.75)",
borderColor: "rgba(59, 89, 152, 1)",
pointHoverBackgroundColor: "rgba(59, 89, 152, 1)",
pointHoverBorderColor: "rgba(59, 89, 152, 1)",
tension: 0.1,
borderWidth: 1
},
{
label: he2,
data: gains2,
backgroundColor: "rgba(211, 72, 54, 0.75)",
borderColor: "rgba(211, 72, 54, 1)",
pointHoverBackgroundColor: "rgba(211, 72, 54, 1)",
pointHoverBorderColor: "rgba(211, 72, 54, 1)",
tension: 0.3,
borderWidth: 3
}
]
};
const config = {
labels:range,
type: 'line',
data,
options :{
scales : {
x : {
type : 'time' ,
time : {
unit : 'week'
}
},
y :{
//max:data2[data2.length-1].Target,
//beginAtZero: true
suggestedMin: 0,
suggestedMax: data2[data2.length-1].Target
}
}
}
};
let el = document.getElementById("mycanvas");
//If it isn't "undefined" and it isn't "null", then it exists.
if(typeof(el) != 'undefined' && el != null){
el.parentNode.removeChild(el);
}
el = document.getElementById("myTableHead");
//If it isn't "undefined" and it isn't "null", then it exists.
if(typeof(el) != 'undefined' && el != null){
el.parentNode.removeChild(el);
}
let table = document.createElement('canvas');
table.id="mycanvas";
// Adding the entire table to the body tag
document.getElementById('wrap').appendChild(table);
var ctx = document.getElementById("mycanvas");
const myChart = new Chart(ctx,config); } };
xmlhttp.open("GET", "raisegraph.php", true);
xmlhttp.send();
}
”’
