Chart

The Chart view allows the data to be displayed as a Chart using the Chart.js (opens new window) library.

For the moment, the view only supports the Line (opens new window) chart type.

API Reference

Properties configuration

This View is highly configurable. Chart.js is built using a property object. This object can be directly passed, in part or in full, depending on what you want to configure, to the ChartView which will in turn forward it to the Deck object.

The chartjsProps allows to modify the native chart.js properties by passing a global chart configuration object (opens new window) into the chartProps or/and a datasetsProps to modify the native datasets properties (opens new window).

Then a deep merge is processed and passed as a properties object of the Chart.js object. When you pass one of these options to the ChartView, the properties will be merged with the defaults.

The default chartProps are:

let chartProps = {
    responsiveAnimationDuration: 0,
    animation: {
        duration: 0
    },
    spanGaps: true,
    scales: {
        yAxes: [{
            scaleLabel: {
                display: true,
                labelString: 'Values'
            },
            ticks: {
                maxTicksLimit: 5
            }
        }],
        xAxes: [{
            scaleLabel: {
                display: true,
                labelString: 'Time'
            },
            type: 'time',
            time: {
                unit: 'second',
            },
            ticks: {
                maxTicksLimit:5,
                callback: (label, index, values) => {
                    return this.parseDate(values[index].value);
                }
            }
        }],
    },
    responsive: true,
    maintainAspectRatio: true,
};

let datasetsProps = {
    borderColor: '#a3a3a3',
    borderWidth:1,
    backgroundColor: 'rgba(188,221,255,0.1)'
};

Supported layers

The view supports type layers:

• curve

Example

// create data source for Android phone camera
import ChartJsView from 'osh-js/core/ui/view/chart/ChartJsView.js';
import CurveLayer from 'osh-js/core/ui/layer/CurveLayer.js';
import SosGetResultJson from 'osh-js/core/datasource/SosGetResultJson.js';

let chartDataSource = new SosGetResultJson("weather", {
    protocol: "ws",
    service: "SOS",
    endpointUrl: "sensiasoft.net:8181/sensorhub/sos",
    offeringID: "urn:mysos:offering03",
    observedProperty: "http://sensorml.com/ont/swe/property/Weather",
    startTime: "now",
    endTime: "2055-01-01Z"
});

// #region snippet_curve_layer
let windSpeedLayerCurve = new CurveLayer({
    dataSourceId: chartDataSource.id,
    getValues: (rec, timeStamp) => {
        return {
            x: timeStamp,
            y: rec.windSpeed
        }
    },
    name: 'Wind Speed (m/s)'
});
// #endregion snippet_curve_layer

// show it in video view
let chartView = new ChartJsView({
    container: 'char-container',
    layers: [ windSpeedLayerCurve],
    css: "chart-view",
    chartjsProps: {
        chartProps: {
            scales: {
                yAxes: [{
                    scaleLabel: {
                        labelString: "Wind Speed (m/s)"
                    },
                    ticks: {
                        maxTicksLimit: 10
                    }
                }],
                xAxes: [{
                    scaleLabel: {
                        labelString: "Time"
                    },
                    ticks: {
                        maxTicksLimit: 20
                    }
                }],
            }
        },
        datasetsProps: {
            backgroundColor: 'rgba(141,242,246, 0.1)'
        }
    }
});

// start streaming
chartDataSource.connect();

---