Difference between revisions of "Dc.js server-side (v0.9)"
(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...") |
(→How to use) |
||
| Line 9: | Line 9: | ||
== How to use == | == How to use == | ||
| − | * Create a html file | + | * Create a html file like the followed one |
<syntaxhighlight lang="html" line="1" > | <syntaxhighlight lang="html" line="1" > | ||
| − | <!-- | + | <!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/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/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/d3/d3.js"></script> | ||
<script type="text/javascript" src="js/crossfilter/crossfilter.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.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/dc/dc-leaflet.js"></script> | ||
<script type="text/javascript" src="js/leaflet/leaflet.js"></script> | <script type="text/javascript" src="js/leaflet/leaflet.js"></script> | ||
| − | <!-- nbd libs --> | + | <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.js"></script> | ||
<script type="text/javascript" src="js/nbd/nbd_serializer.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_http.js"></script> | ||
| − | |||
<script type="text/javascript" src="js/nbd/nbd_dc_plugin.js"></script> | <script type="text/javascript" src="js/nbd/nbd_dc_plugin.js"></script> | ||
| − | <!-- | + | |
| − | <script type="text/javascript" src="js/examples/ | + | <!-- 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> | ||
</syntaxhighlight> | </syntaxhighlight> | ||
Revision as of 11:53, 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>
</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
