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