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>
Related
I cannot seem to get 2 image overlays on a map at the same time using a basic map. I do not see anything wrong with the code after 3 hours, and something so simple is driving me crazy. What am I missing here?
The first image overlay (a big one in the Northeast US) works perfectly fine as an overlay - but the 2nd one does not show up. (The second one should be overlaid on the national weather service office at the airport in New Braunfels, TX - it is small. But the overlay can be anywhere, I just need to understand how to get 2 overlays on at once when the page loads.) Edit : The source "secondimage" here is not loading when the map loads, but is not causing the map to not start or anything, the image just isn't there.
The code :
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>Add an image</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.45.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.45.0/mapbox-gl.css' rel='stylesheet' />
<style>
body {
margin: 0;
padding: 0;
}
#TL {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
</style>
</head>
<body>
<div id='TL'></div>
<script>
mapboxgl.accessToken = 'pk.eyJ1IjoiZm9ybXVsYTQiLCJhIjoiY2lzNWl5N3RpMDNhYTNvcDFvNGVrZmZheCJ9.2X-n4Yk2XyxYqoPbP_IMnQ';
var map = new mapboxgl.Map({
container: 'TL',
maxZoom: 19,
minZoom: 1,
zoom: 5,
center: [-98.0284, 29.7039],
style: 'mapbox://styles/formula4/cjifi4wp72stq2qp6p4ud3bt9'
});
map.on('load', function() {
map.addSource("firstimage", {
"type": "image",
"url": "kewx.gif",
"coordinates": [
[-80.425, 46.437],
[-71.516, 46.437],
[-71.516, 37.936],
[-80.425, 37.936]
]
});
map.addLayer({
"id": "overlay",
"source": "firstimage",
"type": "raster",
"paint": {
"raster-opacity": 0.85
}
});
map.addSource("secondimage", {"type": "image",
"url": "secondimage.gif",
"coordinates": [
[-98.0387, 29.7125],
[-98.0182, 29.7125],
[-98.0387, 29.6927],
[-98.0387, 29.6920]
]})
map.addLayer({
"id": "overlay",
"source": "secondimage",
"type": "raster",
"paint": {"raster-opacity": 0.85}
})
});
</script>
</body>
</html>
Your layer for the second image has the same ID as the first layer: "id" : "overlay".
It has to be different from the first one, e.g.:
map.addLayer({
"id": "overlay_two",
"source": "secondimage",
"type": "raster",
"paint": {"raster-opacity": 0.85}
})
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 Amchart's serial chart in ionic framework. I have rendered the serial chart using
var chart = AmCharts.makeChart("chartdiv",
{
"type": "serial",
"categoryField": "Name",
"rotate": true,
"angle": 30,
"depth3D": 40,
"startDuration": 1,
"fontSize": 10,
"theme": "default",
"precision": 4,
"creditsPosition": "bottom-right",
"responsive": {
"enabled": true
},
"categoryAxis": {
"gridPosition": "middle",
"title": "Name",
"inside": true
},
"graphs": [
{
"balloonText": "[[title]] of [[Name]]:[[value]]",
"fillAlphas": 1,
"id": "AmGraph-1",
"title": "X",
"type": "column",
"valueField": "X"
},
{
"balloonText": "[[title]] of [[Name]]:[[value]]",
"fillAlphas": 1,
"id": "AmGraph-2",
"title": "Y",
"type": "column",
"valueField": "Y"
},
{
"balloonText": "[[title]] of [[Name]]:[[value]]",
"fillAlphas": 1,
"id": "AmGraph-3",
"title": "Z",
"type": "column",
"valueField": "Z"
}
],
"valueAxes": [
{
"id": "ValueAxis-1",
"title": "Amount"
}
],
"titles": [
{
"id": "Title-1",
"text": "SUMMARY"
}
],
"legend": {
"enabled": true,
"useGraphSettings": true,
"position": "bottom"
},
"dataProvider": $scope.data,
"listeners": [{
"event": "clickGraphItem",
"method": function (event) {
$scope.SelectedX = event.item.category;
$scope.SelectedContext = event.item.dataContext;
$scope.LoadDetailsData($scope.SelectedX, $scope.SelectedContext.Period);
}
}]
}
);
chart.addListener("dataUpdated", zoomChart);
zoomChart();
function zoomChart() {
chart.zoomToIndexes(0, chart.dataProvider.length - (chart.dataProvider.length - 3));
}
I am opening IonicModal on click of graph items and creating another chart. When I close the IonicModal, page which contains the above chart gets freezed untill I press hardware back button.
I am using pie charts few places but not facing this issue on those pages. It seems there is some issue with the serial chart only.
Using IonicModal from template URL option to open Modal -
$ionicModal.fromTemplateUrl('template.html', { scope: $scope })
.then(function (modal) {
$scope.sortModal = modal;
});
$scope.sortShow = function () {
//alert('inside show');
$timeout(function () {
$scope.sortModal.show();
$scope.LoadDetailsChart(); //creating next chart data
}, 0);
};
$scope.sortClose = function () {
$scope.sortModal.hide();
};
$scope.$on('$destroy', function () {
$scope.sortModal.remove();
});
I just need to add paneventenabled property as false here. As per amcharts docs,
This setting affects touch-screen devices only. If a chart is on a page, and panEventsEnabled are set to true, the page won't move if the user touches the chart first. If a chart is big enough and occupies all the screen of your touch device, the user won’t be able to move the page at all. That's why the default value is "false". If you think that selecting/panning the chart or moving/pinching the map is a primary purpose of your users, you should set panEventsEnabled to true.
Is there any angularjs library that can draw a chart with stacked bars + lines? Like this:
I'm looking for any library that supports this, with angular directives. I've found angular-nvd3-directives, that supports multicharts (combined chart types), but I don't think it supports bar stacking, only grouping.
I know that these questions are not well suited to SO, I'm looking for ANY, ONE, lib, not recommendations. (also it has to be free for commercial use)
The ZingChart-AngularJS directive exposes the entire ZingChart library, which supports mixed charts. It's free for commercial use. I made a demo on CodePen of what you're looking for.
Here's what your JS would look like:
var app = angular.module('myApp', ['zingchart-angularjs']);
app.controller('MainController', function($scope) {
$scope.myJson = {
"type": "mixed",
"background-color": "white",
"plot": {
"stacked": true
},
"series": [{
"type": "bar",
"values": [25, 30, 15, 20, 25],
"stack": 1,
"background-color": "#4372c1",
"hover-state": {
"visible": false
},
}, {
"type": "bar",
"values": [20, 10, 30, 25, 15],
"stack": 1,
"background-color": "#ea4204",
"hover-state": {
"visible": false
},
}, {
"type": "line",
"values": [25, 30, 15, 20, 25],
"line-color": "#38408c",
"marker": {
"background-color": "#38408c",
"border-color": "#38408c"
},
"hover-state": {
"visible": false
}
}, {
"type": "line",
"values": [25, 30, 15, 20, 25],
"line-color": "#38408c",
"marker": {
"background-color": "#38408c",
"border-color": "#38408c"
},
"hover-state": {
"visible": false
},
},]
};
});
angular-nvd3 supports this.
All you have to do is set bars1.stacked=true and bars2.stacked=true
http://plnkr.co/edit/2gSaYHgNkuNjbj9SGrWt?p=preview
$scope.options = {
chart: {
type: 'multiChart',
...
bars1: {stacked:true},
bars2: {stacked:true},
...
};
}
}
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();