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},
...
};
}
}
Related
I need the text in this graph to stay center wrapped but it goes horizontal instead. Had anyone had this issue with chartjs?
Picture of the graph
It works if you used a set amount of letters such as 'dummy'.
datasets: {
labels: ["Dummy text 1", "Dummy text 2", "Dummy text 3"],
datasets: [
{
label: "",
data: [13, 11, 2],
backgroundColor: [
"rgba(0, 135, 136)",
"rgba(0, 193, 189)",
"rgba(255, 9, 49)"
],
borderColor: [
"rgba(0, 135, 136)",
"rgba(0, 193, 189)",
"rgba(255, 9, 49)"
],
borderWidth: 1
}
]
Fixed this easily with a multi-array and changing the xaxes. Here's the example fix -
labels: [
["Dummy", "Data 1"],
["Dummy", "Data 2"],
["Dummy", "Data 3"]
],
xAxes: [
{
ticks: {
maxRotation: 0,
minRotation: 0
},
}
]
Hopefully this helps someone out :)
scales: {
xAxes: [
{
ticks: {
callback: function (label, index, labels) {
if (/\s/.test(label)) {
return label.split(' ');
} else {
return label;
}
}
}
}
]
This callback function will split your X Axis labels on the basis of space and arrange all the words in a wrapped manner. You can use the same function for Y axis values as well
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.
I want to build a combination chart with a column chart with multiple series and a line chart. Problem is that I am getting High charts data from nested JSON response. For that I initialized array and that array is giving in series in plotoptions highcharts as you can see in the below code.
My code is like this:
var crime_data=[];
for(var i=0;i<result.themes.length;i++){
var crime={};
var test2 = result.themes[i];
var test = test2[Object.keys(test2)];
crime.name = Object.keys(result.themes[i]);
crime.data = [];
for(var k=0;k<test.yearTheme.length;k++){
var test3=test.yearTheme[k];
var test5=test3.individualValueVariable;
for(var j=0;j<test5.length;j++){
crime.data.push(test5[j].count);
};
};
crime_data.push(crime);
};
var crimeChart = new Highcharts.Chart({
chart: {
renderTo: 'container1',
type:'column'
},
title: {
text: 'Crime'
},
xAxis: {
categories: month,
crosshair: true
},
yAxis: {
min: 0,
title: {
text: 'Count'
}
},
credits: {
enabled: false
},
tooltip: {
shared: true,
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0,
depth: 25,
allowPointSelect: true,
cursor: 'pointer',
point: {
},
}
},
series: crime_data
});
This is Column chart I am getting when i write chart type column.
This is my Line Chart I am getting when i changed type column to spline in chart in highcharts.
And this is my JSON data(Highcharts data):
{
"boundaries": {
"boundary": [
{
"boundaryId": "55083021003",
"boundaryType": "USA_CITY",
"boundaryRef": "C1"
}
]
},
"themes": [
{
"AssaultCrimeTheme": {
"boundaryRef": "C1",
"individualValueVariable": [
{
"name": "2013 Assault Crime",
"description": "Assault Crime for 2013",
"count": 18901
},
{
"name": "2014 Assault Crime",
"description": "Assault Crime for 2014",
"count": 17707
}
]
}
},
{
"BurglaryCrimeTheme": {
"boundaryRef": "C1",
"individualValueVariable": [
{
"name": "2013 Burglary Crime",
"description": "Burglary Crime for 2013",
"count": 17743
},
{
"name": "2014 Burglary Crime",
"description": "Burglary Crime for 2014",
"count": 14242
}
]
}
}
]
}
I want to combine both of them in the same container with same data.The problem is in how to tell highcharts multiple series should be represented with line and with column type with same data.For this when i write series:[{ data: crime_data ,type: spline }] instead of series:crime_data In that case I am not getting Highcharts data. Can anyone Please help me how should i do this.Please suggest me.
Pass your data, like below format. add type of chart in each data series;
Here i replaced type value but with same data.
[{
type: 'line',
name: 'AssaultCrimeTheme',
data: [3, 2, 1, 3, 4]
}, {
type: 'line',
name: 'BurglaryCrimeTheme',
data: [2, 3, 5, 7, 6]
}, {
type: 'column',
name: 'AssaultCrimeTheme',
data: [3, 2, 1, 3, 4]
}, {
type: 'column',
name: 'BurglaryCrimeTheme',
data: [2, 3, 5, 7, 6]
},]
Here is fiddle for more details.
Here is a complete example using your data.
const json = {
"boundaries": {
"boundary": [{
"boundaryId": "55083021003",
"boundaryType": "USA_CITY",
"boundaryRef": "C1"
}]
},
"themes": [{
"AssaultCrimeTheme": {
"boundaryRef": "C1",
"individualValueVariable": [{
"name": "2013 Assault Crime",
"description": "Assault Crime for 2013",
"count": 18901
}, {
"name": "2014 Assault Crime",
"description": "Assault Crime for 2014",
"count": 17707
}]
}
}, {
"BurglaryCrimeTheme": {
"boundaryRef": "C1",
"individualValueVariable": [{
"name": "2013 Burglary Crime",
"description": "Burglary Crime for 2013",
"count": 17743
}, {
"name": "2014 Burglary Crime",
"description": "Burglary Crime for 2014",
"count": 14242
}]
}
}]
}
// Create categories object in order filter duplicates
const cats = {}
const series = json.themes.map((o) => {
const key = Object.keys(o)[0]
return {
name: key,
data: o[key].individualValueVariable.map((o) => {
cats[o.name] = 1
return { category: o.name, y: o.count }
})
}
})
// Convert categories object to array
const categories = Object.keys(cats)
// Chart options
const options = {
chart: {type: 'column'},
xAxis: {categories: categories},
series: series
}
// Create chart
const chart = Highcharts.chart('container', options)
console.log(series, categories)
Live example: https://jsfiddle.net/Lo323gq3/
Output below:
I have own vector tile from PGRestAPI, url like below
"http://192.168.1.4:3001/services/postgis/cleantech2/geom/vector-tiles/{z}/{x}/{y}.pbf"
and I try use mapbox-gl.js to render the map, but nothing display.
I am doing wrong? thx
var style = {
"version": 8,
"sources": {
"countries": {
"type": "vector",
"tiles": ["http://192.168.1.4:3001/services/postgis/cleantech2/geom/vector-tiles/{z}/{x}/{y}.pbf"],
"maxzoom": 6
}
},
"glyphs": location.origin+location.pathname+"font/{fontstack}/{range}.pbf",
"layers": [{
"id": "background",
"type": "background",
"paint": {
"background-color": "#ddeeff"
}
},{
"id": "country-glow-outer",
"type": "line",
"source": "countries",
"source-layer": "country",
"layout": {
"line-join":"round"
}
}]
};
var init_lat = 1.3552799//42.299228067198634;
var init_lng = 103.6945413;//-83.69717033229782;
mapboxgl.accessToken = 'mapbox-token';
var map = new mapboxgl.Map({
container: 'map',
style: style,
center: [init_lng,init_lat],
zoom: 15
});
edit 1:
after debug mapbox-gl-js code, now can see several circles. I modify the style, the source-layer name from pbf must be correct.
but not display all the points, it seems filtered?
var style = {
"version": 8,
"sources": {
"cleantech": {
"type": "vector",
// "url": "mapbox://map-id"
// "url": "http://tileserver.com/layer.json",
"tiles": ["http://192.168.1.4:3001/services/postgis/cleantech2/geom/vector-tiles/{z}/{x}/{y}.pbf"],
"maxzoom": 6
}
},
"glyphs": location.origin+location.pathname+"font/{fontstack}/{range}.pbf",
"layers": [{
"id": "cleantech2_geom_id",
"type": "circle",
'source': 'cleantech',
'layout': {
'visibility': 'visible'
},
'paint': {
'circle-radius': 8,
'circle-color': 'rgba(55,148,179,1)'
},
'source-layer': 'cleantech2_geom'
}]
};
edit 2:
change the maxzoom to 22, all data displayed. lets drink!
I have a custom pin but it is showing as an ugly default grey pin. Here is my function where I am setting my pin. This is inside of a loop that gets my pins
featureCollection.features.push({
"type": "Feature",
"properties": {
"id": item.id,
"title": item.title,
"image":item.image,
"description": item.description,
"icon": {
"iconUrl": "../images/pin.png",
"iconSize": [29, 36],
"iconAnchor": [25, 25],
"popupAnchor": [0, -15],
"className": "pin"
}
},
"geometry": {
"type": "Point",
"coordinates": [
item.long,
item.lat
]
}
});
The example icon code was used from here https://www.mapbox.com/mapbox.js/example/v1.0.0/custom-marker/
You will need to prep the custom marker
var customIcon = L.icon({
"iconUrl": "../images/pin.png",
"iconSize": [29, 36],
"iconAnchor": [25, 25],
"popupAnchor": [0, -15],
"className": "pin"
})
then setup an options structure to use this new icon like
geojsonOptions = {
pointToLayer: function(feature,latLng) {
return L.marker(latLng,{icon:myIcon})
}
}
and then include those options like this when adding to the map. L.geoJson(featureCollection,geojsonOptions).addTo(map)