i get data in JSON
{"Excellent":"5","NeedsImprovement":"14","Average":"9"}
How can i draw that JSON using AmCharts Pie chart / donut chart with angular-js.
var data = JSON.parse(JSON_TEXT);
var dataProvider = [];
for(var key in data) {
dataProvider.push({
value: data[key],
title: key,
});
}
var chart = AmCharts.makeChart("chartdiv", {
"type": "pie",
"theme": "none",
"dataProvider": dataProvider,
"titleField": "title",
"valueField": "value",
"labelRadius": 5,
"radius": "42%",
"innerRadius": "60%",
"labelText": "[[title]]"
});
and for updating data you should do
chart.dataProvider = newSetOfDataArray;
chart.validateData();
Related
i am beginner in angular and chartjs. I want to load same data file in different chart. so i create a json file. and i want to load it my chart.
My code is like below
external_data.json
[{
"data": "[13, 22, 30, 40, 50]",
"label": "Africa",
"borderColor": "#3e95cd",
"fill": "false"
}, {
"data": "[47, 14, 37, 67, 80]",
"label": "Asia",
"borderColor": "#8e5ea2",
"fill": "false"
}]
line-chart.component.ts
var ctx = document.getElementById("line-chart");
new Chart(ctx, {
type: 'line',
data: {
labels: [1850, 1900, 1950, 2000, 2050],
datasets: // i want get json here
}
});
this is folder structure
Juse mention the path as follows,
loaddata() {
this.Items = this.http.get("../data/external_data.json")
.map(res => res.json());
}
and assign this.Items to your array
I am using angularjs with mongodb.
I have table which contains user coordinates.
{ "mac" : "aa:22:01:d2:e6:f9","lat" : 33.53625,"lng" : -111.92674, "time" : 2017-07-12T04:44:13.707Z}
{ "mac" : "aa:22:01:d2:e6:f9","lat" : 33.53625,"lng" : -111.92674, "time" : 2017-07-12 04:44:13.707Z}
{ "mac" : "aa:22:01:d2:e6:f9","lat" : 33.53625,"lng" : -111.92674, "time" : 2017-07-12 04:46:59.707Z}
{ "mac" : "aa:22:01:d2:e6:f9","lat" : 33.53625,"lng" : -111.92674, "time" : 2017-07-12 04:47:29.707Z}
I want to display heat map. can anyone point me the best way to achieve this.
I'll have building image which i need to adjust in background later.
Basically you need to map your data to an array of google.maps.LatLng objects. Then init the map, init heatmap layer with mapped data and assign heatmap layer to the map. Check the sample
You need also to include the visualization library, because HeatmapLayer is there.
function initMap() {
/* Data points defined as an array of LatLng objects */
var data = [{
"mac": "aa:22:01:d2:e6:f9",
"lat": 33.53625,
"lng": -111.92674,
"time": '2017-07-12T04:44:13.707Z'
}, {
"mac": "aa:22:01:d2:e6:f9",
"lat": 33.53625,
"lng": -111.92674,
"time": '2017-07-12 04:44:13.707Z'
}, {
"mac": "aa:22:01:d2:e6:f9",
"lat": 33.53625,
"lng": -111.92674,
"time": '2017-07-12 04:46:59.707Z'
}, {
"mac": "aa:22:01:d2:e6:f9",
"lat": 33.53625,
"lng": -111.92674,
"time": '2017-07-12 04:47:29.707Z'
}];
var heatmapData = data.map(function(item) {
return new google.maps.LatLng(item.lat, item.lng)
});
var center = new google.maps.LatLng(33.53625, -111.92674);
map = new google.maps.Map(document.getElementById('map'), {
center: center,
zoom: 13,
mapTypeId: 'satellite'
});
var heatmap = new google.maps.visualization.HeatmapLayer({
data: heatmapData
});
heatmap.setMap(map);
}
.as-console-wrapper{
display:none !important;
}
<script async defer type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false&libraries=visualization&callback=initMap"></script>
<div id="map" style="width:500px;height:150px"></div>
I am using angularjs and Google charts.
How to include zero values in Google Pie Chart? I am able to show it in the legend by including sliceVisibilityThreshold: 0
see screenshot to see what I already have
But what I want is to display it in both legend and in the chart: display zero value in pie chart like this
Is there any way to achieve what I want? I searched in Google forums but couldn't find any solution. Thanks in advance.
use the option for legend.position: 'labeled' to show a line for the zero values
legend: {
position: 'labeled'
},
see following working snippet...
google.charts.load('current', {
callback: function () {
var data = new google.visualization.DataTable({
"cols": [
{"label": "Country", "type": "string"},
{"label": "# of Devices", "type": "number"}
],
"rows": [
{"c": [{"v": "Canada"}, {"v": 0}]},
{"c": [{"v": "Mexico"}, {"v": 33}]},
{"c": [{"v": "USA"}, {"v": 34}]}
]
});
var container = document.getElementById('chart_div');
var chart = new google.visualization.PieChart(container);
chart.draw(data, {
height: 400,
legend: {
position: 'labeled'
},
sliceVisibilityThreshold: 0,
width: 600
});
},
packages:['corechart']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
I have a web page which uses a custom service to manage a map on the View (OpenLayers). I want to be able to display information about different markers on the page somewhere which means binding to a service property. The service is being called from a custom directive, and the binding (as far as I know) should be done from the Controller. The data being shown at the moment is the initialised object rather than binding to any changes to that object.
main.html
<h2>My Map</h2>
<div id="map" class="map"></div>
<p>
Name: {{selected.name}}</br>
Routers: {{selected.routers}}</br>
Switches: {{selected.switches}}
</p>
main.ctrl.js
angular.module("app").controller("MainController", function($scope, openlayers){
openlayers.init();
$scope.selected = openlayers.selected;
});
openlayers.js
angular.module("app").factory("openlayers", function(){
var init = function(){
var vectorLayers = [new ol.layer.Tile({
source: new ol.source.MapQuest({layer: 'osm'})
})];
vectorLayers.push(createMapLayer("red"));
vectorLayers.push(createMapLayer("orange"));
vectorLayers.push(createMapLayer("blue"));
setUpMap(vectorLayers);
};
var activeVector = {
name: null,
routers: null,
switches: null
};
function createMapLayer(markerColor){
var vectorSource = getVectorSource();
//add the feature vector to the layer vector, and apply a style to whole layer
var vectorLayer = new ol.layer.Vector({
source: getVectorSource(cities[markerColor]),
style: getIconStyle(markerColor)
});
return vectorLayer;
}
function getVectorSource(cities){
var vectorSource = new ol.source.Vector({
//create empty vector
});
//create a bunch of icons and add to source vector
for (var index in cities){
var city = cities[index];
var iconFeature = new ol.Feature({
geometry: new ol.geom.Point(
ol.proj.transform(
[city.lon, city.lat],
'EPSG:4326',
'EPSG:3857'
)),
name: city.name,
routers: 200,
switches: 100
});
vectorSource.addFeature(iconFeature);
}
return vectorSource;
}
function getIconStyle(markerColor){
//create the style
return new ol.style.Style({
image: new ol.style.Icon(/** #type {olx.style.IconOptions} */ ({
anchor: [0.5, 46],
anchorXUnits: 'fraction',
anchorYUnits: 'pixels',
opacity: 0.75,
src: "Images/"+markerColor+"-marker.png"
}))
});
}
function setUpMap(vectorLayers){
var map = new ol.Map({
target: 'map',
layers: vectorLayers,
view: new ol.View({
center: ol.proj.fromLonLat([2.808981, 46.609599]),
zoom: 4
})
});
addClickEventsToMapItems(map);
}
function addClickEventsToMapItems(map){
var interaction = new ol.interaction.Select({
condition: ol.events.condition.click
});
map.addInteraction(interaction);
interaction.on("select", function(e){
activeVector.name = e.target.getFeatures().item(0).get("name");
activeVector.routers = e.target.getFeatures().item(0).get("routers");
activeVector.switches = e.target.getFeatures().item(0).get("switches");
});
}
return {
init: init,
selected: activeVector
};
});
var red_cities = [
{ "lat": 40.462663, "lon": -3.626368, "name": "madrid" },
{ "lat": 53.381129, "lon": -1.470085, "name": "sheffield" },
{ "lat": 48.856614, "lon": 2.352222, "name": "paris" }
];
var orange_cities = [
{ "lat": 53.480759, "lon": -2.242631, "name": "manchester" },
{ "lat": 53.551085, "lon": 9.993682, "name": "hamburg" },
{ "lat": 50.850340, "lon": 4.351710, "name": "brussels" }
];
var blue_cities = [
{ "lat": 43.552847, "lon": 7.017369, "name": "cannes" },
{ "lat": 51.507351, "lon": -0.127758, "name": "london" },
{ "lat": 52.370216, "lon": 4.895168, "name": "amsterdam" },
{ "lat": 36.140751, "lon": -5.353585, "name": "gibraltar" }
];
var cities = {
red: red_cities,
orange: orange_cities,
blue: blue_cities
};
EDIT: Removed the directive to simplify the code.
I want to create an angular nvd3 multibar chart using the following json data.
json:
[
{
"ccpProducts": "CME",
"color": "red",
"values": [
{
"dates": "2015-07-01 00:00:00.0",
"noOfTrades": 5281
}
]
},
{
"ccpProducts": "LCH",
"color": "#6b486b",
"values": [
{
"dates": "2015-07-01 00:00:00.0",
"noOfTrades": 5281
}
]
}
]
Since values is an array of objects, you can't access its attributes via their index like you are doing (object properties are not ordered):
// d[0] and d[1] are undefined!
x: function(d){ return new d[0]; },
y: function(d){ return d[1]; }
Instead you should do this:
x: function(d){ return new d['dates']; },
y: function(d){ return d['numOfTrades']; }
You could also transform the format of the data in bar.json.