I am trying to display data in log scale to ensure that smaller values are seen when large values are present. Is there a way to do this in Billboard.js? It would be great if you can automatically go between linear and logscale depending on data. Thank you.
There's no option for log scales, but you can make visualize as is.
Checkout the follow example.
var chart = bb.generate({
data: {
columns: [
["data1", 1, 10, 20, 30, 40]
]
},
clipPath: false,
axis: {
y: {
min: 1,
tick: {
values: [1, 10, 20, 30, 40, 50],
format: function(x) {
var value = x > 1 ? Math.pow(10, x/10) : x;
return Number(value.toFixed(2));
}
},
padding: {
bottom: 0
}
}
}
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/billboard.js/dist/billboard.css" />
<script src="https://cdn.jsdelivr.net/npm/billboard.js/dist/billboard.pkgd.min.js"></script>
<title>billboar.js - log scale</title>
</head>
<body>
<div id="chart"></div>
</body>
</html>
Related
I want to remove the roads from an OSM map which I am displaying with Leaflet in an AngularJs app.
This question says that roads can't be removed, but that one can use a layer provider which has background images with no roads.
It even gives an example in R - but, alas, I don't know R.
Given that I declare my map thus in AngularJs:
const map = L.map('map').setView([51.178882, -1.826215], 16);
Self.map = map;
const osmUrl = "<a href='http://www.openstreetmap.org'>Open StreetMap</a>";
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
{
attribution: '© ' + osmUrl,
maxZoom: 18,
}).addTo(map);
how do I change the title provider to Esri.WorldShadedRelief? Preferably in such a way that I can toggle tile providers when the user clicks a button.
Just use a different tile provider (check here for Esri.WorldShadedRelief) and use also the example on one of leaflet' s tutorials to change the tile providers using a L.control. Here is how it looks like in vanilla leaflet since I do not know how you have structured your angularjs project but I am pretty sure it can be adjusted easily.
<!DOCTYPE html>
<html>
<head>
<title>Layers Control Tutorial - Leaflet</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" type="image/x-icon" href="docs/images/favicon.ico" />
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.6.0/dist/leaflet.css" integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==" crossorigin="" />
<script src="https://unpkg.com/leaflet#1.6.0/dist/leaflet.js" integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew==" crossorigin=""></script>
<style>
html,
body {
height: 100%;
margin: 0;
}
#map {
width: 600px;
height: 400px;
}
</style>
</head>
<body>
<div id='map'></div>
<script>
var cities = L.layerGroup();
L.marker([39.61, -105.02]).bindPopup('This is Littleton, CO.').addTo(cities),
L.marker([39.74, -104.99]).bindPopup('This is Denver, CO.').addTo(cities),
L.marker([39.73, -104.8]).bindPopup('This is Aurora, CO.').addTo(cities),
L.marker([39.77, -105.23]).bindPopup('This is Golden, CO.').addTo(cities);
var OpenStreetMap_Mapnik = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
var Esri_WorldShadedRelief = 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Shaded_Relief/MapServer/tile/{z}/{y}/{x}';
var openstreet = L.tileLayer(OpenStreetMap_Mapnik, {
maxZoom: 19,
attribution: '© OpenStreetMap contributors'
});
var esri = L.tileLayer(Esri_WorldShadedRelief, {
attribution: 'Tiles © Esri — Source: Esri',
maxZoom: 13
});
var map = L.map('map', {
center: [39.73, -104.99],
zoom: 10,
layers: [openstreet, esri]
});
var baseLayers = {
"OpenStreetMap_Mapnik": openstreet,
"Esri_WorldShadedRelief": esri
};
var overlays = {
"Cities": cities
};
L.control.layers(baseLayers, overlays).addTo(map);
</script>
</body>
</html>
I need to print the label with both key and value and also with the label line.and legends should display on the right side of the pie chart.What are the changes I have to do in js files?
<head>
<meta charset="utf-8" />
<title>Angular-nvD3 Donut Chart</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.1/nv.d3.min.css"/>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.1/nv.d3.min.js"></script>
<script src="https://rawgit.com/krispo/angular-nvd3/v1.0.5/dist/angular-nvd3.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<nvd3 options="options" data="data"></nvd3>
</body>
</html>
// this is the code i am using in my controller
var app = angular.module('plunker', ['nvd3']);
app.controller('MainCtrl', function($scope) {
$scope.options = {
chart: {
type: 'pieChart',
height: 450,
x: function(d){return d.key;},
y: function(d){return d.y;},
showLabels: true,
labelsOutside: true,
legend: {
margin: {
top: 5,
right: 70,
bottom: 5,
left: 0
}
}
}
};
$scope.xFunction = function() {
return function(d) {
return d.key
}
//.legendPosition("right");
};
$scope.yFunction = function() {
return function(d) {
return d.y
}
//.legendPosition("right");
};
$scope.data = [
{
key: "One",
y: 5
},
{
key: "Two",
y: 2
},
{
key: "Three",
y: 9
},
{
key: "Four",
y: 7
},
{
key: "Five",
y: 4
},
{
key: "Six",
y: 3
},
{
key: "Seven",
y: .5
}
];
});
Please, anyone, help me...I am looking for the solution. you can run this code in plunker editor.
i am using angular-nvD3 directory for donut chart.
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>Angular-nvD3 Donut Chart</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.1/nv.d3.min.css"/>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.1/nv.d3.min.js"></script>
<script src="https://rawgit.com/krispo/angular-nvd3/v1.0.5/dist/angular-nvd3.js"></script>
<script>var app = angular.module('plunker', ['nvd3']);
app.controller('MainCtrl', function($scope) {
$scope.options = {
chart: {
type: 'pieChart',
height: 450,
donut: true,
x: function(d){return d.key;},
y: function(d){return d.y;},
showLabels: true,
pie: {
startAngle: function(d) { return d.startAngle -Math.PI/2 },
endAngle: function(d) { return d.endAngle -Math.PI/2 }
},
duration: 1,
}
};
$scope.data = [
{
key: "One",
y: 5
},
{
key: "Two",
y: 2
},
{
key: "Three",
y: 9
}
];
});
</script>
</head>
<body ng-controller="MainCtrl">
<nvd3 options="options" data="data"></nvd3>
</body>
</html>
but i am not getting any idea how to delete above radial buttons (one, two ,three). i don't require them.
my requirement is click here. i need donut exactly like in the attached screenshot. please help me out from this problem.
Thanks.
Add showLegend: false to the chart options.
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>Angular-nvD3 Donut Chart</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.1/nv.d3.min.css"/>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.1/nv.d3.min.js"></script>
<script src="https://rawgit.com/krispo/angular-nvd3/v1.0.5/dist/angular-nvd3.js"></script>
<script>var app = angular.module('plunker', ['nvd3']);
app.controller('MainCtrl', function($scope) {
$scope.options = {
chart: {
type: 'pieChart',
height: 450,
donut: true,
x: function(d){return d.key;},
y: function(d){return d.y;},
showLabels: true,
showLegend: false,
pie: {
startAngle: function(d) { return d.startAngle -Math.PI/2 },
endAngle: function(d) { return d.endAngle -Math.PI/2 }
},
duration: 1,
}
};
$scope.data = [
{
key: "One",
y: 5
},
{
key: "Two",
y: 2
},
{
key: "Three",
y: 9
}
];
});
</script>
</head>
<body ng-controller="MainCtrl">
<nvd3 options="options" data="data"></nvd3>
</body>
</html>
Just add line in return chart object.
showLegend: false
I need to render joint js as a directive in angularjs.I am new to both the frameworks.Currently im rendering it using div. How do i do it using angular directive.
<!DOCTYPE html>
<html ng-app="jointjsApp">
<head>
<meta charset="ISO-8859-1">
<link rel="stylesheet" href="css/joint.min.css" />
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<script src="lib/joint.min.js"></script>
<script src="lib/angular.min.js"></script>
</head>
<title>Test</title>
<body>
<div id="myholder"> </div>
</body>
<script>
var graph = new joint.dia.Graph;
var paper = new joint.dia.Paper({
el: $('#myholder'),
width: 600,
height: 200,
model: graph
});
var rect = new joint.shapes.basic.Rect({
position: { x: 100, y: 30 },
size: { width: 100, height: 30 },
attrs: { rect: { fill: 'blue' }, text: { text: 'my box', fill: 'white' } }
});
var rect2 = rect.clone();
rect2.translate(300);
var link = new joint.dia.Link({
source: { id: rect.id },
target: { id: rect2.id }
});
graph.addCells([rect, rect2, link]);
</script>
</html>
How to i do the same using an angular directive
I'm using ng-grid to create a data table and apply color to cells based on their numerical value. I also need to display those numbers as percentages. I've been able to apply a filter to output the numbers as percents, but doing so wipes out the coloring based on numerical value. How can I get both to work together?
http://plnkr.co/edit/S2oYiwZex7dNw1AQAB9j?p=preview`
var app = angular.module('myApp', ['ngGrid']);
app.controller('MyCtrl', function($scope) {
$scope.myData = [{
space: "S",
week1: 0,
week2: 9,
week3: 1
}, {
space: "E",
week1: 0,
week2: 0,
week3: 0
}, {
space: "B",
week1: 4,
week2: 11,
week3: 16
}, {
space: "C",
week1: 0,
week2: 0,
week3: 0
}, {
space: "S",
week1: 0,
week2: 0,
week3: 0
}];
$scope.gridOptions = {
data: 'myData',
columnDefs: [{
field: 'space',
displayName: ''
}, {
field: 'week1',
displayName: '12/30',
cellTemplate: '<div ng-bind="row.getProperty(col.field) | percentage:100"><div ng-class="{first: row.getProperty(col.field) <= 5}"><div ng-class="{second: row.getProperty(col.field) >= 5}"><div ng-class="{third: row.getProperty(col.field) >= 10}"><div class="ngCellText">{{row.getProperty(col.field)}}</div></div></div></div></div>'
}, {
field: 'week2',
displayName: '1/6',
cellTemplate: '<div ng-bind="row.getProperty(col.field) | percentage:100"><div ng-class="{first: row.getProperty(col.field) <= 5}"><div ng-class="{second: row.getProperty(col.field) >= 5}"><div ng-class="{third: row.getProperty(col.field) >= 10}"><div class="ngCellText">{{row.getProperty(col.field)}}</div></div></div></div>'
}, {
field: 'week3',
displayName: '1/13',
cellTemplate: '<div ng-bind="row.getProperty(col.field) | percentage:100"><div ng-class="{first: row.getProperty(col.field) <= 5}"><div ng-class="{second: row.getProperty(col.field) >= 5}"><div ng-class="{third: row.getProperty(col.field) >= 10}"><div class="ngCellText">{{row.getProperty(col.field)}}</div></div></div></div>'
},
]
};
});
app.filter('percentage', function() {
return function(input, max) {
if (isNaN(input)) {
return input;
}
return Math.floor((input * 100) / max) + '%';
};
});
/*style.css*/
.gridStyle {
border: 1px solid rgb(212, 212, 212);
width: 400px;
height: 300px
}
.first {
background-color: #fff9f8;
color: black;
}
.second {
background-color: #ffeeeb;
color: black;
}
.third {
background-color: #ffded8;
color: black;
}
<!DOCTYPE html>
<html ng-app="myApp">
<head lang="en">
<meta charset="utf-8">
<title>Custom Plunker</title>
<link rel="stylesheet" type="text/css" href="http://angular-ui.github.com/ng-grid/css/ng-grid.css" />
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"></script>
<script type="text/javascript" src="http://angular-ui.github.com/ng-grid/lib/ng-grid.debug.js"></script>
<script type="text/javascript" src="main.js"></script>
</head>
<body ng-controller="MyCtrl">
<div class="gridStyle" ng-grid="gridOptions"></div>
</body>
</html>
`
You should apply the filter on the cellText, what you want is to format the output of the col field and print it as a percentage
<div class="ngCellText">{{row.getProperty(col.field) | percentage:100}}</div>
cf: http://plnkr.co/edit/wiKRgGK8QtNyTyrjpgg8?p=preview
AFAIK, filters create 2-way binding, and in case you do not need that, you can define a cell template as such:
let percentageCellTemplate = '<div class="ngCellText">{{grid.appScope.Math.round(row.entity[col.field])}}%</div>'
and then use it:
columnDefs : [
{ field : 'continuedRate', displayName : 'continuedRate (%)', type: 'number', cellTemplate: percentageCellTemplate}
]
Note: we wrap ui-grid with our code and set Math on our scope, so ui-grid lets us get our own scope by accessing grid.appScope