Difference between revisions of "Dc.js server-side (v0.9)"

From Native Big Data Documentation
Jump to: navigation, search
(→‎How to use)
(→‎dc.js server side)
Line 52: Line 52:
 
src="js/examples/covid_19.js"
 
src="js/examples/covid_19.js"
 
></script>
 
></script>
 +
<!-- chart code end -->
 
 
 
</head>
 
</head>
Line 62: Line 63:
 
</syntaxhighlight>
 
</syntaxhighlight>
  
−
* Include in your html file the template of your dashboards (divs, body, ...)
+
At this point the only the "chart code comes here" section should be changed
  
−
<syntaxhighlight lang="html" line="1" >
 
−
<body>
 
−
<div id="test0"></div>
 
−
<div id="test1"></div>
 
−
<div id="test2"></div>
 
−
</body>
 
−
</syntaxhighlight>
 
  
−
* In your js:
+
* Create a javascript file with your report configuration:
−
** Create a dc server object:
 
  
 
<syntaxhighlight lang="javascript" line="1" >
 
<syntaxhighlight lang="javascript" line="1" >
−
var nbd_chart = dc_nbd( "127.0.0.1" , "urp:obj:/cross_example")
 
−
.setGroup( {
 
−
"units" : NBD.f("(x)=> { x.count }") ,
 
−
"price" : NBD.f("(x)=> { x.price }")
 
−
}
 
−
)
 
−
</syntaxhighlight>
 
  
−
Parameters of dc_nbd factory are:
+
'use strict';
−
*** IP or name of the server
 
−
*** Urp of the resource in the current room (no room if you are not logged in)
 
  
−
setGroup method defines indicators on every register. Every indicator must be defined by a OP function using the NBD.f constructor.
 
  
−
* Create charts in the dashboard:
+
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
 +
};
  
−
<syntaxhighlight lang="javascript" line="1" >
+
function create(nbd_chart) {
−
var numberDisplay    = nbd_chart.createChart ( 'numberDisplay'      , '#test0' );
 
−
var gainOrLossChart  = nbd_chart.createChart ( 'pieChart'          , '#test1' );
 
−
var quarterChart      = nbd_chart.createChart ( 'pieChart'          , '#test2' );
 
−
</syntaxhighlight>
 
  
−
createChart method creates a chart.  
+
NBD.dc.geojson.load();
−
*** First parameter is the type of the dc chart
 
−
*** Second parameter is the selector name used by d3.select to find the object in the DOM that will render the chart.
 
  
−
* assign parameters to every chart like a standard dc.js dashboard:
+
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")
  
−
<syntaxhighlight lang="javascript" line="1" >
+
.createChart ( 'gaugeChart'              , "Cases"     ,[  10 ,  30,  350 ,  75] ).getters( null                              , [ groups[0] ])
−
numberDisplay
+
.createChart ( 'gaugeChart'              , "Deaths"    ,[  10 , 110,  350 , 75] ).getters( null                             , [ groups[1] ])
−
.dimension(  null )
+
.createChart ( 'gaugeChart'              , "cases/1Mp"  ,[  10 , 190,  350 ,  75] ).getters( null                              , [ groups[3] ])
−
.width (60)
 
−
.height(40)
 
  
−
    gainOrLossChart
+
.createChart ( 'dateChart'              , "Evolution" ,[ 400 ,  30,  900 , 300] ).getters( NBD.dc.getter(["date","Day"] )   , groups_2, [ "lineChart" , [ "lineChart" , true ] ] )
−
.width(180)
 
−
.height(180)
 
−
.radius(80)
 
−
.dimension( NBD.f("(x)=> { [ x.customer ] }") )
 
−
.set_var  ("units", false)
 
−
.set_metric("count", false)
 
 
 
−
    quarterChart
+
.createChart ( 'rowChart'                , "Country"  ,[  10 , 330,  350 , 1010] ).getters( NBD.dc.getter("country")          , groups ).top(20)
−
        .width(180)
+
.createChart ( 'leafletChoroplethChart'  , "Countries" ,[ 400 , 330,  900 ,  500] ).getters( NBD.dc.getter("country_code")     , groups )
−
        .height(180)
+
.createChart ( 'leafletMarkerChart'      , "Location" ,[ 400 , 850,  900 , 500] ).getters( NBD.dc.getter("country_code" )    , groups )
−
        .radius(80)
+
}
−
        .innerRadius(30)
 
−
.dimension( NBD.f("(x)=> { [ x.price ] }") )
 
−
.set_var  ("units", false)
 
−
.set_metric("count", false)
 
 
</syntaxhighlight>
 
</syntaxhighlight>
 +
 +
 +
* 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:
 
Methods of a chart are like standard dc.js with some new methods:

Revision as of 12:08, 14 August 2020


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
Retrieved from "http://wiki.nativebigdata.com/index.php?title=Dc.js_server-side_(v0.9)&oldid=115"