First Steps

Build business applications for data analysis with minimal lines of code

Kolibri Business Charts lets you quickly develop interactive charts for custom business analysis applications. It provides projectors for building charts in a modular way. This gives you high flexibility to provide data analysts the application they need.

Try it out

Below you see a chart with 3 data series, which have different data representations. How you can construct such a chart is described in the section different data series representations. First of all, try it out.

Toolbar

As you can see, an optional toolbar is provided to zoom in, zoom out, select a data point, zoom into a specific range in the chart (rubber band zooming), and also move the chart pane back and forth (panning).

Limitation of the advanced axes (more than one data series)

It is not possible to zoom or pan outside the chart. The simple axes (one data series) do not have this limitation.

Zoom and pan on axes

As you can see, an optional toolbar is provided to zoom in, zoom out, select data point, zoom into a specific range in the chart (rubber band zooming), and also move the chart pane back and forth (panning).

It is also possible to zoom (press cmd) and pan (press Alt) on the axes with keyboard combination. Try it out.

Examples

Below you will find examples and descriptions of how to build a chart with one data serie, multiple data series and different data series representations.

To get more information about how to change the data representation, refer to the section interchangeability. If you want to learn how to display the data series in a data table, read the section data bindings.

Example: Chart with one data serie

All chart projectors provide a toolbar.

The projectors for one data serie contain axes with direct manipulation of the chart boundaries via input fields.

How to build a chart with one data serie

This example shows you how to create the chart above step by step.

The easiest way to use the toolkit is to copy the complete src folder in your project. The toolkit requires plain JavaScript, HTML5, CSS and an IDE of your choice.

Setup the html file

Create a basic HTML skeleton. A structured approach is recommended containing at least a style-, chart- and script section.
In order to view the chart in the browser, create a div with the class / id "container" in the chart section. Each chart needs a unique identification. Make sure you have an id for each chart.
```
<div class="container" id="container"></div>
```
To display the data points as a table, a separate div element is needed.
```
<div class="detail-view" id="detail-view"></div>
```
Create your charts in a javascript file with type „module". Include your js file in the script section in your HTML.
```
<script src="your-chart-script.js" type="module"></script>
```

Depending on the projectors you need, add the relevant links for the styling in the CSS section. To arrange the axes correctly, grid.css and charts-base.css are needed at a minimum. The other files provide a basic styling.

<link rel="stylesheet" href="../../src/business-charts/css/grid.css">

<link rel="stylesheet" href="../../src/business-charts/css/charts-base.css">

The style for the tooltip

<link rel="stylesheet" href="../../src/business-charts/css/selectionTool.css">

The styles for the detail view and data table

<link rel="stylesheet" href="../../src/business-charts/css/dataTableView.css">

<link rel="stylesheet" href="../../src/business-charts/css/simpleDetailView.css">

The Kolibri basic styles

<link rel="stylesheet" href="../../src/Kolibri/docs/css/kolibri-base.css">

<link rel="stylesheet" href="../../src/Kolibri/docs/css/kolibri-light-colors.css">

Setup the JavaScript file

For one data serie, represented as scatter chart, the SimpleChartProjector() is needed with the corresponding SimpleChartController().

A data array of type "ScatterChartDataElement"

/** @type { Array.<ChartDataElement> } */

const data = [ {
    name: 'A1', xValue: -4, yValue: 3,
}, {
    name: 'B1', xValue: -3, yValue: 2,
}, {
    name: 'C1', xValue: -2, yValue: 0,
}, {
    name: 'D1', xValue: -1, yValue: -3,
}, {
    name: 'E1', xValue: 0, yValue: 1,
}, {
    name: 'F1', xValue: 1, yValue: -1,
},{
    name: 'G1', xValue: 2, yValue: 4,
},{
    name: 'H1', xValue: 3, yValue: 2,
},{
    name: 'I1', xValue: 4, yValue: 9,
},];

Define a simpleController as SimpleLineChartController() with your data and optional toolbar as arguments

const simpleController = SimpleAreaChartController(data, {
        tools: [
            zoomInTool,
            zoomOutTool,
            bubbleTooltipSelectionTool,
            rubberBandTool,
            panningTool,
        ]
    });

Append the SimpleChartProjector() with its simpleController to your html container.
```
document.getElementById('container').append(
                        SimpleChartProjector(simpleController));
```
Avoid mishaps

Please make sure to import the corresponding scripts with .js extension.
```
import { ... }   from "../../scriptName.js";
```
Detail View for the data points

To display the data point details as a table, read the section data bindings.

Interchangeability

To change the data representation from, for example line to area, just change the controller.

const simpleController = SimpleAreaChartController(data, { ...tools... });

For the scatter chart, use this controller:

const simpleController = SimpleScatterChartController(data, { ...tools... });

Example: Chart with more than one data series and same data visualization

The projectors for multiple data series provide one y-axis for each data serie.

Press shift and mouse on the corresponding axis to shift the range of the data serie. Press cmd/ctrl and mouse on the corresponding axis for zooming.

On the x-axis it is possible to manipulate the chart section via mouse. Adjusting the left and right axis range boundary via mouse modifies the amount of the data points displayed. Shifting the axis range via mouse changes the first and the last data set displayed.

How to build Charts with more than one data series and same data visualization

This example shows you how to create the chart above step by step.

The easiest way to use the toolkit is to copy the complete src folder in your project. The toolkit requires plain JavaScript, HTML5, CSS and an IDE of your choice.

Setup the html file

In order to view the chart in the browser, create a div with the id "container" in the chart section. Each chart need a unique identification. Make sure you have an id for each chart.
```
<div class="container" id="container"></div>
```
Create your charts in a javascript file with type „module". Include your js file in the script section in your HTML.
```
<script src="your-chart-script.js" type="module"></script>
```

<link rel="stylesheet" href="../../src/business-charts/css/grid.css">

<link rel="stylesheet" href="../../src/business-charts/css/charts-base.css">

The style for the tooltip

<link rel="stylesheet" href="../../src/business-charts/css/selectionTool.css">

The styles for the detail view and data table

<link rel="stylesheet" href="../../src/business-charts/css/dataTableView.css">

<link rel="stylesheet" href="../../src/business-charts/css/simpleDetailView.css">

The Kolibri basic styles

<link rel="stylesheet" href="../../src/Kolibri/docs/css/kolibri-base.css">

<link rel="stylesheet" href="../../src/Kolibri/docs/css/kolibri-light-colors.css">

Setup the JavaScript file

For two or more data series, represented as line chart, the AdvancedChartProjector() is needed with the corresponding LineChartController().

Create two or more data series as data array of type "ChartDataElement" like the following example.

/** @type { Array.<ChartDataElement> } */

const data1 = [ {
    name: 'A1', xValue: -4, yValue: 3,
}, {
    name: 'B1', xValue: -3, yValue: 2,
}, {
    name: 'C1', xValue: 2, yValue: 0,
},];

/** @type { Array.<ChartDataElement> } */

const data2 = [ {
    name: 'A2', xValue: -4, yValue: 13,
}, {
    name: 'B2', xValue: -3, yValue: 12,
}, {
    name: 'C2', xValue: 2, yValue: 10,
},];

Define a controller as LineChartController() with your data arrays and optional toolbar as arguments

const controller = LineChartController( [data1 , data2] , {
        tools: [
            zoomInTool,
            zoomOutTool,
            bubbleTooltipSelectionTool,
            rubberBandTool,
            panningTool,
        ]
    });

Append the AdvancedChartProjector() with its controller to your html container.
```
document.getElementById('container').append(
                        AdvancedChartProjector(controller));
```
Avoid mishaps

Please make sure to import the corresponding scripts with .js extension.
```
import { ... }   from "../../scriptName.js";
```
Detail View for the data points

To display the data point details as a table, read the section data bindings.

Interchangeability

To change the data representation from, for example, line to area, just change the controller.

const controller = AreaChartController( [data1 , data2] { ...tools... });

For the scatter chart, use this controller:

const controller = ScatterChartController( [data1 , data2] , { ...tools... });

Charts with different data representations

The projectors for multiple data series provide one y-axis for each data serie.

Press shift and mouse on the corresponding axis to shift the range of the data serie. Press cmd/ctrl and mouse on the corresponding axis for zooming.

How to build Charts with different data representations

This example shows you how to create a chart with different data representations step by step.

The easiest way to use the toolkit is to copy the complete src folder in your project. The toolkit requires plain JavaScript, HTML5, CSS and an IDE of your choice.

Setup the html file

In order to view the chart in the browser, create a div with the id "container" in the chart section. Each chart needs a unique identification. Make sure you have an id for each chart.
```
<div class="container" id="container"></div>
```
Create your charts in a javascript file with type „module". Include your js file in the script section in your HTML.
```
<script src="your-chart-script.js" type="module"></script>
```

<link rel="stylesheet" href="../../src/business-charts/css/grid.css">

<link rel="stylesheet" href="../../src/business-charts/css/charts-base.css">

The style for the tooltip

<link rel="stylesheet" href="../../src/business-charts/css/selectionTool.css">

The styles for the detail view and data table

<link rel="stylesheet" href="../../src/business-charts/css/dataTableView.css">

<link rel="stylesheet" href="../../src/business-charts/css/simpleDetailView.css">

The Kolibri basic styles

<link rel="stylesheet" href="../../src/Kolibri/docs/css/kolibri-base.css">

<link rel="stylesheet" href="../../src/Kolibri/docs/css/kolibri-light-colors.css">

Setup the JavaScript file

For two or more data series with different data representations, the AdvancedChartProjector() is needed with the ChartController().

Create two or more data series as data array of type "ChartDataElement" like the following example.

/** @type { Array.<ChartDataElement> } */

const data1 = [ {
    name: 'A1', xValue: -4, yValue: 3,
}, {
    name: 'B1', xValue: -3, yValue: 2,
}, {
    name: 'C1', xValue: 2, yValue: 0,
},];

/** @type { Array.<ChartDataElement> } */

const data2 = [ {
    name: 'A2', xValue: -4, yValue: 13,
}, {
    name: 'B2', xValue: -3, yValue: 12,
}, {
    name: 'C2', xValue: 2, yValue: 10,
},];

Define a controller as ChartController() with your data arrays and optional toolbar as arguments

const controller = ChartController([
                    { type: SCATTER_CHART, data: data1  },
                    { type: LINE_CHART, data: data2 },], {
                    tools: [
                    zoomInTool,
                    zoomOutTool,
                    bubbleTooltipSelectionTool,
                    rubberBandTool,
                    panningTool,
                    ]
                    });

Append the AdvancedChartProjector() with its controller to your html container.
```
document.getElementById('container').append(
                        AdvancedChartProjector(controller));
```
Avoid mishaps

Please make sure to import the corresponding scripts with .js extension.
```
import { ... }   from "../../scriptName.js";
```
Detail View for the data points

To display the data point details as a table, read the section data bindings.

Interchangeability

To change the data representation from line to, for example area, just change the controller.

const controller = AreaChartController( [data1 , data2] { ...tools... });

For the scatter chart, use this controller:

const controller = ScatterChartController( [data1 , data2] , { ...tools... });

Projector and controller interchangeability

The main feature of the Toolkit is the interchangeability.

Change Data representation for one data serie

If you want to change the representation of the data of your SimpleChartProjector(), you only need to replace the corresponding controller.

const controller = SimpleLineChartController(data, {...});

Projectors for more than one data serie

If you have more than one data serie, you need the controllers without the word "simple" in the front. Your data series are now passed as an array [data, data2].

const controller = LineChartController([data, data2], {...});

Now the AdvancedChartProjector() is used instead of the SimpleChartProjector().

document.getElementById('container').append(AdvancedChartProjector(controller));

Different data representations

The AdvancedChartProjector() may also be used if you want to visualise the data series differently. For this purpose you need the ChartController(). The difference is that the first argument requires objects with the chart type to be displayed and the respective data series.

const controller = ChartController(
            [
            { type: SCATTER_CHART, data: data  },
            { type: SCATTER_CHART, data: data2 },
            { type: LINE_CHART,    data: data3 }
            ],
            {...});

Data Binding of simple detail and data table view

All chart controllers have a binding to the SimpleDetailViewProjector() and the DataTableViewProjector().

Your data series have a binding the data table view.

Simple Detail View

To display the data points, first create a div with the class "detail-view" in your html-file.

<div class="detail-view" id="detail-view"></div>

In your javascript file, create a constant for the detail view div element.

const detailView = document.getElementById('detail-view');

If you already have a simple controller for one data serie, just append it to the detail view element.

detailView.append(SimpleDetailView(controller);

Data Table View

To display the data points as a table, just append the DataTableViewProjector() with its DataTableViewController(). The DataTableViewController() needs the controller as first argument, then the data serie and an optional title.

detailView.append(
        SimpleDetailView(controller),
        DataTableViewProjector(DataTableViewController(controller, controller.getSeries()[0]), 'Data points serie 1'),
        DataTableViewProjector(DataTableViewController(controller, controller.getSeries()[1]), 'Data points serie 2'),
        );

You can also create a new div element in the classList for the table views and append it to the detail view. Have a look at the following solution.

Add a new div element to classList for the table views

To put the table views in a new html element, create a new div element and add it to classList.

const tableViews = document.createElement("div");

Append the projectors with its controllers.

tableViews.classList.add("data-table-views");
tableViews.append(
    DataTableViewProjector(DataTableViewController(controller, controller.getSeries()[0]), 'Data points serie 1'),
    DataTableViewProjector(DataTableViewController(controller, controller.getSeries()[1]), 'Data points serie 2'),
    );

For the last step, append the table view to the detail view.

detailViewMulti.append(
            SimpleDetailView(controller),
            tableViews
            );

Since the table view has only a binding to the controller, it can also be used without any chart projector. Try it out and delete the code line where you append a chart projector to the html element:

document.getElementById('container').append(AdvancedChartProjector(controller));

Build business applications for data analysis with minimal lines of code

Try it out

Toolbar

Limitation of the advanced axes (more than one data series)

Zoom and pan on axes

Examples

Example: Chart with one data serie

How to build a chart with one data serie

Setup the html file

Setup the JavaScript file

Avoid mishaps

Detail View for the data points

Interchangeability

Example: Chart with more than one data series and same data visualization

How to build Charts with more than one data series and same data visualization

Setup the html file

Setup the JavaScript file

Avoid mishaps

Detail View for the data points

Interchangeability

Charts with different data representations

How to build Charts with different data representations

Setup the html file

Setup the JavaScript file

Avoid mishaps

Detail View for the data points

Interchangeability

Projector and controller interchangeability

Change Data representation for one data serie

Projectors for more than one data serie

Different data representations

Data Binding of simple detail and data table view

Simple Detail View

Data Table View

Add a new div element to classList for the table views