ZoomCharts Example

by YeongCY

HTML

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

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

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

JavaScript

var commonSettings = {
        data: [{
            id: "default",
            units: ["h"],
            url: "https://zoomcharts.com/dvsl/data/time-chart/temperature-kuldiga-h.json"
        }],
        style: {
        	degenerateLinePolicy: 'zero'
        },
        
        series: [
            { type: 'line', style: {steps: true}, data: { aggregation: "avg", index: 1, noDataPolicy: 'skip' } }
        ]
    };

    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,...