mirror of
https://github.com/heavyai/heavyai-charting.git
synced 2026-01-25 14:57:45 +00:00
219 lines
6.9 KiB
HTML
219 lines
6.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<title>MapD</title>
|
|
<meta charset="UTF-8">
|
|
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
|
|
<link rel="stylesheet" type="text/css" href="css/mapdc.min.css" />
|
|
<link rel="stylesheet" type="text/css" href="css/chart.min.css" />
|
|
<link href='https://fonts.googleapis.com/css?family=Roboto:400,700,300' rel='stylesheet' type='text/css'>
|
|
<style>
|
|
.title {
|
|
font-weight: bold;
|
|
text-align:center;
|
|
}
|
|
.mapd{
|
|
position: relative;
|
|
top: 2px;
|
|
}
|
|
.data-count{
|
|
padding-right:20px;
|
|
}
|
|
.filter-count{
|
|
font-weight: bold;
|
|
color: #45B1E8;
|
|
}
|
|
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<svg display="none">
|
|
<defs>
|
|
<g id="icon-lock">
|
|
<path d="M34,20v-4c0-5.5-4.5-10-10-10c-5.5,0-10,4.5-10,10v4H8v20h32V20H34z M18,16c0-3.3,2.7-6,6-6s6,2.7,6,6v4H18V16z"/>
|
|
</g>
|
|
<g id="icon-unlock">
|
|
<path d="M18,20v-8c0-3.3,2.7-6,6-6s6,2.7,6,6v2h4v-2c0-5.5-4.5-10-10-10c-5.5,0-10,4.5-10,10v8H8v20h32V20H18z"/>
|
|
</g>
|
|
|
|
<g id="icon-arrow1">
|
|
<polygon points="21,20 21,40 27,40 27,20 36,20 24,8 12,20 "/>
|
|
</g>
|
|
|
|
<g id="icon-sort">
|
|
<polygon points="24,40 36,28 12,28 "/>
|
|
<polygon points="24,8 12,20 36,20 "/>
|
|
</g>
|
|
|
|
<g id="icon-unfilter">
|
|
<polygon points="4,8 20,24 20,40 28,44 28,24 44,8 "/>
|
|
<polygon points="45.1,29.1 42.9,26.9 38,31.9 33.1,26.9 30.9,29.1 35.9,34 30.9,38.9 33.1,41.1 38,36.1 42.9,41.1 45.1,38.9
|
|
40.1,34 "/>
|
|
</g>
|
|
</defs>
|
|
</svg>
|
|
<nav class="navbar navbar-default">
|
|
<div class="container-fluid">
|
|
<div class="navbar-header" style="margin-top:10px">
|
|
<img alt="Brand" src="images/favicon.png" height="30" width="30">
|
|
<span class="mapd">MapD Demo</span>
|
|
</div>
|
|
<div class="navbar-text navbar-right">
|
|
<div class="data-count">
|
|
<span class="total"><span><span class="filter-count"></span></span>
|
|
<span>of <span class="total-count"></span> flights</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<div class="main-container">
|
|
<div class="col-xs-6">
|
|
<div class="title"> Total Number of Flights by State </div>
|
|
<div class="chart1-example"></div>
|
|
</div>
|
|
|
|
<div class="col-xs-6">
|
|
<div class="title"> Carrier Departure Delay by Arrival Delay <small>(Minutes)</small> </div>
|
|
<div class="chart2-example"></div>
|
|
</div>
|
|
|
|
<div class="col-xs-12">
|
|
<div class="title"> Number of Flights by Departure Time </div>
|
|
<div class="chart3-example"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="node_modules/lodash/lodash.js"></script>
|
|
<script src="node_modules/jquery/dist/jquery.min.js"></script>
|
|
<script src="node_modules/d3/d3.min.js"></script>
|
|
<script src="node_modules/@mapd/mapd-con/dist/thrift.js"></script>
|
|
<script src="node_modules/@mapd/mapd-con/dist/mapd.thrift.js"></script>
|
|
<script src="node_modules/@mapd/mapd-con/dist/mapd_types.js"></script>
|
|
<script src="node_modules/@mapd/mapd-con/dist/MapdCon.js"></script>
|
|
<script src="js/mapd-crossfilter.js"></script>
|
|
<script src="js/mapdc.js"></script>
|
|
<script src="node_modules/@mapd/mapd-mapbox-gl-js/dist/mapbox-gl.js"></script>
|
|
<script src="node_modules/@mapd/mapd-mapbox-gl-js/dist/mapboxgl-overrides.js"></script>
|
|
|
|
<script>
|
|
/*
|
|
* This is example code that shows how to make 3 cross-filtered charts with the
|
|
* dc.mapd.js API. This example is not meant to be a replacement for dc.js
|
|
* documentation. For the dc.js API docs, see here
|
|
* - https://github.com/dc-js/dc.js/blob/master/web/docs/api-latest.md.
|
|
* For an annotated example of using dc.js - see here:
|
|
* https://dc-js.github.io/dc.js/docs/stock.html.
|
|
*/
|
|
|
|
function createCharts(crossFilter) {
|
|
|
|
var colorScheme = ["#22A7F0", "#3ad6cd", "#d4e666"]
|
|
|
|
var w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0) - 50
|
|
var h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0) - 200
|
|
|
|
/*
|
|
* crossFilter is an object that handles cross-filtered the different
|
|
* dimensions and measures that compose a dashboard's charts.
|
|
* It has a number of methods on it.
|
|
*/
|
|
|
|
/*
|
|
* getColumns() will grab all columns from the table along with metadata about
|
|
* those columns.
|
|
*/
|
|
|
|
var allColumns = crossFilter.getColumns();
|
|
|
|
|
|
/*-------------------BASIC COUNT ON CROSSFILTER---------------------------*/
|
|
|
|
/*
|
|
* A basic operation is getting the filtered count and total count
|
|
* of crossFilter. This performs that operation. It is built into DC.
|
|
* Note that for the count we use crossFilter itself as the dimension.
|
|
*/
|
|
|
|
var countDim = crossFilter;
|
|
var countGroup = crossFilter.groupAll();
|
|
dc.dataCount(".data-count")
|
|
.dimension(countDim)
|
|
.group(countGroup);
|
|
|
|
/*------------------------CHART 1 EXAMPLE------------------------------*/
|
|
|
|
|
|
var reduceMultiExpression1 = [{
|
|
expression: "depdelay",
|
|
agg_mode:"avg",
|
|
name: "col1"
|
|
},
|
|
{
|
|
expression: "arrdelay",
|
|
agg_mode:"avg",
|
|
name: "col2"
|
|
}];
|
|
|
|
var tableChartDimension = crossFilter.dimension(["carrier_name", "origin"]); //.projectOn(["carrier_name as col0", "depdelay as col1", "arrdelay as col2"]);
|
|
|
|
var tableChartGroup = tableChartDimension.group().reduce(reduceMultiExpression1);
|
|
|
|
dcTableChart = dc.mapdTable('.chart1-example')
|
|
.height(h/1.5)
|
|
.width(2/3)
|
|
.dimension(tableChartDimension)
|
|
.group(tableChartGroup)
|
|
.size(50)
|
|
.tableFilter(crossFilter.filter());
|
|
|
|
|
|
dc.renderAll()
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
function init() {
|
|
|
|
/*
|
|
* mapdcon is a monad.
|
|
*
|
|
* It provides a MapD specific API to Thrift. Thrift is used to connect to our
|
|
* database backend.
|
|
*/
|
|
|
|
/* Before doing anything we must set up a mapd connection, specifying
|
|
* username, password, host, port, and database name */
|
|
var con = new MapdCon()
|
|
.protocol("http")
|
|
.host("kali.mapd.com")
|
|
.port("9092")
|
|
.dbName("mapd")
|
|
.user("mapd")
|
|
.password("HyperInteractive")
|
|
.connect();
|
|
|
|
/*
|
|
* This instaniates a new crossfilter.
|
|
* Pass in mapdcon as the first argument to crossfilter, then the
|
|
* table name, then a label for the data (unused in this example).
|
|
*
|
|
* to see all availables -- con.getTables()
|
|
*/
|
|
var crossFilter = crossfilter(con, "flights");
|
|
|
|
/*
|
|
* Pass instance of crossfilter into our reateCharts.
|
|
*/
|
|
createCharts(crossFilter);
|
|
}
|
|
|
|
document.addEventListener('DOMContentLoaded', init, false);
|
|
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|