Skip to content

Instantly share code, notes, and snippets.

@bigpresh
Created January 26, 2021 17:59
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save bigpresh/43ebfc0d3ccd76d320484257dd4ff379 to your computer and use it in GitHub Desktop.
Save bigpresh/43ebfc0d3ccd76d320484257dd4ff379 to your computer and use it in GitHub Desktop.
chartjs-plugin-zoom
<html>
<body>
<div class="myChartDiv">
<canvas id="myChart" width="600" height="400"></canvas>
</div>
</body>
</html>
// Assemble random data to chart
const labels = [];
const values = [];
const datapoints = [];
for (i = 100; i < 200; i++) {
let thisDate = new Date(2021, 1, 1, 9, 0, 0);
thisDate.setDate(thisDate.getDate() + i);
labels.push(i);
values.push(Math.random() * 100);
datapoints.push({
x: thisDate.toISOString().substring(0, 10),
y: Math.random() * 100
});
}
console.log(`Add data point to chart`, datapoints);
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: "line",
labels: labels,
data: {
datasets: [
{
label: "Some data",
data: datapoints, // values,
fill: false,
borderDash: [5, 5],
backgroundColor: "green",
borderColor: "green"
}
]
},
options: {
scales: {
yAxes: [
{
//type: "linear",
display: true,
ticks: {
beginAtZero: true
}
}
],
xAxes: [
{
type: "time",
time: {
displayFormats: {
day: "YYYY-MM-DD"
}
},
display: true
//min: 100,
//max: 200,
/*
beforeUpdate: function (evt) {
console.log(
`xaxis beforeUpdate called - min ${evt.min}, max ${evt.max}`
);
console.log("evt", evt);
//UpdateHistoryOnPan(evt.min, evt.max);
}
*/
}
]
},
plugins: {
zoom: {
// Container for pan options
pan: {
// Boolean to enable panning
enabled: true,
// Panning directions. Remove the appropriate direction to disable
// Eg. 'y' would only allow panning in the y direction
mode: "x",
rangeMin: {
x: null
},
rangeMax: {
x: null
},
onPanComplete: function ({ chart }) {
console.log(`I was panned!`);
console.log(chart);
// This succcessfully gets the first tick on the visible graph area
const labelItems = chart.scales["x-axis-0"]._labelItems;
let firstVisible = labelItems[0].label;
let lastVisible =
labelItems[labelItems.length - 1].label;
console.log(
`Visible range ${firstVisible} - ${lastVisible}`
);
// Work out whether our missing data is at the start or end by checking for a data point
// in chart.data.datasets[0].data whose x value matches this day?
if (chart.data.datasets[0].data[0].x == firstVisible) {
console.log(
"We have data for first value, we must have panned right"
);
} else {
console.log(
"no data for first value, panned left?"
);
}
}
},
// Container for zoom options
zoom: {
// Boolean to enable zooming
enabled: false,
// Zooming directions. Remove the appropriate direction to disable
// Eg. 'y' would only allow zooming in the y direction
mode: "xy"
}
}
}
}
});
myChart.update();
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.3/dist/Chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/hammerjs@2.0.8/hammer.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-zoom@0.7.5/dist/chartjs-plugin-zoom.min.js"></script>
.myChartDiv {
max-width: 600px;
max-height: 400px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment