Filtering in Charts

This example shows basic filtering in charts, but also the possiblity to have entities in the maps that are not-filterable. The clustered entities in the map which are red are not-selectable and not filterable (as all entires are by default). While the rest of the entries are coordinated between the charts and map 
// Instantiating data source with tools data
var toolsSource = Sintium.dataSource({
    url: "https://www.barentswatch.no/api/v1/geodata/download/fishingfacility/?format=JSON"
});

// Instantiating layer with fishing tools data
var toolsLayer = Sintium.vectorLayer({
    layerId: 'Tools layer',
    dataSource: toolsSource,
    clustered: true,
    styleFunction: Sintium.generateCircleClusterStyle(12, "#2980b9", "#3498db")
});

// Instantiating empty data source with labels specified
var generatedSource = Sintium.dataSource({
    labels: ['lon', 'lat', 'randomNumber']
});

// Instantiating layer with generated data
var generatedLayer = Sintium.vectorLayer({
    layerId: 'Generated layer',
    dataSource: generatedSource,
    cluster: true,
    createFeatureFunction: Sintium.generatePointFeatureFunction("lon", "lat"),
});

function getRandomInRange(from, to, fixed) {
    return (Math.random() * (to - from) + from).toFixed(fixed) * 1;
}

function generateData() {
    var numberOfFeatures = 1000;
    var data = [];
    for (var i = 0; i < numberOfFeatures; i++) {
        var randNumber = Math.floor(Math.random() * 200);
        data.push([getRandomInRange(-180, 180, 3), getRandomInRange(-90, 90, 3), randNumber]);
    }
    return data;
}

var data = generateData();
generatedSource.setData(data);

// Instantiating map
var map = Sintium.map({
    domId: "map",
    layers: [toolsLayer, generatedLayer]
});

// Instantiating charts
var barChart = Sintium.barChart({
    domId: "bar-chart",
    dataSource: toolsSource,
    xAxis: "setupdatetime",
    xUnits: "days",
    xRange: [new Date(2018, 0, 1), new Date(2019, 2, 30)],
    yRange: [0, 200],
    showYAxis: false,
    margins: [10, 10, 45, 10],
    brushOn: true
});

var lineChart = Sintium.lineChart({
    domId: "line-chart",
    dataSource: toolsSource,
    xAxis: "setupdatetime",
    xUnits: "days",
    xRange: [new Date(2018, 0, 1), new Date(2019, 2, 30)],
    yRange: [0, 200],
    showYAxis: false,
    margins: [10, 10, 45, 10],
    brushOn: true
});

var pieChart = Sintium.pieChart({
    domId: "pie-chart",
    dataSource: toolsSource,
    keyColumn: "tooltypename",
    radius: 120
});

var histogram = Sintium.barChart({
    domId: "histogram",
    dataSource: generatedSource,
    xAxis: "randomNumber",
    xRange: [0, 200],
    brushOn: true,
    margins: [10, 10, 45, 10],
    elasticY: true,
    showYAxis: false,
    histogram: true,
});

var scatterPlot = Sintium.scatterPlot({
    domId: "scatter-plot",
    dataSource: generatedSource,
    xAxis: "lon",
    yAxis: "lat",
    xRange: [-180, 180],
    yRange: [-90, 90],
    brushOn: true
});

<div id="map"></div>
<div id="bar-chart" style="width: 100%; height: 120px;"></div>
<div id="line-chart" style="width: 100%; height: 120px;"></div>
<div id="histogram" style="width: 100%; height: 120px;"></div>
<div class="row" style="width: 100%;">
    <div class="col l6" style="display: flex; justify-content: center;">
        <div id="pie-chart" style="height: 300px;"></div>
    </div>
    <div class="col l6" style="display: flex; justify-content: center;">
        <div id="scatter-plot" style="height: 300px; width: 400px;"></div>
    </div>
</div>