CODEWITHSUNDEEP
anychart
Flo Woo
Flo Woo

Reputation: 989

show empty data points on anychart line graph with dateTime axis

I have a simple dataset with time series data points that i would like to plot on a per-second accuracy. But the data is ticker data so not every point is represented, only on price change.

Here is a simple example where the price goes 14:08, 14:09, 14:10 ... 14:15

https://playground.anychart.com/ZIT0QuAF/1

Is it possible to display the gap/time passed between data points, either with blank space or probably better the x-axis for each second and just an extended line ( maybe dotted or different colour ) connecting the points.

Thank you.

Upvotes: 0

Views: 794

Answers (1)

AnyChart Support
AnyChart Support

Reputation: 3905

Now I see your requirements. You can achieve that very easy. As a default and as in the sample you provided, you use the ordinal based scale. To better illustrate that there was some time passed in between ticker points you should use scatter based scale. Just use the following line in your code:

chart.xScale('scatter');

Now all points follow strictly the time coordinate and all gaps between are showed. Also, all points are connected with dotted line. Please, check a sample below

anychart.onDocumentReady(function() {

  // create data table on loaded data
  var table = anychart.data.table("epoch");

  table.addData([
  {
    last: 0.00000462,
    epoch: 1520260206263,
    vol: 0,
    volBase: 0,
    prcnt: 0,
    volDiff: 0,
    percentFromStart: 0.00000000
  },
  {
    last: 0.00000558,
    epoch: 1520260207391,
    vol: 0,
    volBase: 0,
    prcnt: -17.20430108,
    volDiff: NaN,
    percentFromStart: 20.77922078
  },
  {
    last: 0.00000585,
    epoch: 1520260208131,
    vol: 0,
    volBase: 0,
    prcnt: -4.61538462,
    volDiff: NaN,
    percentFromStart: 26.62337662
  },
  {
    last: 0.00000680,
    epoch: 1520260209293,
    vol: 0,
    volBase: 0,
    prcnt: -13.97058824,
    volDiff: NaN,
    percentFromStart: 47.18614719
  },
  {
    last: 0.00000693,
    epoch: 1520260210752,
    vol: 0,
    volBase: 0,
    prcnt: -1.87590188,
    volDiff: NaN,
    percentFromStart: 50.00000000
  },
  {
    last: 0.00000657,
    epoch: 1520260215326,
    vol: 0,
    volBase: 0,
    prcnt: 5.47945205,
    volDiff: NaN,
    percentFromStart: 42.20779221
  },
  {
    last: 0.00000700,
    epoch: 1520260225028,
    vol: 0,
    volBase: 0,
    prcnt: -6.14285714,
    volDiff: NaN,
    percentFromStart: 51.51515152
  },
  {
    last: 0.00000657,
    epoch: 1520260239317,
    vol: 0,
    volBase: 0,
    prcnt: 6.54490107,
    volDiff: NaN,
    percentFromStart: 42.20779221
  },
  {
    last: 0.00000624,
    epoch: 1520260240762,
    vol: 0,
    volBase: 0,
    prcnt: 5.28846154,
    volDiff: NaN,
    percentFromStart: 35.06493506
  },
  {
    last: 0.00000723,
    epoch: 1520260244015,
    vol: 0,
    volBase: 0,
    prcnt: -13.69294606,
    volDiff: NaN,
    percentFromStart: 56.49350649
  },
  {
    last: 0.00000740,
    epoch: 1520260245557,
    vol: 0,
    volBase: 0,
    prcnt: -2.29729730,
    volDiff: NaN,
    percentFromStart: 60.17316017
  },
  {
    last: 0.00000740,
    epoch: 1520260247146,
    vol: 0,
    volBase: 0,
    prcnt: 0.00000000,
    volDiff: NaN,
    percentFromStart: 60.17316017
  },
  {
    last: 0.00000740,
    epoch: 1520260258519,
    vol: 0,
    volBase: 0,
    prcnt: 0.00000000,
    volDiff: NaN,
    percentFromStart: 60.17316017
  },
  {
    last: 0.00000740,
    epoch: 1520260261733,
    vol: 0,
    volBase: 0,
    prcnt: 0.00000000,
    volDiff: NaN,
    percentFromStart: 60.17316017
  },
  {
    last: 0.00000713,
    epoch: 1520260262192,
    vol: 0,
    volBase: 0,
    prcnt: 3.78681627,
    volDiff: NaN,
    percentFromStart: 54.32900433
  },
  {
    last: 0.00000700,
    epoch: 1520260263087,
    vol: 0,
    volBase: 0,
    prcnt: 1.85714286,
    volDiff: NaN,
    percentFromStart: 51.51515152
  },
  {
    last: 0.00000657,
    epoch: 1520260264653,
    vol: 0,
    volBase: 0,
    prcnt: 6.54490107,
    volDiff: NaN,
    percentFromStart: 42.20779221
  },
  {
    last: 0.00000614,
    epoch: 1520260288009,
    vol: 0,
    volBase: 0,
    prcnt: 7.00325733,
    volDiff: NaN,
    percentFromStart: 32.90043290
  },
  {
    last: 0.00000614,
    epoch: 1520260295191,
    vol: 0,
    volBase: 0,
    prcnt: 0.00000000,
    volDiff: NaN,
    percentFromStart: 32.90043290
  },
  {
    last: 0.00000740,
    epoch: 1520260296127,
    vol: 0,
    volBase: 0,
    prcnt: -17.02702703,
    volDiff: NaN,
    percentFromStart: 60.17316017
  },
  {
    last: 0.00000749,
    epoch: 1520260299736,
    vol: 0,
    volBase: 0,
    prcnt: -1.20160214,
    volDiff: NaN,
    percentFromStart: 62.12121212
  },
  {
    last: 0.00000749,
    epoch: 1520260302084,
    vol: 0,
    volBase: 0,
    prcnt: 0.00000000,
    volDiff: NaN,
    percentFromStart: 62.12121212
  },
  {
    last: 0.00000562,
    epoch: 1520260304974,
    vol: 0,
    volBase: 0,
    prcnt: 33.27402135,
    volDiff: NaN,
    percentFromStart: 21.64502165
  },
  {
    last: 0.00000375,
    epoch: 1520260323816,
    vol: 0,
    volBase: 0,
    prcnt: 49.86666667,
    volDiff: NaN,
    percentFromStart: -18.83116883
  },
  {
    last: 0.00000749,
    epoch: 1520260327149,
    vol: 0,
    volBase: 0,
    prcnt: -49.93324433,
    volDiff: NaN,
    percentFromStart: 62.12121212
  },
  {
    last: 0.00000749,
    epoch: 1520260328543,
    vol: 0,
    volBase: 0,
    prcnt: 0.00000000,
    volDiff: NaN,
    percentFromStart: 62.12121212
  },
  {
    last: 0.00000749,
    epoch: 1520260335547,
    vol: 0,
    volBase: 0,
    prcnt: 0.00000000,
    volDiff: NaN,
    percentFromStart: 62.12121212
  },
  {
    last: 0.00000749,
    epoch: 1520260338101,
    vol: 0,
    volBase: 0,
    prcnt: 0.00000000,
    volDiff: NaN,
    percentFromStart: 62.12121212
  }
]);

  chart = anychart.stock();
  chart.xScale('scatter');

    var mappingLastPrice = table.mapAs({
    'value': "last"
  });
  
  var series1 = chart.plot(0).line(mappingLastPrice);
  series1.stroke('red','1', '2 10');
  series1.markers(true);
  series1.markers().fill('blue');
  series1.name("Last Price");

  chart.container('container').draw();
});
html, body, #container {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
<script src="https://cdn.anychart.com/releases/8.1.0/js/anychart-base.min.js"></script>
 <script src="https://cdn.anychart.com/releases/8.1.0/js/anychart-stock.min.js"></script>
 <script src="https://cdn.anychart.com/releases/8.1.0/js/anychart-ui.min.js"></script>
 <script src="https://cdn.anychart.com/releases/8.1.0/js/anychart-exports.min.js"></script>
<link href="https://cdn.anychart.com/releases/8.1.0/css/anychart-ui.min.css" rel="stylesheet"/>
<div id="container"></div>

Upvotes: 1

Related Questions