Dc.js server-side (v0.9)
Revision as of 22:28, 10 January 2019 by Ignacio (talk | contribs) (Created page with "Category:NBD = 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...")
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 and include the libs (d3.js , leaflet if you want maps, dc.js, the nbd libs ) and styles
<!-- d3 dc and leaflet css -->
<link type="text/css" rel="stylesheet" href="js/leaflet/leaflet.css" />
<link type="text/css" rel="stylesheet" href="css/dc.css"/>
<!-- d3 dc and leaflet libs -->
<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-leaflet.js"></script>
<script type="text/javascript" src="js/leaflet/leaflet.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_http.js"></script>
<!-- nbd dc plugin -->
<script type="text/javascript" src="js/nbd/nbd_dc_plugin.js"></script>
<!-- charts definition -->
<script type="text/javascript" src="js/examples/example_chart.js"></script>- 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
