// 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>