Scripted Chart

Scripted charts may be used to add custom visualizations which are not natively supported by GS. Any visualization which is supported by Plotly can be used.

Dashboard Scripts are only executed when Viewing a Dashboard, so Scripted charts will always appear empty when editing a Dashboard.

For in-depth explanations and methods, refer to the Dashboard Scripting Guide and the Dashboard Scripting API Reference.

Settings

Setting	Description
Label	The title to display on the table.
Script ID	Identifies how this table is referenced in Dashboard Scripts.

Data From Other Charts

Scripted charts may be drawn based on data from other charts using the onBeforeDraw event. For example, a Scripted chart may be drawn based on the data from a Control Chart:

gsApi.dashboard.controlChart('diameterChecks').onBeforeDraw(async (e) => {
    e.data.detail.forEach((detail) => {
        // Do something with the Control detail
    });
    const data = {...}; // Create a Plotly Data object
    const layout = {...}; // Create a Plotly Layout object
    await gsApi.dashboard.scriptedChart('myScriptedChart').draw([{
        data: data,
        layout: layout
    }]);
});

This will result in the Scripted chart being drawn every time the Control Chart is drawn.

Data From GS

Scripted charts may also be drawn based on data from GS without requiring any other charts on the Dashboard. For example, SPC data may be retrieved for use in a Scripted chart without drawing an SPC Data Table.

gsApi.dashboard.onReady(async () => {
    const retrievalApi = await gsApi.dashboard.retrieval('retrieval 1').alsoRetrieveWhenRefreshed([{
        type: 'spcData',
        id: 'my-chart-retrieval',
        splitBy: ['characteristic']
    }]);

    retrievalApi.onRetrieved(async (e) => {
        // Do something with the data
        const spcData = e.data.response.spcData['my-chart-retrieval'];

        const data = {...}; // Create a Plotly Data object
        const layout = {...}; // Create a Plotly Layout object
        await gsApi.dashboard.scriptedChart('myScriptedChart').draw([{
            data: data,
            layout: layout
        }]);
    });
});

This will result in the Scripted chart being drawn every time data is fetched for the Retrieval.

Data From External Systems

It is possible to draw Scripted charts without utilizing any data from GS. For example, data may be fetched from a public API.

gsApi.dashboard.onReady(async () => {
    const response = await fetch('https://known-url-with-data.com');
    const json = await response.json();

    const data = {...}; // Create a Plotly Data object
    const layout = {...}; // Create a Plotly Layout object
    await gsApi.dashboard.scriptedChart('myScriptedChart').draw([{
        data: data,
        layout: layout
    }]);
});

This will result in a Scripted chart being rendered as soon as the data is finished being fetched.

Reusing Scripted Charts

Scripted charts may be reused across multiple Dashboards with a Library Script. For example, a Library Script which draws a Gauge chart based on CPK for a given retrieval.

/**
 * Draw a CPK gauge chart for a given retrieval.
 * @param {ScriptedChartId} scriptedChartId
 * @param {RetrievalId} retrievalId
 */
async function drawGauge(scriptedChartId, retrievalId) {
    const retrievalApi = await gsApi.dashboard.retrieval(retrievalId).alsoRetrieveWhenRefreshed([{
        type: 'stats',
        stats: {
            spc: ['cpk'],
        },
        id: `${scriptedChartId}-gaugeStats`,
        splitBy: ['characteristic']
    }]);
    retrievalApi.onRetrieved(async (e) => {
        const data = [];
        e.data.response.stats?.[`${scriptedChartId}-gaugeStats`].spc?.forEach((statDetail) => {
            data.push({
                data: [{
                    domain: { x: [0, 1], y: [0, 1] },
                    value: statDetail.stats.cpk,
                    title: { text: "CPK" },
                    type: "indicator",
                    mode: "gauge+number",
                    gauge: {
                        bar: { color: "darkblue" },
                        axis: { range: [null, 3] },
                        steps: [
                            { range: [0, 1], color: "red" },
                            { range: [1, 1.333333], color: "orange" },
                            { range: [1.3333333, 3], color: "green" }
                        ],
                    }
                }],
                layout: {}
            });
        });
        await gsApi.dashboard.scriptedChart(scriptedChartId).draw(data);
    });
}

This function could be called in a Dashboard script.

drawGauge('my-scripted-chart', 'my-retrieval');

Download

Charts may be saved as an image for offline use by clicking the Download button. If multiple charts have been drawn, they may be downloaded individually using the dropdown menu.