Dc.js server-side (v0.9)

From Native Big Data Documentation
Revision as of 11:53, 14 August 2020 by Ignacio (talk | contribs) (→‎How to use)
Jump to: navigation, search


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>
	
</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>
  • Include in your html file the template of your dashboards (divs, body, ...)
<body>
	<div id="test0"></div>
	<div id="test1"></div>
	<div id="test2"></div>
</body>
  • In your js:
    • Create a dc server object:
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 }") 
		} 
	)

Parameters of dc_nbd factory are:

      • 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:
var numberDisplay     = nbd_chart.createChart ( 'numberDisplay'      , '#test0' );
var gainOrLossChart   = nbd_chart.createChart ( 'pieChart'           , '#test1' );
var quarterChart      = nbd_chart.createChart ( 'pieChart'           , '#test2' );

createChart method creates a chart.

      • 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:
	numberDisplay
		.dimension(  null )
		.width (60)
		.height(40)

    gainOrLossChart 
		.width(180)
		.height(180)
		.radius(80)
		.dimension( NBD.f("(x)=> { [ x.customer ] }") )
		.set_var   ("units", false)
		.set_metric("count", false)
		
    quarterChart
        .width(180)
        .height(180)
        .radius(80)
        .innerRadius(30)
		.dimension( NBD.f("(x)=> { [ x.price ] }") )
		.set_var   ("units", false)
		.set_metric("count", false)

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=114"