# 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) {
            // ...
        }
    });