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 options allows to modify the native chart.js properties by passing a global chart configuration object (opens new window).

The datasetsOptions allows 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 options are:

this.datasetOptions = {};
let type = 'line';
this.options = {
    maintainAspectRatio: false,
    normalized : true,
    scales: {
        y: {
            title: {
                display: true,
                text: ''
            }
        },
        x: {
            type: 'time',
            time: {
                unit: 'second',
            },
        },
    },
    plugins: {},
    datasets: {},
    interaction :{},
    animations: {},
    layout: {},
    elements: {}
};

this.refreshRate = 1000;

Supported layers

The view supports type layers:

• curve

Packaging

This new version of chart.js need some package to work, here a piece of code of the package.json:

    "chart.js": "3.5.1",
    "chartjs-adapter-moment": "1.0.0",
    "moment": "2.29.1"

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 SosGetResult from 'osh-js/core/datasource/sos/SosGetResult.datasource.js';
import {Mode} from 'osh-js/core/datasource/Mode';

function getRandomArbitrary(min, max) {
    return Math.random() * (max - min) + min;
}

let chartDataSource = new SosGetResult("weather", {
    endpointUrl: "sensiasoft.net/sensorhub/sos",
    offeringID: "urn:mysos:offering03",
    observedProperty: "http://sensorml.com/ont/swe/property/Weather",
    startTime: "now",
    endTime: "2055-01-01Z",
    mode: Mode.REAL_TIME,
    tls: true
});

// #region snippet_curve_layer
let windSpeedLayerCurve = new CurveLayer({
    dataSourceId: chartDataSource.id,
    getValues: (rec, timeStamp) => {
        return {
            x: timeStamp,
            y: rec.windSpeed
        }
    },
    lineColor: 'rgba(38,152,255,0.5)',
    getLineColor: (rec) => {
        const randomNumber = getRandomArbitrary(0,1);
        if(randomNumber > 0.5) {
            return 'rgba(255,0,0,0.5)';
        } else {
            return 'rgba(38,152,255,0.5)';
        }
    },
    fill: true,
    backgroundColor: 'rgba(169,212,255,0.5)',
    maxValues: 25,
    getBackgroundColor: (rec) => {
        const randomNumber = getRandomArbitrary(0,1);
        if(randomNumber > 0.5) {
            return 'rgba(255,0,0,0.5)';
        } else {
            return 'rgba(38,152,255,0.5)';
        }
    },
    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",
    options: {
        scales: {
            y: {
                title: {
                    display : true,
                    text: "Wind Speed (m/s)s",
                    padding: 20
                }
            },
        }
    },
    datasetOptions: {
        tension: 0.2 // for 'line'
    }
});

// start streaming
chartDataSource.connect();

---