Intra-day Data

Our Stock chart can accept data as date strings, date objects or time stamps. Your data can be at any interval you need - this particular chart displays data which changes each minute. However if you zoom-out the chart, the data will be grouped into 10 minute intervals. You are free to format time strings on the axis and in the category tool-tip in any way you want. The beginning of a period change can be marked as bold and use a different date/time format. <h2>Prefixes for big or small numbers</h2> Our Stock (and also other charts) can replace zeroes of big numbers to letters, like 1000 = 1K or 5.000.000 = 5M. This is especially comfortable when dealing with really big or small numbers. You can control the letters using <code>prefixesOfBigNumbers</code> and <code>prefixesOfSmallNumbers</code> properties of <a href="http://docs.amcharts.com/3/javascriptstockchart/StockPanel">Stock Panel</a> or <a href="http://docs.amcharts.com/3/javascriptstockchart/PanelsSettings">Panels Settings</a>.

by jroberts

HTML

<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/serial.js"></script>
<script src="https://www.amcharts.com/lib/3/amstock.js"></script>
<script src="https://www.amcharts.com/lib/3/plugins/export/export.min.js"></script>
<link rel="stylesheet" href="https://www.amcharts.com/lib/3/plugins/export/export.css" type="text/css" media="all" />
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>
<div id="chartdiv"></div>
<div id="statsdiv">

</div>

CSS

#chartdiv {
  width: 100%;
  height: 500px;
}

JavaScript

var generateDataTime, displayChartTime, started;

if (Function.prototype.name === undefined) {
  // Add a custom property to all function values
  // that actually invokes a method to get the value
  Object.defineProperty(Function.prototype, 'name', {
    get: function() {
      return /function ([^(]*)/.exec(this + "")[1];
    }
  });
}

function handleRendered(event) {
  console.log(event);
  var stopped = performance.now();

  var msg = "rendered event " + (stopped - started) + "ms";

  showStat(msg);
}

function runAndTime(func) {
  var start = performance.now();
  var results = func();
  var end = performance.now();
  var msg = func.name + " " + (end - start) + "ms";
  showStat(msg);
  return results;
}

function showStat(msg) {
  console.log(msg);
  var stats = document.getElementById("statsdiv");
  stats.innerHTML = stats.innerHTML + msg + "<br />"
}

var chartData = runAndTime(generateChartData);

function generateChartData() {
  var chartData = [];
  var firstDate = new Date(2012, 0, 1);
  firstDate.setDate(firstDate.getDate() - 43200);
  firstDate.setHours(0, 0, 0, 0);

  // 43200 = 60 * 24 * 30 (the minutes in a month)
  for (var i = 0; i < 43200; i++) {
    var newDate = new Date(firstDate);
    newDate.setHours(0, i, 0, 0);

    var a = Math.round(Math.random() * (40 + i)) + 100 + i * 1.14159;
    var b = Math.round(Math.random() * 100000000);

    chartData.push({
      "date": newDate,
      "value": a,
      "volume": b
    });
  }
  return chartData;
}

function makeChart() {
  started = performance.now();
  var chart = AmCharts.makeChart("chartdiv", {
    "type": "stock",
    "theme": "light",
    "categoryAxesSettings": {
      "minPeriod": "mm"
    },

    "dataSets": [{
      "color": "#b0de09",
      "fieldMappings": [{
        "fromField": "value",
        "toField": "value"
      }, {
        "fromField": "volume",
        "toField": "volume"
      }],

      "dataProvider": chartData,
      "categoryField": "date"
    }],

    "panels":...