--- /dev/null
+<!doctype html>
+<html>
+
+<head>
+ <title>Line Chart</title>
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
+ <script src="../../../dist/Chart.js"></script>
+ <script src="../../utils.js"></script>
+ <style>
+ canvas {
+ -moz-user-select: none;
+ -webkit-user-select: none;
+ -ms-user-select: none;
+ }
+ </style>
+</head>
+
+<body>
+ <div style="width:1000px">
+ <canvas id="chart1"></canvas>
+ <div>
+ <br>
+ <br>
+ Chart Type:
+ <select id="type">
+ <option value="line">Line</option>
+ <option value="bar">Bar</option>
+ </select>
+ <button id="update">update</button>
+ <script>
+ function randomNumber(min, max) {
+ return Math.random() * (max - min) + min;
+ }
+
+ function randomBar(date, lastClose) {
+ var open = randomNumber(lastClose * .95, lastClose * 1.05);
+ var close = randomNumber(open * .95, open * 1.05);
+ var high = randomNumber(Math.max(open, close), Math.max(open, close) * 1.1);
+ var low = randomNumber(Math.min(open, close) * .9, Math.min(open, close));
+ return {
+ t: date.valueOf(),
+ y: close
+ };
+ }
+
+ var dateFormat = 'MMMM DD YYYY';
+ var date = moment('April 01 2017', dateFormat);
+ var data = [randomBar(date, 30)];
+ var labels = [date];
+ while (data.length < 60) {
+ date = date.clone().add(1, 'd');
+ if (date.isoWeekday() <= 5) {
+ data.push(randomBar(date, data[data.length - 1].y));
+ labels.push(date);
+ }
+ }
+
+ var ctx = document.getElementById("chart1").getContext("2d");
+ ctx.canvas.width = 1000;
+ ctx.canvas.height = 300;
+ var cfg = {
+ type: 'bar',
+ data: {
+ labels: labels,
+ datasets: [{
+ label: "CHRT - Chart.js Corporation",
+ data: data,
+ type: 'line',
+ pointRadius: 0,
+ fill: false,
+ lineTension: 0,
+ borderWidth: 2
+ }]
+ },
+ options: {
+ scales: {
+ xAxes: [{
+ type: 'time',
+ distribution: 'series',
+ ticks: {
+ source: 'labels'
+ }
+ }],
+ yAxes: [{
+ scaleLabel: {
+ display: true,
+ labelString: 'Closing price ($)'
+ }
+ }]
+ }
+ }
+ };
+ var chart = new Chart(ctx, cfg);
+
+ document.getElementById('update').addEventListener('click', function() {
+ var type = document.getElementById('type').value;
+ chart.config.data.datasets[0].type = type;
+ chart.update();
+ });
+
+ </script>
+</body>
+
+</html>
projects / thirdparty / Chart.js.git / commitdiff
