mirror of
https://github.com/heavyai/heavyai-charting.git
synced 2026-01-25 14:57:45 +00:00
af48ce6739
* geoheatmap raster layer set mapbox token in examples, set cap in example 3, raise poly point cap in other examples (#92) include all css and js files in one bundle bump tp webpack 2 begin raster heatmap example basic heatmap raster layer mixin fix lint xyDim getter/setter for heatmap raster layer raster heatmap layer example with sliders example to use distinct lang refactor use mapd data layer use webpack dev server for examples update example build script calculate proper gap size update geoheatmap example image update example image styling dynamic number of bins on geoheatmap vega-lite api for heat layer implement hex binning update aggregate ability to switch mark types update babelrx manual pixel sizing add destroy hook dynamic color domain linting use layer.genSQL in genVega handle aggregation parsing rebuild do not set null colordomain fix test update bundle fix test * tweak example
165 lines
5.1 KiB
HTML
165 lines
5.1 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<title>MapD</title>
|
|
<meta charset="UTF-8">
|
|
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
|
|
<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;
|
|
}
|
|
.search{
|
|
display: inline-block;
|
|
margin-top: 12px;
|
|
margin-left: 50px;
|
|
}
|
|
.data-count {
|
|
padding-right:20px;
|
|
}
|
|
.filter-count {
|
|
font-weight: bold;
|
|
color: #45B1E8;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<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>
|
|
</nav>
|
|
<div class="col-xs-12">
|
|
<div class="title">Stacked Bar Chart</div>
|
|
<div class="stacked-bar-example"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.min.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js"></script>
|
|
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
|
|
<script src="assets/app.bundle.js"></script>
|
|
|
|
<script>
|
|
|
|
var globalGeocoder = null;
|
|
|
|
function createCharts(crossFilter, con, tableName) {
|
|
var w = document.documentElement.clientWidth - 30;
|
|
var h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0) - 150;
|
|
|
|
var timeChartMeasures = [
|
|
{
|
|
expression: "join_time",
|
|
agg_mode:"min",
|
|
name: "minimum"
|
|
},
|
|
{
|
|
expression: "join_time",
|
|
agg_mode:"max",
|
|
name: "maximum"}
|
|
]
|
|
|
|
|
|
crossFilter
|
|
.groupAll()
|
|
.reduce(timeChartMeasures)
|
|
.valuesAsync(true).then(function(timeChartBounds) {
|
|
|
|
var joinDimension = crossFilter.dimension(["join_time", "country"])
|
|
|
|
var joinGroup = joinDimension
|
|
.group()
|
|
.reduceCount()
|
|
|
|
|
|
var dcTimeChart = dc.barChart('.stacked-bar-example')
|
|
.width(w)
|
|
.height(h)
|
|
.elasticY(true)
|
|
.renderHorizontalGridLines(true)
|
|
.xAxisLabel('Join Time')
|
|
.yAxisLabel('Number of New Users')
|
|
.dimension(joinDimension)
|
|
.group(joinGroup)
|
|
.binParams({
|
|
timeBin: 'month',
|
|
binBounds: [timeChartBounds.minimum, timeChartBounds.maximum]
|
|
});
|
|
|
|
/* Pass in a series to enable stacking function */
|
|
dcTimeChart.series().group(crossFilter.dimension('country').group())
|
|
|
|
dcTimeChart.series().selected(['US','BR','ID','AR','TR'])
|
|
|
|
/* Set the x and y axis formatting with standard d3 functions */
|
|
dcTimeChart
|
|
.x(d3.time.scale.utc().domain([timeChartBounds.minimum, timeChartBounds.maximum]))
|
|
.yAxis().ticks(5);
|
|
|
|
dcTimeChart
|
|
.xAxis()
|
|
.scale(dcTimeChart.x())
|
|
.tickFormat(dc.utils.customTimeFormat)
|
|
.orient('top');
|
|
|
|
dc.renderAllAsync()
|
|
|
|
/*--------------------------RESIZE EVENT------------------------------*/
|
|
window.addEventListener("resize", _.debounce(reSizeAll, 500));
|
|
|
|
function reSizeAll(){
|
|
|
|
var w = document.documentElement.clientWidth - 30;
|
|
var h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0) - 150;
|
|
|
|
dcTimeChart
|
|
.width(w)
|
|
.height(h)
|
|
|
|
dc.redrawAllAsync();
|
|
}
|
|
});
|
|
}
|
|
|
|
|
|
function init() {
|
|
// A MapdCon instance is used for performing raw queries on a MapD GPU database.
|
|
new MapdCon()
|
|
.protocol("https")
|
|
.host("metis.mapd.com")
|
|
.port("443")
|
|
.dbName("mapd")
|
|
.user("mapd")
|
|
.password("HyperInteractive")
|
|
.connect(function(error, con) {
|
|
// Get a table from the database
|
|
var tableName = 'tweets_nov_feb';
|
|
// A CrossFilter instance is used for generating the raw query strings for your MapdCon.
|
|
var crossFilter = crossfilter.crossfilter(con, tableName)
|
|
.then(function(cf) {
|
|
createCharts(cf, con, tableName)
|
|
})
|
|
// Pass instance of crossfilter into our CreateCharts.
|
|
;
|
|
});
|
|
}
|
|
|
|
document.addEventListener('DOMContentLoaded', init, false);
|
|
|
|
function mapApiLoaded() {
|
|
globalGeocoder = new google.maps.Geocoder();
|
|
geocoderObject.geocoder = globalGeocoder;
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|