12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576 |
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Title</title>
- <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.20.1/moment.min.js"></script>
- <script src='https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js'></script>
- <script src='https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.js'></script>
- <script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-zoom/0.3.0/Chart.Zoom.min.js"></script>
- </head>
- <body>
- <div id="div_linechart">
- <button id="reset_zoom" style="float:right;color:black;">Reset</button>
- <canvas id="linechart"></canvas>
- </div>
- </body>
- <script>
- var ctx = document.getElementById("linechart").getContext("2d");
- window.myChart = new Chart(ctx, {
- type: 'line',
- data: window.chartdata,
- options: {
- responsive: true,
- animation: false,
- tooltips: {
- mode: 'nearest', //'label'
- intersect: false,
- position: 'nearest',
- },
- legend: {
- display: false,
- labels: {
- fontColor: "#FFFFFF",
- fontSize: 12
- }
- },
- hover: {
- mode: 'x'
- },
- scales: {
- xAxes: [{
- ticks: {
- fontColor: "#FFFFFF",
- fontSize: 12
- },
- display: true,
- type: 'time',
- time: {
- tooltipFormat:'ddd MMM DD YYYY hh A',
- },
- gridLines: {
- color: "#595959",
- }
- }],
- yAxes: [{
- ticks: {
- fontColor: "#FFFFFF",
- fontSize: 14
- },
- gridLines: {
- color: "#999999",
- }
- }],
- },
- pan: {
- enabled: true,
- mode: 'x',
- },
- zoom: {
- enabled: true,
- mode: 'x',
- }
- }
- });
- </script>
- </html>
|