@diribet/chystat-embeddables NPM

chy.stat Embeddables

Embed chy.stat graphics to your website

Install

npm install @diribet/chystat-embeddables

Usage

JavaScript

ChyEmbeddables.graphic([ element | elementId ], options)

HTML

<div id="embed-graphic" />

Node

import * as ChyEmbeddables from "@diribet/chystat-embeddables";

ChyEmbeddables.graphic("embed-graphic", {
    url: "https://chystat.instance.url",
    graphicId: "bcc44e3a-a6fc-4db1-adfc-f2ad8bb0af55",
    locale: "en",
    simpleDataQuery: {
        K1001: "shaft",
        K2001: "diameter"
    },
    simpleHistoricalDataQuery: {
        K0063: 5
    },
    graphicParameters: {
        "dataHistory.type": "totalValues",
        "dataHistory.numberOfValues": 100
    }
});

Browser

<script src="https://unpkg.com/@diribet/chystat-embeddables/dist/chystat-embeddables.js"></script>

<script type="text/javascript">
  (function() {
    ChyEmbeddables.graphic("embed-graphic", {
        url: "https://chystat.instance.url",
        graphicId: "bcc44e3a-a6fc-4db1-adfc-f2ad8bb0af55",
        locale: "en",
        simpleDataQuery: {
            K1001: "shaft",
            K2001: "diameter"
        },
        simpleHistoricalDataQuery: {
            K0063: 5
        },
    });
  })();
</script>

Options

Option	Description	Required
url	URL of chy.stat	true
graphicId	Id of the embeddable graphic that should be rendered	true
locale	ISO 639-1 language code	false
simpleDataQuery	Query object containing a K-key: value pairs. Multiple conditions will be combined using the logical AND operator.	false*
dataQuery	Query object with complex K-key rules. See documentation for more information.	false*
simpleHistoricalDataQuery	Query object containing a K-key: value pairs. Multiple conditions will be combined using the logical AND operator.	true*
historicalDataQuery	Query object with complex K-key rules. See documentation for more information.	true*
graphicParameters	Graphic parameters that will override default graphic configuration.	false

* You can use either simple[Data|HistoricalData]Query or [data|historicalData]Query version.

Query

Looking for data is performed in two possible ways:

You provide both [simple]dataQuery and [simple]historicalDataQuery. Then data query will be used to find data and after that historical query will be used to find historical data (if necessary).
You privide only [simple]dataQuery Then the data query will be used to find data without any additional history lookup.