79 lines
1.9 KiB
HTML
Executable File
79 lines
1.9 KiB
HTML
Executable File
<!doctype html>
|
|
<html>
|
|
|
|
<head>
|
|
<title>Scatter Chart</title>
|
|
<script src="../../Chart.bundle.js"></script>
|
|
<script src="../../js1.js"></script>
|
|
<script src="../../js1.svg"></script>
|
|
<script src="../../js2.js"></script>
|
|
<script src="../../js3.js"></script>
|
|
<script src="../../Chart.Zoom.js"></script>
|
|
<script src='../../samples/utils.js'></script>
|
|
|
|
<script src="../node_modules/hammerjs/hammer.min.js"></script>
|
|
<style>
|
|
canvas {
|
|
-moz-user-select: none;
|
|
-webkit-user-select: none;
|
|
-ms-user-select: none;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<div style="width:75%">
|
|
<div>
|
|
<canvas id="myChart"></canvas>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<script>var ctx = document.getElementById("myChart");
|
|
var myChart = new Chart(ctx, {
|
|
type: 'line',
|
|
data: {
|
|
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange","R1ed", "Blu1e", "Yello1w", "Gr1een", "Pu1rple", "Oran1ge"],
|
|
datasets: [{
|
|
label: '# of Votes',
|
|
data: [12, 19, 3, 5, 2, 3,12, 19, 3, 5, 2, 3]
|
|
}]
|
|
},
|
|
options: {
|
|
scales: {
|
|
yAxes: [{
|
|
ticks: {
|
|
beginAtZero:true
|
|
}
|
|
}]
|
|
},
|
|
// 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'
|
|
},
|
|
|
|
// Container for zoom options
|
|
zoom: {
|
|
// Boolean to enable zooming
|
|
enabled: true,
|
|
|
|
// Zooming directions. Remove the appropriate direction to disable
|
|
// Eg. 'y' would only allow zooming in the y direction
|
|
mode: 'x',
|
|
}
|
|
}
|
|
});
|
|
|
|
|
|
<button onclick="window.myScatter.destroy()">Destroy</button>
|
|
<button onclick="window.myScatter.destroy(); window.onload()">Reload</button>
|
|
</body>
|
|
|
|
</html>
|