innovaphone.chartvisualizer

Includes

The following files have to be included in the html file.

innovaphone.chartvisualizer.js
chart.umd.js

Chart Visualizer Object

innovaphone.ChartVisualizer(start)

Extended ui1.Node canvas object. In addition to the basic node functionality it exposes certain properties and functions that serve as abstractions to interact with the underlying Chart.js library.

start: The apps start object. Used inorder to change certain colors in accordance to the users current colorscheme

Properties

Raw config objects which allow direct manipulation or gathering of information which is not exposed otherwise

data

Labels, Charts and "Chart per Chart" config.

Structure:

ChartVisualizer.data = {
    labels: ["2020", "2021"],
    datasets: [
        {
            // Mandatory
            label: "Foo",
            data: [1,2],
            // Config
            tension: 0.1,
            ...
        }
    ]
}

options

Determins certain chart behaviours e.g. animations or visiblity of axis elements. For all options refer to ChartJS Documentation.

Structure:

ChartVisualizer.options = {
    maintainAspectRatio: false,
    animation: false,
    ...
}

plugins

Array in which the to put custom plugins, which can be build according to ChartJS Plugins

datasetTemplate

Display template used when creating new graphs

ChartVisualizer.datasetTemplate = {
    pointStyle: "circle",
    borderWidth: 2,
}

chartType

Getter for the value of the current chart type

liveTickLimit

Value of the maximum amount of points displayed in live mode

graphColors

Array of hex codes with leading '#' e.g. ["#FF5733"] used when creating graphs

Abstracted Configuration Functions

These functions server to

switch between certain modes of chart and graphs
set rules for the modes
obtain the current state of the above

setChartType(value)

Sets the type graphs should be shown in.

value: Name of the type to be change to ("line", "bar", "pie" or "doughnut"). Defaults to "line"

setDisplayMode(value)

Sets the mode graphs should be shown in.

value: Name of the type to be change to ("default", "sum", "trim" or "live"). Defaults to "default"

setBackground(visible)

Un/-hides background elements, e.g. axis line, leaving only the graphs or restoring the previous settings. Useful for pie or doughnut charts.

Data Mutation

setLabels(labels)

Changes names and amount of labels on the x-axis.

labels: String array representing the labels

addDataset(id, data)

Creates a new dataset (graph).

id: Name of the new dataset.
data: Array of numerical values. Null value are legal and, unlike "0" represents a missing value.

addDatapoint(id, dpData)

Adds a new datapoint to already existing dataset

id: Name or index of the dataset.
dpData: Numerical value.

removeDataset(id)

Removes a dataset

id: Name or index of the dataset.

clear()

Removes every dataset (graph)

update()

Updates the chart, displaying changes.

This, generally, is not necessary to call. As every builtin mutation function calls this function itself, when necessary.

Example

The following example demonstrates how to initialize the ChartVisualizer and setting a couple of display options.

const ChartVisualizerContainer = node.add(new innovaphone.ui1.Div());

const ChartVisualizer = ChartVisualizerContainer.add(new innovaphone.ChartVisualizer(start));
ChartVisualizer.options.maintainAspectRatio = false;
ChartVisualizer.options.plugins = {
    legend: { display: false }
};
ChartVisualizer.setChartType("bar");
ChartVisualizer.enableTrimMode();

The following example demonstrates how to add custom plugins.

ChartVisualizer.options.plugins = {
    htmlLegend: { container: legendNode }
    legend: { display: false }
}

ChartsVisualizer.plugins.push({
    id: "htmlLegend",
    afterUpdate(chart, args, options) {
        // ...
    }
});