javascriptanychart

How to set a Date to anychart.scales.dateTime().minimum (or maximum)


In this example they create a dateTime scale and set Date objects to its minimum and maximum.

anychart.onDocumentReady(function () {
    var chart = anychart.line();

    chart.line([
        [new Date('28-Jun-16'), 511],
        [new Date('29-Jun-16'), 507],
        [new Date('30-Jun-16'), 512],
        [new Date('31-Jun-16'), 513],
        [new Date('01-Jul-16'), 515],
        [new Date('02-Jul-16'), 503],
        [new Date('03-Jul-16'), 516]
    ]);

    var dateTimeScale = anychart.scales.dateTime();
    dateTimeScale.minimum(new Date('27-Jun-16'));
    dateTimeScale.maximum(new Date('05-Jul-16'));

    // Set date scale.
    chart.xScale(dateTimeScale);

    chart.title('Set dateTime scale');
    chart.container('container');
    chart.draw();
});
html, body, #container {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
<script src="https://cdn.anychart.com/releases/8.12.0/js/anychart-base.min.js"></script>
<div id="container"></div>

But trying that in my environment, I'm getting this error:

Argument of type 'Date' is not assignable to parameter of type 'number'.

And that makes sense actually, according to documentation:

minimum(minimum)

Setter for the scale minimum.

Params:
Name: minimum
Type: number <----
Default: null
Description: Scale minimum to set.

And also according to the interface in the anychart node module:

    interface DateTime extends anychart.scales.ScatterBase {
    ...
        minimum(): number;
        minimum(minimum?: number): anychart.scales.DateTime;
    ...

Both are anychart version 8 -> scales -> dateTime -> minimum

What am I missing?? Thx!


Solution

  • You found the answer yourself. minimum() method has a toNumber conversion; it is environment-dependent; it would be easier and safer to just assign a number to it using the valueOf() method of the Date object, as shown below.

    anychart.onDocumentReady(function () {
        var chart = anychart.line();
    
        chart.line([
            [new Date('28-Jun-16'), 511],
            [new Date('29-Jun-16'), 507],
            [new Date('30-Jun-16'), 512],
            [new Date('31-Jun-16'), 513],
            [new Date('01-Jul-16'), 515],
            [new Date('02-Jul-16'), 503],
            [new Date('03-Jul-16'), 516]
        ]);
    
        var dateTimeScale = anychart.scales.dateTime();
        dateTimeScale.minimum((new Date('27-Jun-16')).valueOf());
        dateTimeScale.maximum((new Date('05-Jul-16')).valueOf());
    
        // Set date scale.
        chart.xScale(dateTimeScale);
    
        chart.title('Set dateTime scale');
        chart.container('container');
        chart.draw();
    });
    html, body, #container {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
    }
    <script src="https://cdn.anychart.com/releases/8.12.0/js/anychart-base.min.js"></script>
    <div id="container"></div>