Second TimeChart that displays the preview of the whole data range

<script src="https://cdn.zoomcharts-cloud.com/1/nightly/zoomcharts.js"></script>

    <div id="demo"></div>
    <div id="overview"></div>

//No CSS for this example 

    var commonSettings = {
        data: [{
            id: "default",
            units: ["h"],
            url: "/dvsl/data/time-chart/temperature-kuldiga-h.json"
        }],
        series: [
            { data: { aggregation: "avg", index: 1 } }
        ]
    };

    var chart = new TimeChart({
        container: "demo",
        theme: commonSettings,
        interaction: {
            // disable snapping so that the main chart animates better while the overview
            // selection is moved
            snapMode: null
        },
        events: {
            // onPositionChange updates the selection as the chart is dragged around
            onPositionChange: updateOverviewChart,
            // onChartUpdate update the selection on the initial view
            onChartUpdate: updateOverviewChart
        }
    });

    var select = new TimeChart({
        container: "overview",
        theme: commonSettings,
        area: {
            height: 50
        },
        timeAxis: {
            enabled: false,
            // this ensures that the chosen initial display unit will fit no matter what
            minUnitWidth: 0.01
        },
        toolbar: { enabled: false },
        info: { enabled: false },
        interaction: {
            scrolling: { enabled: false },
            resizing: { enabled: false },
            zooming: { enabled: false },
            selection: {
                moveByDragging: true
            }
        },
        chartTypes: {
            columns: {
                style: { padding: [0, 0] }
            }
        },
        navigation: {
            initialDisplayUnit: "1 d",
            initialDisplayPeriod: "max"
        },
        events: {
            // this onClick handler prevents any interactions like drilldown or clearing the selection
            onClick: function (e, args) { e.preventDefault(); },

            // by default, the onSelectionChange only fires once the selection resize is complete.
            // setting selectionChangeDuringInteraction: true forces the event to fire during the resize.
            selectionChangeDuringInteraction: true,

            // as the selection is changed, focus the main chart to the selected time range.
            onSelectionChange: updateMainChart
        }
    });

    function updateOverviewChart(event, args) {
        var range = limitSelection(args.timeStart, args.timeEnd);
        if (range) {
            select.selection(range[0], range[1]);
        }
    }

    function updateMainChart(event, args) {
        // args.origin check prevents the code from being updated when the selection is being updated from
        // the updateOverviewChart method.
        if (args.origin !== "api") {
            let range = limitSelection(args.selectionStart, args.selectionEnd);
            if (range) {
                chart.time(range[0], range[1], false);

                if (range[0] !== args.selectionStart || range[1] !== args.selectionEnd) {
                    // snap the selection to the visible time range
                    select.selection(range[0], range[1]);
                }
            }
        }
    }

    /** Limits the overview selection to never exceed the available data. */
    function limitSelection(start, end) {
        if (start == null || end == null) {
            // when the selection is cleared, reset it to what the main chart is showing
            var time = chart.time();
            start = time[0];
            end = time[1];
        }

        // make sure that the selection is at least one whole day
        end = Math.max(end, start + 86400000);

        var time = select.time();
        return [
            Math.max(start, time[0]),
            Math.min(end, time[1])
        ];
    }

//No separate data for this example