Complex Use Case

This application highlights some of the options available to SINTIUM for building complex applications. A simple tutorial will show some of the available using the standard controls, colors and chart types available out of the box.
    // Data

    var dataSource = Sintium.dataSource({
        url: "/data_2018.csv",
        useThread: true,
        csvHasHeader: true,
        useCrossfilter: true,
        dateFormat: "dd.MM.yyyy"
    });

    // Charts

    var barChart = Sintium.barChart({
        domId: "timeline",
        dataSource: dataSource,
        xAxis: "Landingsdato",
        xUnits: "days",
        xRange: [new Date(2018, 0, 1), new Date(2018, 11, 30)],
        elasticY: true,
        showYAxis: true,
        brushOn: true,
        margins: [10, 30, 20, 10],
        useCanvas: false
    });

    var pieChart = Sintium.pieChart({
        domId: 'pie-chart',
        dataSource: dataSource,
        keyColumn: "Fartøytype",
        legend: true,
        labels: false,
        colorScheme: Sintium.colorScheme.HIGHCHART_DEFAULTS
    });

    var sunburst = Sintium.sunburstChart({
        domId: 'sunburst',
        dataSource: dataSource,
        keyColumns: ["ArtGruppe", "Art"]
    });

    var rowChart = Sintium.rowChart({
        domId: 'rows',
        dataSource: dataSource,
        keyColumn: "Landingsfylke",
        elasticX: true,
        colorScheme: Sintium.colorScheme.SPECTRAL
    });

    // Map

    var vectorLayer = Sintium.vectorLayer2({
        layerId: "test",
        dataSource: dataSource,
        lonProperty: "Lon",
        latProperty: "Lat",
        useThread: true,
        clusterRadius: 150,
        clusteredByProperty: "Fartøytype",
        unrollClustersAtZoom: 12
    });

    vectorLayer.addSelection({
        selector: "box",
        condition: "shift click",
        filter: true,
        callback: function(event) {
            console.log(event.popRecord().get("Fartøytype"));
        }
    });

    var map = Sintium.map({
        domId: "map",
        layers: [vectorLayer],
        controls: [
            Sintium.fullScreenControl({ position: 'top-right' }),
            Sintium.zoomControl(),
            Sintium.mapExportControl({ position: 'top-right'}),
            Sintium.drawControl({ position: 'top-right'}),
            Sintium.nightModeControl(),
            Sintium.widgetControl({ width: "80%", widget: barChart, position: 'bottom-center' })
        ],
        zoomOnClusterClick: true
    });

    // Grid

    var grid = Sintium.widgetGrid({
        domId: "grid"
    });

    grid.addWidget(pieChart, {
        width: 6,
        height: 4
    });

    grid.addWidget(sunburst, {
        x: 6,
        width: 6,
        height: 4
    });

    grid.addWidget(rowChart, {
        y: 4,
        width: 12,
        height: 4
    });
<div id="wrapper">
    <div id="map"></div>
    <div id="charts">
        <div id="grid"></div>
        <div id="pie-chart"></div>
        <div id="sunburst"></div>
        <div id="rows"></div>
        <div id="timeline"></div>
    </div>
</div>