Draw a circle at a point on an NVD3 line graph - angularjs

I've used NVD3 to make a line chart, where the X axis is Age (30-75), and the Y axis is risk of a heart attack (0-100%), drawing a line showing the risk over the complete age-span of 30-75:
In the HTML:
<nvd3-line-chart
data="riskchartData"
id="riskPrediction"
height="300"
margin="{left:90,top:20,bottom:70,right:20}"
yaxisLabel="My CHD Risk"
xaxisLabel="Age"
showXAxis="true"
showYAxis="true"
tooltips="true"
interactive="true"
showLegend="true"
showControls="true"
color="colorFunction()">
<svg></svg>
</nvd3-line-chart >
In the JS:
$scope.RiskChartRedraw = function(){
risklines = predemo();
$scope.yMaxFunction();
$scope.riskchartData = [
{
"key": "My current risk",
"area": false,
"values": risklines[0],
"color": "red",
}
];
};
I want to add a circle onto this line, showing the user's current age - say, 50:
In the JS:
$scope.age = 50; // user's current age
$scope.risk = .03; // percentile risk of heart attack at current age
d3.select('#riskPrediction svg')
.append('circle')
//.data(circlerisk)
.attr({
fill: 'red',
stroke: 'red',
cx: $scope.age,
cy: $scope.risk,
r: 7
});
... but this bypasses the translation NVD3 makes of the age and risk data values into d3/SVG graph coordinates.
How does one align the cx and cy coordinates of the circle, to the point on the linegraph that matches a specific age value?
EDIT:
We're inching closer .. adding this at the bottom of the NVD3 section in the HTML above draws a circle that updates with the correct values in realtime:
<svg>
<circle cx="{{agecircle}}" cy="{{riskcircle}}" r="5.656854249492381" style="fill:black;"></circle>
</svg>
... but the values are still not aligned with the line in the chart. Trying to bind this circle to the same values in the dataset is not working:
<circle cx="function(d) { d.x = {{agecircle}}; return x;}" cy="function(d) { d.y = {{riskcircle}}; return y;}" r="8" style="fill:black;"></circle>
Any clues as to what we're missing?
EDIT2:
And closer still ..
Capture XAxis value NVD3 Stacked Area Chart

Related

How to load a chart in a diferent page

I have a chart that is being constructed on page x but I want to load that chart in page y. How do I do that?
I'm trying to use a service but it didn't work.
page x
chart = [];
this.chart = new Chart('canvas', {
type: 'line',
data: {
labels: this.datas,
datasets: [{
label: 'Score',
fill: false,
backgroundColor: 'rgb(255, 99, 132)',
borderColor: 'rgb(255, 99, 132)',
data: this.score
}
}
})
this.fichasService.chart = this.chart;
page y
test = this.fichasService.chart;
<canvas id="canvas">{{test}}</canvas>
If I try to draw the chart on page x it works fine, but when a try to draw in the page y it didn't work.
What I'll do is to refactor that graph as a component itself, so it could be reused everywhere easily.
Just declare a component with the logic you already have, and use
<canvas id="canvas">{{test}}</canvas>
as component's template

How to extract users longitude and latitude in real time using leaflet

I am using Leaflet in a cross-platform mobile app.
I want the user to see his/her movement on the map in real time.
I also want to hold their longitude and latitude separately as global variables for I need this information to make a calculation later on.
Below is what I have so far:
map.locate({
watchPosition:true,
maxZoom:16
});
function onLocationFound(e)
{
var radius = e.accuracy / 2;
L.circle(e.latlng, radius,
{
color: 'red',
fillColor: '#f03',
fillOpacity: 0.5,
radius: 400
}).addTo(map);
}
map.on('locationfound', onLocationFound);
I believe the "watchPosition:true" enables the map to keep on watching the user.
I just could not figure out how to extract the longitude and latitude information .
Thanks in advance
The Leaflet map.locate option is just watch:
If true, starts continuous watching of location changes (instead of detecting it once) using W3C watchPosition method.
function onLocationFound(e)
{
var radius = e.accuracy / 2;
userLat = e.latlng.lat;
userLng = e.latlng.lng;
movingCircle.setLatLng(e.latlng);
movingCircle.redraw();
}
var userLocation = map.locate
({
watch:true,
maxZoom:16,
enableHighAccuracy: true
});
var userLat;
var userLng;
enter code here
var movingCircle = L.circle([0,0], 20,
{color: 'red',
fillColor: '#f03',
fillOpacity: 0.5,
draggable: true }).addTo(map);

angular-chart.js doughnut chart : How do I change width of the arc of a doughnut?

I am using angular-chart.js library(https://jtblin.github.io/angular-chart.js/ ) for implementing doughnut chart.
How do I change width of the arc of a doughnut?
You just need to set the "cutoutPercentage" option in your chart-options. The default value for a doughnut chart is 50. Numbers closer to 100 will have more empty space in the middle, numbers closer to 0 will have less empty space in the middle of the doughnut.
In your controller:
$scope.options = {cutoutPercentage: 75};
$scope.data = [213, 546];
$scope.labels = ['Label 1', 'Label 2'];
In you html:
<canvas class="chart chart-doughnut" chart-data="data" chart-labels="labels" chart-options="options"> </canvas>

How to add image in polygon google map api?

I have written my own google map directive in Angular.
I have drawn polygon using the drawing manager. Then from the coordinates drew by the user, got the coordinates and drew the Polygon.
Now I want to add the image in polygon.
How to add the image in polygon area?
bermudaTriangle = new google.maps.Polygon({
paths: polygonsArray,
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35
, editable: true
});
Here we need do a trick like following.
Add a polygon
Get the polygon coordinates.
Now draw a icon with the marker in the specified coordinates
Then it will look like an icon inside the polygon
So here, after adds the polygon, I have drawn icon with the help of marker in the center place of the polygon.
var bounds = new google.maps.LatLngBounds();
var i, center;
for (i = 0; i < polygonsCoordinates.length; i++) {
bounds.extend(polygonsCoordinates[i]);
}
center = bounds.getCenter();
var image = 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png';
var beachMarker = new google.maps.Marker({
position: { lat: center.lat(), lng: center.lng() },
map: map,
icon: image
});

nvd3, lineWithFocusChart y-axis ticks are missing

I am trying to work with nvd3 lineWithFocusChart for time series data. But surprisingly y axis ticks are appearing as 000.00. The json data is in correct format as given in nvd3 website. I have placed my reference plunker at http://plnkr.co/edit/QwMbTL4co0wMVKaQurxq?p=preview.
In order to sort the time series data, I have used the following function. With this, data is displayed properly except y-axis ticks issue. However tool tip is appearing fine with its correct values. What shall I do, to fix the appearance of y-axis ticks as 000.00
angular.forEach($scope.data, function(
series, index) {
series.values.sort(function(a, b) {
return a.x - b.x;
});
});
Your chart width is hiding the values.
Add a width : 700,
And change the margins
margin : {
top: 20,
right: 20,
bottom: 60,
left: 100
},
UPDATE : You could also completely remove width and the margin , by default it will take the div size and re-sieze automatically.
Hope it helps
You just need to not format the Y axis :
yAxis: {
axisLabel: 'Y Axis',
tickFormat: function(d){
return d;
},
rotateYLabel: false
},
Updated plunker.

Resources