DIR : /home/kozerus/public_html/ko/graph1.html

/home/kozerus/public_html/ko

<html>
<head>
	<title>/ko/graph1.html</title>


<script id=script_graph>
const labels = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20]

const totalDuration = 2000;
const delayBetweenPoints = totalDuration / labels.length;
const previousY = (ctx) => ctx.index === 0 ? ctx.chart.scales.y.getPixelForValue(100) : ctx.chart.getDatasetMeta(ctx.datasetIndex).data[ctx.index - 1].getProps(['y'], true).y;

var options = {
  type: 'line',
  data: {
    labels,
    datasets: [{
      label: '# of Votes',
      data: [],
      borderWidth: 1,
      function: function(x) {
        return x * x 
      },
    borderColor: "rgba(153, 102, 255, 1)",
        fill: true
    }]
  },
  options: {
    scales: {
      y: {
        max: 200
      },
      x: {
        suggestedMax: 210
      }
    },
    animation: {
      x: {
        type: 'number',
        easing: 'linear',
        duration: delayBetweenPoints,
        from: NaN, // the point is initially skipped
        delay(ctx) {
          if (ctx.type !== 'data' || ctx.xStarted) {
            return 0;
          }
          ctx.xStarted = true;
          return ctx.index * delayBetweenPoints;
        }
      },
      y: {
        type: 'number',
        easing: 'linear',
        duration: delayBetweenPoints,
        from: previousY,
        delay(ctx) {
          if (ctx.type !== 'data' || ctx.yStarted) {
            return 0;
          }
          ctx.yStarted = true;
          return ctx.index * delayBetweenPoints;
        }
      }
    }
  },
  plugins: [{
    id: 'data',
    beforeInit: function(chart) {
      var data = chart.config.data;
      for (var i = 0; i < data.datasets.length; i++) {
        for (var j = 0; j < data.labels.length; j++) {
          var fct = data.datasets[i].function,
            x = data.labels[j],
            y = fct(x);
          data.datasets[i].data.push(y);
        }
      }
    }
  }]
}
	</script>
<!--
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.0.1/chart.js" integrity="sha512-HJ+fjW1Hyzl79N1FHXTVgXGost+3N5d1i3rr6URACJItm5CjhEVy2UWlNNmFPHgX94k1RMrGACdmGgVi0vptrw==" crossorigin="anonymous"></script>
	-->
	<script src=chart.js></script>
	</head>

<body bgcolor=linen>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
</body>
	<h1>/ko/graph1.html</h1>

	</body>
	</html>
koh5_pano

Drag mouse to navigate.
Navigation

Left/Right Mouse drag: Changes camera heading.
Up/Sown Mouse drag: Changes camera pitch.
Scroll wheel: Changes camera field of view.
I-Key: Displays Info panel with canvas size, image size and FPS.
17.Aug.2010, Martin Wengenmayer