bigpresh · January 26, 2021 17:59
diff --git a/chartjs-plugin-zoom.markdown b/chartjs-plugin-zoom.markdown
diff --git a/index.html b/index.html
 <html>

 <body>
    <div class="myChartDiv">
        <canvas id="myChart" width="600" height="400"></canvas>
    </div>
 </body>

 </html>
diff --git a/script.js b/script.js
 // 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();
diff --git a/scripts b/scripts
 <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
 <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>
diff --git a/style.css b/style.css
 .myChartDiv {
    max-width: 600px;
    max-height: 400px;
 }
	<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/[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>