Lightweight in EJ2 JavaScript Range navigator control

8 May 20234 minutes to read

By default, when the dataSource for series is empty, a lightweight Range Selector will be shown without Chart.

function GetDateTimeData(start, end, min, max, inc) {
    var series1 = [];
    var point = {};
    var value = 100;
    var date;
    inc = inc ? inc : 1;
    for (var i = 0; start <= end; i += inc) {
        date = start.getTime();
        if (min || max) {
            value = getRandomInt(min, max);
        }
        else {
            if (Math.random() > 0.5) {
                value += Math.random();
            }
            else {
                value -= Math.random();
            }
        }
        point = { x: new Date(date), y: value };
        new Date(start.setDate(start.getDate() + 1));
        series1.push(point);
    }
    return series1;
}
function getRandomInt(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}

var range = new ej.charts.RangeNavigator({
    valueType: 'DateTime',
    intervalType: 'Months',
    labelFormat: 'MMM',
    value: [new Date(2018, 4, 1), new Date(2018, 8, 1)],
    dataSource: GetDateTimeData(new Date(2018, 0, 1), new Date(2019, 0, 1)),
    xName: 'x', yName: 'y'
});
range.appendTo('#element');
<!DOCTYPE html><html lang="en"><head>
    <title>EJ2 Animation</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Typescript UI Controls">
    <meta name="author" content="Syncfusion">
    <link href="index.css" rel="stylesheet">
    
    
<script src="https://cdn.syncfusion.com/ej2/23.2.4/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    
    <div id="container" style="margin-top: 125px">
        <div id="element"></div>
    </div>


<script>
var ele = document.getElementById('container');
if(ele) {
  ele.style.visibility = "visible";
}   
      </script>
<script src="index.js" type="text/javascript"></script>
</body></html>

See Also