Gracias, Wikipedia.
ShareCode
Permalink: http://www.treeweb.es/u/974/ 01/02/2011

ShareCode

1  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>2  <script src="https://www.chartjs.org/dist/2.9.3/Chart.min.js"></script>3  <script src="https://www.chartjs.org/samples/latest/utils.js"></script>4  5  6 7  <div style="width:1000px">8  <p>This example demonstrates a time series scale by drawing a financial line chart using just the core library. For more specific functionality for financial charts, please see <a href="https://github.com/chartjs/chartjs-chart-financial">chartjs-chart-financial</a></p>9  <canvas id="chart1"></canvas>10 </div>11 <br>12 <br>13 Chart Type:14 <select id="type">15  <option value="bar">Bar</option>16  <option value="line">Line</option>17 </select>18 <select id="unit">19  <option value="second">Second</option>20  <option value="minute">Minute</option>21  <option value="hour">Hour</option>22  <option value="day" selected>Day</option>23  <option value="month">Month</option>24  <option value="year">Year</option>25 </select>26 <button id="update">update</button>27 <script>28  function generateData() {29  var unit = document.getElementById('unit').value;30 31  function unitLessThanDay() {32  return unit === 'second' || unit === 'minute' || unit === 'hour';33  }34 35  function beforeNineThirty(date) {36  return date.hour() < 9 || (date.hour() === 9 && date.minute() < 30);37  }38 39  // Returns true if outside 9:30am-4pm on a weekday40  function outsideMarketHours(date) {41  if (date.isoWeekday() > 5) {42  return true;43  }44  if (unitLessThanDay() && (beforeNineThirty(date) || date.hour() > 16)) {45  return true;46  }47  return false;48  }49 50  function randomNumber(min, max) {51  return Math.random() * (max - min) + min;52  }53 54  function randomBar(date, lastClose) {55  var open = randomNumber(lastClose * 0.95, lastClose * 1.05).toFixed(2);56  var close = randomNumber(open * 0.95, open * 1.05).toFixed(2);57  return {58  t: date.valueOf(),59  y: close60  };61  }62 63 64  var data = [];65  var lessThanDay = unitLessThanDay();66  for (let i=631148400000; i<633826800000; i+=172800000) {67  data.push({t:i, y:randomNumber(100 * 0.95, 200 * 1.05).toFixed(2)});68  }69 70  return data;71  }72  73  console.log(generateData());74 75  var ctx = document.getElementById('chart1').getContext('2d');76  ctx.canvas.width = 1000;77  ctx.canvas.height = 300;78 79  var color = Chart.helpers.color;80  var cfg = {81  data: {82  datasets: [{83  label: 'CHRT - Chart.js Corporation',84  backgroundColor: color(window.chartColors.red).alpha(0.5).rgbString(),85  borderColor: window.chartColors.red,86  data: generateData(),87  type: 'bar',88  pointRadius: 0,89  fill: false,90  lineTension: 0,91  borderWidth: 292  },{93  label: 'CHRT - Chart.js Corporation',94  backgroundColor: color(window.chartColors.green).alpha(0.5).rgbString(),95  borderColor: window.chartColors.green,96  data: generateData(),97  type: 'bar',98  pointRadius: 0,99  fill: false,100  lineTension: 0,101  borderWidth: 2102  }]103  },104  options: {105  animation: {106  duration: 256, // animation in milliseconds (I guess)107  },108  scales: {109  xAxes: [{110  type: 'time',111  //distribution: 'series',112  offset: true,113  ticks: {114  major: {115  enabled: false,116  fontStyle: 'bold'117  },118  source: 'data',119  autoSkip: true,120  autoSkipPadding: 75,121  maxRotation: 0,122  sampleSize: 100123  },124  afterBuildTicks: function(scale, ticks) {125  console.log('scale:', scale);126  console.log('ticks:', ticks);127  /*128  var majorUnit = scale._majorUnit;129  var firstTick = ticks[0];130  var i, ilen, val, tick, currMajor, lastMajor;131 132  firstTick.major = false;133 134  val = moment(ticks[0].value);135  if ((majorUnit === 'minute' && val.second() === 0)136  || (majorUnit === 'hour' && val.minute() === 0)137  || (majorUnit === 'day' && val.hour() === 9)138  || (majorUnit === 'month' && val.date() <= 3 && val.isoWeekday() === 1)139  || (majorUnit === 'year' && val.month() === 0)) {140  //firstTick.major = true;141  } else {142  //firstTick.major = false;143  }144  145  //lastMajor = val.get(majorUnit);146  147  for (i = 1, ilen = ticks.length; i < ilen; i++) {148  tick = ticks[i];149  val = moment(tick.value);150  currMajor = val.get(majorUnit);151  tick.major = currMajor !== lastMajor;152  lastMajor = currMajor;153  }*/154  return ticks;155  }156  }],157  yAxes: [{158  gridLines: {159  drawBorder: false160  },161  scaleLabel: {162  display: true,163  labelString: 'Closing price ($)'164  }165  }]166  },167  tooltips: {168  intersect: false,169  mode: 'index',170  callbacks: {171  label: function(tooltipItem, myData) {172  var label = myData.datasets[tooltipItem.datasetIndex].label || '';173  if (label) {174  label += ': ';175  }176  label += parseFloat(tooltipItem.value).toFixed(2);177  return label;178  }179  }180  }181  }182  };183 184  var chart = new Chart(ctx, cfg);185 186  document.getElementById('update').addEventListener('click', function() {187  var type = document.getElementById('type').value;188  var dataset = chart.config.data.datasets[0];189  dataset.type = type;190  dataset.data = generateData();191  chart.update();192  });193 194 </script>195 


Este ShareCode tiene versiones:
  1. This exa... (18/09/2021)
Enlace
El enlace para compartir es: