var randomColorFactor = function() {
return Math.round(Math.random() * 255);
};
var randomColor = function(opacity) {
return 'rgba(' + randomColorFactor() + ',' + randomColorFactor() + ',' + randomColorFactor() + ',' + (opacity || '.3') + ')';
};
var config = '<div id='humidity'>'{
type: 'line',
data: {
labels: <?php echo $json_array1; ?>,
datasets: [{
label: "",
data: <?php echo $json_array; ?>,
}]
},
options: {
responsive: true,
title:{
display:true,
text:'Chart'
},
tooltips: {
mode: 'label',
callbacks: {
}
},
hover: {
mode: 'dataset'
},
scales: {
xAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: 'Month'
}
}],
yAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: 'Humidity'
},
ticks: {
suggestedMin: -10,
suggestedMax: 250,
}
}]
}
}
};
$.each(config.data.datasets, function(i, dataset) {
dataset.borderColor = randomColor(0.4);
dataset.backgroundColor = randomColor(0.5);
dataset.pointBorderColor = randomColor(0.7);
dataset.pointBackgroundColor = randomColor(0.5);
dataset.pointBorderWidth = 1;
});
window.onload = function() {
var ctx = document.getElementById("canvas").getContext("2d");
window.myLine = new Chart(ctx, config);
};
In this code I want to change $json_array
to some other array $json_array2
on mouse click. How can I achieve it? The $json_array
contains the values fetched from the database.