Dc.js server-side (v0.9)
dc.js server side
Native Big Data v 0.9 implements a server side implementation that can be connected with dc.js . This allows implement dc dashboards without browsers limitations.
How to use
- Create a html file like the followed one
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>dc.js with nbd server support </title>
<!-- slyles -->
<link type="text/css" rel="stylesheet" href="js/leaflet/leaflet.css" />
<link type="text/css" rel="stylesheet" href="js/leaflet/MarkerCluster.css" />
<link type="text/css" rel="stylesheet" href="js/leaflet/MarkerCluster.Default.css" />
<link type="text/css" rel="stylesheet" href="css/dc.css"/>
<link type='text/css' rel='stylesheet' href="css/nbd_fonts.css"/>
<!-- dc -->
<script type="text/javascript" src="js/d3/d3.js"></script>
<script type="text/javascript" src="js/crossfilter/crossfilter.js"></script>
<script type="text/javascript" src="js/dc/dc.js"></script>
<script type="text/javascript" src="js/dc/dc_box.js"></script>
<script type="text/javascript" src="js/dc/dc-leaflet.js"></script>
<script type="text/javascript" src="js/leaflet/leaflet.js"></script>
<script type="text/javascript" src="js/leaflet/leaflet.markercluster.js"></script>
<script type="text/javascript" src="js/leaflet/leaflet-heat.js"></script>
<!-- utils -->
<script type="text/javascript" src="js/fileSaver/fileSaver.min.js"></script>
<!-- nbd libs -->
<script type="text/javascript" src="js/nbd/nbd.js"></script>
<script type="text/javascript" src="js/nbd/nbd_serializer.js"></script>
<script type="text/javascript" src="js/nbd/nbd_session.js"></script>
<script type="text/javascript" src="js/nbd/nbd_http.js"></script>
<script type="text/javascript" src="js/nbd/nbd_dc_plugin.js"></script>
<!-- chart code comes here -->
<script type="text/javascript"
src="js/examples/covid_19.js"
></script>
<!-- chart code end -->
</head>
<body onload = "NBD.dc.main()">
<div id='float_container' style='display:inline-block;width:100%;height:12000px;border:1px solid #ddd'></div>
</body >
</html>
At this point the only the "chart code comes here" section should be changed
- Create a javascript file with your report configuration:
'use strict';
NBD.dc.cfg = {
"nbd_server": "127.0.0.1",
"urp" : "urp:obj:/COVID_19",
"room" : null,
"parser" : [
{ "in": "cases" , "parser": "integer" }
, { "in": "deaths" , "parser": "integer" }
, { "in": "popData2019" , "parser": "integer" }
, { "in": ["year","month","day"] , "parser": "date" , "out" : "date" }
, { "in": "countriesAndTerritories" , "out" : "country" }
, { "in": "countryterritoryCode" , "out" : "country_code" }
],
"url_data" : "https://www.nativebigdata.com/server/covid_data.php",
"create" : create
};
function create(nbd_chart) {
NBD.dc.geojson.load();
NBD.colors("cases" , "orange");
NBD.colors("deaths", "red");
var groups = [
{ name: "cases" , "var": "cases" , "metric": "sum" }
, { name: "deaths" , "var": "deaths" , "metric": "sum" }
, { name: "population" , "var": "population" , "metric": "sum" }
, { name: "cases/1Mp" , "custom": function (o) { var n = o.value.cases.sum * 1000000; var d = o.value.population.sum;
return (d > 0 && isFinite(d)) ? n/d : 0; } }
];
var groups_2 = [
{ name: "cases" , "var": "cases" , "metric": "sum" } ,
{ name: "deaths" , "var": "deaths" , "metric": "sum" }
];
nbd_chart
.setGrps({
"cases" : NBD.dc.getter ("cases" )
, "deaths" : NBD.dc.getter ("deaths")
, "population" : NBD.dc.getter ("popData2019")
})
.float('#float_container')
.title("Covid 19 pandemic worldwide data")
.src ("https://www.ecdc.europa.eu/en/publications-data/download-todays-data-geographic-distribution-covid-19-cases-worldwide")
.createChart ( 'gaugeChart' , "Cases" ,[ 10 , 30, 350 , 75] ).getters( null , [ groups[0] ])
.createChart ( 'gaugeChart' , "Deaths" ,[ 10 , 110, 350 , 75] ).getters( null , [ groups[1] ])
.createChart ( 'gaugeChart' , "cases/1Mp" ,[ 10 , 190, 350 , 75] ).getters( null , [ groups[3] ])
.createChart ( 'dateChart' , "Evolution" ,[ 400 , 30, 900 , 300] ).getters( NBD.dc.getter(["date","Day"] ) , groups_2, [ "lineChart" , [ "lineChart" , true ] ] )
.createChart ( 'rowChart' , "Country" ,[ 10 , 330, 350 , 1010] ).getters( NBD.dc.getter("country") , groups ).top(20)
.createChart ( 'leafletChoroplethChart' , "Countries" ,[ 400 , 330, 900 , 500] ).getters( NBD.dc.getter("country_code") , groups )
.createChart ( 'leafletMarkerChart' , "Location" ,[ 400 , 850, 900 , 500] ).getters( NBD.dc.getter("country_code" ) , groups )
}
- NBD.dc.cfg : This object contains the basic configuration of the server side dc.js report:
- "nbd_server": The ip or hostname of a Native Big Data server.
- "urp" : The urp of the data
- "room" : The room of the urp or null if the public room is used.
- "url_data" : url of the source of the data.
- "craate" : A Javascript function with the report creation code.
- "parser" : An object used to parse the CSV pointed by "url_data". This object must be an array of fields. Every field defines how to load a field form the CSV:
- "in" : The column(s) name(s) of a field.
- "out": The name of the output object
- "parser" : The name of predefined parsers available:
- integer : The field is a integer value.
- float : The field is a floating point number value.
- date : The field is a date.
- coords : The field constains coordinates
- geojson : The field constains a geoJSON shape.
- Create function: Contains the creation code.
Methods of a chart are like standard dc.js with some new methods:
- dimension : Defines an OP function that returns an array of keys for every record. Null must be used for adimensional charts like NumberDisplay.
- set_var: Selects the indicator to be used. (Must be one of the defined in the setGroup method).
- set_metric: Selects the aggregation function used with the selected indicator. The second parameter is a boolean that says if the chart mus be redraw. Must be false in the chart creation an true every time we want to change it. Some valid aggregators are:
- sum: The sum of the indicator values for very key
- count: The number of records with a valid indicator for very key
- sum%: The sum of the indicator values for very key as a percentage
- count%: The number of records with a valid indicator for very key as a percentage