I created some chart in MVC with chart.js without issue Now I want to implement zoom in a Line chart following this example
In my layout page I added:
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/Chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/hammer.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chartjs-plugin-zoom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
My JS function is like:
function ShowStepEventsChart(selectedFeatureId, targetID) {
var title = $("#myChart_" + event.target.id).data("title");
var xLabel = $("#myChart_" + event.target.id).data("xlabel");
var yLabel = $("#myChart_" + event.target.id).data("ylabel");
var ctx = $("#myChart_" + event.target.id).get(0).getContext("2d");
// Used here in order to be able to insert dataset later on.
var data = {
labels: null
};
var myNewChart = new Chart(ctx, {
type: 'line',
data: data,
options: {
responsive: true,
title: { display: false, text: title },
legend: { position: 'top' },
plugins: {
zoom: {
pan: {
enabled: true,
mode: 'x'
},
zoom: {
enabled: true,
mode: 'x'
}
}
},
scales:
{
xAxes: [{
gridLines: { display: true }, display: true, scaleLabel: { display: true, labelString: xLabel }, /*ticks: { beginAtZero: true, stepSize: 1 }*/
ticks: {
callback: function (value, index, values) {
return parseFloat(value).toFixed(0);
},
autoSkip: true,
maxTicksLimit: 20,
stepSize: 1
}
}],
yAxes: [{ gridLines: { display: true }, display: true, scaleLabel: { display: true, labelString: yLabel }, ticks: { beginAtZero: true/*, stepSize: 50 */ } }]
}
}
});
$('.measurementsID').each(function (i, obj) {
var measID = $(this).html();
var startPoint = parseFloat($("#feature_StartPoint_" + measID).data("StartPoint")).toFixed(2) * sensorsFrequency;
var endPoint = parseFloat($("#feature_EndPoint_" + measID).data("EndPoint")).toFixed(2) * sensorsFrequency;
$.ajax({
url: '/API/GetFeature?measurementId=' + measID + '&featureId=' + selectedFeatureId,
type: 'POST',
dataType: 'json',
success: function (reply) {
// Loop through limbs:
for (var a = 0; a < myLimbLabels.length; a++) {
try {
var myData = $(reply.data[name = myLimbLabels[a]].x).slice(startPoint, endPoint);
var myDataset = {
label: myLimbLabels[a],
fill: false,
borderColor: myLimbColors[a],
borderWidth: 1,
pointRadius: 0,
data: myData
}
data.datasets.push(myDataset);
} catch (error) {
$(targetID + " > .card > .PanelBody").html($(targetID + " > .card > .PanelBody").html() + labelList[a] + ": Invalid values for measurement " + measID + "<br />");
}
}
// TimeSpan
try {
var timeSpan = $(reply.data.timeStamps.timeStamps).slice(startPoint, endPoint);
var firstSpan = timeSpan[0];
for (var j = 0; j < timeSpan.length; j++) {
timeSpan[j] = (timeSpan[j] - firstSpan) / sensorsFrequency;
}
data.labels = timeSpan;
} catch (error) {
$(targetID + " > .card > .PanelBody").html($(targetID + " > .card > .PanelBody").html() + "Invalid values for measurement " + measID + "<br />");
}
myNewChart.update();
i += 1;
},
statusCode: {
404: function (content) { addErrorMessage('Cannot find resource.'); },
500: function (content) { addErrorMessage('Internal server error'); }
},
error: function (req, status, errorObj) {
// handle status === "timeout"
// handle other errors
addErrorMessage('Unknown error' + errorObj);
}
});
});
}`
I get the error mesage:
Uncaught TypeError: n.indexOf is not a function at n.determineDataLimits (Chart.min.js:7)
It seems it's because update the graph after it has been generated, but it's what I need.
How can I fix it ?
I fixed my issue when I chaged the way to display the labels. I replace the insertion from
to:
Then in the config I replace:
By:
Not sure why but it works for me.