Related
I am using high charts in angular 8.I am getting chart for single object in an array of objects but i want to get each chart for each object dynamically how to achieve that. Below I have attached my working stackblitz for reference.
JSON:
[
{
"nameList":[
{
"id":203,
"Namelist_constrains":{
},
"lists":[
{
"name":"books",
"data":{
"A15people":4285,
"A30people":4285,
"A90people":4285
}
},
{
"name":"paper",
"data":{
"A15people":4285,
"A30people":4285,
"A90people":4285
}
},
{
"name":"pen",
"data":{
"A15people":4285,
"A30people":4285,
"A90people":4285
}
},
{
"name":"ball",
"data":{
"A15people":4285,
"A30people":4285,
"A90people":4285
}
},
{
"name":"bat",
"data":{
"A15people":4285,
"A30people":4285,
"A90people":4285
}
}
]
},
{
"id":204,
"Namelist_constrains":{
},
"lists":[
{
"name":"books",
"data":{
"A15people":5004,
"A30people":345,
"A90people":1334
}
},
{
"name":"paper",
"data":{
"A15people":112,
"A30people":345,
"A90people":6667
}
},
{
"name":"pen",
"data":{
"A15people":9882,
"A30people":3456,
"A90people":29898
}
},
{
"name":"ball",
"data":{
"A15people":3465,
"A30people":224,
"A90people":455
}
},
{
"name":"bat",
"data":{
"A15people":876,
"A30people":234,
"A90people":664
}
}
]
}
]
}
]
For the above I need to get two charts because it have two objects.
In my stackblitz i have only one object in the json. I am little bit confused how to achieve this.help me to solve this.
Link:
https://stackblitz.com/edit/angular-highcharts-example-xqcnyv?file=src/app/app.component.ts
You could create a simple component that will take a chart's data as it's Input and return standalone chart. Then you might use the *ngFor directive to generate that component for each element of your data.
Unfortunately, I am not familiar with the angular-highcharts, so I created the simple demo with highcharts-angular - the officially supported Angular wrapper.
Live demo:
https://stackblitz.com/edit/highcharts-angular-sparkline-j3nujf?file=src%2Fapp%2Fapp.component.html
data:
myData = [
{ data: [1, 2, 3], name: "first" },
{ data: [4, 5, 6], name: "second" },
{ data: [7, 8, 9], name: "third" }
];
app.component.html
<app-spark-line
*ngFor="let elem of myData"
[name]="elem.name"
[data]="elem.data"
></app-spark-line>
spark-line.component.ts:
export class SparkLineComponent {
Highcharts: typeof Highcharts = Highcharts;
#Input() data: Array<number>;
#Input() name: string;
updateFlag = false;
chartOptions: Options = {
chart: {
type: "area",
margin: [2, 0, 2, 0],
width: 200,
height: 200,
},
series: [
{
name: '',
type: 'area',
data: []
}
]
};
ngOnChanges(change: SimpleChanges) {
this.chartOptions.series = [{
name: change.name ? change.name.currentValue : null,
type: 'area',
data: change.data.currentValue,
}];
this.updateFlag = true;
}
}
sparkline.component.html:
<highcharts-chart
[Highcharts]="Highcharts"
[options]="chartOptions"
[(update)]="updateFlag"
>
</highcharts-chart>
I have a dataset for population pyramid and i use highcharts but i have some problem with deciminal sperator. Highcharts accept separator as "." but the dataset has "," so after the comma it see as a new values. i mean that for "5,12" it doesn't accept as 5.12, it accepts 5, 12 seperately two values. how can i solve this? (i can't change "," to "." because it takes from database).
<script>
{% for item in dataset %}
// Age categories
var categories = [
'0-4', '5-9', '10-14', '15-19',
'20-24', '25-29', '30-34', '35-39', '40-44',
'45-49', '50-54', '55-59', '60-64', '65-69',
'70-74', '75-79', '80-84', '85-89', '90+'
];
Highcharts.chart('container', {
chart: {
type: 'bar'
},
title: {
text: 'POPULATION PYRAMID'
},
subtitle: {
text: 'Source: #'
},
xAxis: [{
categories: categories,
reversed: false,
labels: {
step: 1
}
}, { // mirror axis on right side
opposite: true,
reversed: false,
categories: categories,
linkedTo: 0,
labels: {
step: 1
}
}],
yAxis: {
title: {
text: null
},
labels: {
formatter: function () {
return Math.abs(this.value) + '%';
}
}
},
plotOptions: {
series: {
stacking: 'normal'
}
},
tooltip: {
formatter: function () {
return '<b>' + this.series.name + ', age ' + this.point.category + '</b><br/>' +
'Population: ' + Highcharts.numberFormat(Math.abs(this.point.y),
}
},
series: [{
name: 'Men',
data: [
-{{ item.men_population_0_4_percentage }},
-{{ item.men_population_5_9_percentage }},
-{{ item.men_population_10_14_percentage }},
-{{ item.men_population_15_19_percentage }},
-{{ item.men_population_20_24_percentage }},
-{{ item.men_population_25_29_percentage }},
-{{ item.men_population_30_34_percentage }},
-{{ item.men_population_35_39_percentage }},
-{{ item.men_population_40_44_percentage }},
-{{ item.men_population_45_49_percentage }},
-{{ item.men_population_50_54_percentage }},
-{{ item.men_population_55_59_percentage }},
-{{ item.men_population_60_64_percentage }},
-{{ item.men_population_65_69_percentage }},
-{{ item.men_population_70_74_percentage }},
-{{ item.men_population_75_79_percentage }},
-{{ item.men_population_80_84_percentage }},
-{{ item.men_population_85_89_percentage }},
-{{ item.men_population_90_over_percentage }},
]
}, {
name: 'Women',
data: [
{{ item.women_population_0_4_percentage }},
{{ item.women_population_5_9_percentage }},
{{ item.women_population_10_14_percentage }},
{{ item.women_population_15_19_percentage }},
{{ item.women_population_20_24_percentage }},
{{ item.women_population_25_29_percentage }},
{{ item.women_population_30_34_percentage }},
{{ item.women_population_35_39_percentage }},
{{ item.women_population_40_44_percentage }},
{{ item.women_population_45_49_percentage }},
{{ item.women_population_50_54_percentage }},
{{ item.women_population_55_59_percentage }},
{{ item.women_population_60_64_percentage }},
{{ item.women_population_65_69_percentage }},
{{ item.women_population_70_74_percentage }},
{{ item.women_population_75_79_percentage }},
{{ item.women_population_80_84_percentage }},
{{ item.women_population_85_89_percentage }},
{{ item.women_population_90_over_percentage }},
]
}]
});
{% endfor %}
</script>
when comma set as deciminal seperator, there will be an error with the comma between values, such as "{{ item.women_population_0_4_percentage }},
{{ item.women_population_5_9_percentage }}, ..." so how can i fix this too?
You can change commas to dots by JS. For example:
var data = ['5,12', '10,4'];
data.forEach(function(el, i) {
data[i] = parseFloat(el.replace(/,/g, '.'))
});
Highcharts.chart('container', {
series: [{
data: data
}]
});
Live demo: http://jsfiddle.net/BlackLabel/62b1vwje/
for database
var data_men = [
'-{{ item.men_population_0_4_percentage }}',
'-{{ item.men_population_5_9_percentage }}',
.
.
.
];
var data_women = [
'{{ item.women_population_0_4_percentage }}',
'{{ item.women_population_5_9_percentage }}',
.
.
.
];
data_men.forEach(function(el, i) {
data_men[i] = parseFloat(el.replace(/,/g, '.'))
});
data_women.forEach(function(el, i) {
data_women[i] = parseFloat(el.replace(/,/g, '.'))
});
.
.
.
series: [{
//color: 'blue',
name: 'Male',
data: data_men
}, {
color: 'pink',
name: 'Female',
data: data_women
}]
.
.
.
Thank you
I am new to electron and trying to run the simple hello world.
In that "Electron" app, its menu bar should show up as a normal application with generic options, such as edit, view, window, help. But I am not able to see it. My OS system is macOS High Sierra.
I simple hello world code I have taken from the following link.
https://www.tutorialspoint.com/electron/electron_hello_world.htm
https://www.youtube.com/watch?v=RL305ldfzm8&list=PLC3y8-rFHvwiCJD3WrAFUrIMkGVDE0uqW&index=2
Could any one help?
Adding this work for me
const { isMac } = electron;
The menu shown in the tutorial is for windows system. The default menu is shown if no menu is set using Menu.setApplicationMenu(menu). Sets menu as the application menu on macOS. On Windows and Linux, the menu will be set as each window's top menu.. If you want to show that default menu use the following.
Use the https://electronjs.org/docs/api/menu#menusetapplicationmenumenu link for reference
const { app, Menu } = require('electron')
const template = [
// { role: 'appMenu' }
...(process.platform === 'darwin' ? [{
label: app.getName(),
submenu: [
{ role: 'about' },
{ type: 'separator' },
{ role: 'services' },
{ type: 'separator' },
{ role: 'hide' },
{ role: 'hideothers' },
{ role: 'unhide' },
{ type: 'separator' },
{ role: 'quit' }
]
}] : []),
// { role: 'fileMenu' }
{
label: 'File',
submenu: [
isMac ? { role: 'close' } : { role: 'quit' }
]
},
// { role: 'editMenu' }
{
label: 'Edit',
submenu: [
{ role: 'undo' },
{ role: 'redo' },
{ type: 'separator' },
{ role: 'cut' },
{ role: 'copy' },
{ role: 'paste' },
...(isMac ? [
{ role: 'pasteAndMatchStyle' },
{ role: 'delete' },
{ role: 'selectAll' },
{ type: 'separator' },
{
label: 'Speech',
submenu: [
{ role: 'startspeaking' },
{ role: 'stopspeaking' }
]
}
] : [
{ role: 'delete' },
{ type: 'separator' },
{ role: 'selectAll' }
])
]
},
// { role: 'viewMenu' }
{
label: 'View',
submenu: [
{ role: 'reload' },
{ role: 'forcereload' },
{ role: 'toggledevtools' },
{ type: 'separator' },
{ role: 'resetzoom' },
{ role: 'zoomin' },
{ role: 'zoomout' },
{ type: 'separator' },
{ role: 'togglefullscreen' }
]
},
// { role: 'windowMenu' }
{
label: 'Window',
submenu: [
{ role: 'minimize' },
{ role: 'zoom' },
...(isMac ? [
{ type: 'separator' },
{ role: 'front' },
{ type: 'separator' },
{ role: 'window' }
] : [
{ role: 'close' }
])
]
},
{
role: 'help',
submenu: [
{
label: 'Learn More',
click () { require('electron').shell.openExternalSync('https://electronjs.org') }
}
]
}
]
const menu = Menu.buildFromTemplate(template)
Menu.setApplicationMenu(menu)
I am using treemaps for a comparison purpose. I am using highchart.com for visualization.
I am showing two different treemaps side by side and hence providing a way of comparison for users. I want to link two same boxes in different treemaps. For example, I have two different treemaps and both have word "Bananas" in common. I want that when I hover on Box containing "Bananas" in first treemap, it highlights the same box of "Bananas" in 2nd treemap.
Is this even possible?
here is the code which generates the treemap.
Highcharts.chart('treemap1', {
series: [{
type: "treemap",
layoutAlgorithm: 'stripes',
alternateStartingDirection: true,
levels: [{
level: 1,
layoutAlgorithm: 'sliceAndDice',
dataLabels: {
enabled: true,
align: 'left',
verticalAlign: 'top',
style: {
fontSize: '15px',
fontWeight: 'bold'
}
}
}],
data: [{
id: 'A',
name: 'Apples',
color: "#EC2500"
}, {
id: 'B',
name: 'Bananas',
color: "#ECE100"
}, {
id: 'O',
name: 'Oranges',
color: '#EC9800'
}, {
name: 'Anne',
parent: 'A',
value: 5
}, {
name: 'Rick',
parent: 'A',
value: 3
}, {
name: 'Peter',
parent: 'A',
value: 4
}, {
name: 'Anne',
parent: 'B',
value: 4
}, {
name: 'Rick',
parent: 'B',
value: 10
}, {
name: 'Peter',
parent: 'B',
value: 1
}, {
name: 'Anne',
parent: 'O',
value: 1
}, {
name: 'Rick',
parent: 'O',
value: 3
}, {
name: 'Peter',
parent: 'O',
value: 3
}, {
name: 'Susanne',
parent: 'Kiwi',
value: 2,
color: '#9EDE00'
}]
}],
title: {
text: 'Treemap 1'
}
});
Highcharts.chart('treemap2', {
series: [{
type: "treemap",
layoutAlgorithm: 'stripes',
alternateStartingDirection: true,
levels: [{
level: 1,
layoutAlgorithm: 'sliceAndDice',
dataLabels: {
enabled: true,
align: 'left',
verticalAlign: 'top',
style: {
fontSize: '15px',
fontWeight: 'bold'
}
}
}],
data: [{
id: 'A',
name: 'Apples',
color: "#EC2500"
}, {
id: 'B',
name: 'Bananas',
color: "#ECE100"
}, {
id: 'O',
name: 'Oranges',
color: '#EC9800'
}, {
name: 'Anne',
parent: 'A',
value: 5
}, {
name: 'Rick',
parent: 'A',
value: 3
}, {
name: 'Peter',
parent: 'A',
value: 4
}, {
name: 'Anne',
parent: 'B',
value: 4
}, {
name: 'Rick',
parent: 'B',
value: 10
}, {
name: 'Peter',
parent: 'B',
value: 1
}, {
name: 'Anne',
parent: 'O',
value: 1
}, {
name: 'Rick',
parent: 'O',
value: 3
}, {
name: 'Peter',
parent: 'O',
value: 3
}, {
name: 'Susanne',
parent: 'Kiwi',
value: 2,
color: '#9EDE00'
}]
}],
title: {
text: 'Treemap 2'
}
});
.treemap-chart {
float: left;
width: 50%
}
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/treemap.js"></script>
<div id="treemap1" class="treemap-chart"></div>
<div id="treemap2" class="treemap-chart"></div>
Image of the output here:
codeoutput
You can do this by setting the state of a the hovered point in the mouseOver event and removing the state in the mouseOut event. Like this for the first chart, and the same for second chart changing the variable chart2 to chart1:
plotOptions: {
series: {
point: {
events: {
mouseOver: function(event) {
for (var i = 0; i < chart2.series[0].data.length; i++) {
if (chart2.series[0].data[i].name == event.target.name && chart2.series[0].data[i].parent == event.target.parent) {
chart2.series[0].data[i].setState('hover')
}
}
},
mouseOut: function(event) {
for (var i = 0; i < chart2.series[0].data.length; i++) {
if (chart2.series[0].data[i].name == event.target.name && chart2.series[0].data[i].parent == event.target.parent) {
chart2.series[0].data[i].setState('')
}
}
}
}
}
}
},
var chart1 = Highcharts.chart('treemap1', {
plotOptions: {
series: {
point: {
events: {
mouseOver: function(event) {
for (var i = 0; i < chart2.series[0].data.length; i++) {
if (chart2.series[0].data[i].name == event.target.name && chart2.series[0].data[i].parent == event.target.parent) {
chart2.series[0].data[i].setState('hover')
}
}
},
mouseOut: function(event) {
for (var i = 0; i < chart2.series[0].data.length; i++) {
if (chart2.series[0].data[i].name == event.target.name && chart2.series[0].data[i].parent == event.target.parent) {
chart2.series[0].data[i].setState('')
}
}
}
}
}
}
},
series: [{
type: "treemap",
layoutAlgorithm: 'stripes',
alternateStartingDirection: true,
levels: [{
level: 1,
layoutAlgorithm: 'sliceAndDice',
dataLabels: {
enabled: true,
align: 'left',
verticalAlign: 'top',
style: {
fontSize: '15px',
fontWeight: 'bold'
}
}
}],
data: [{
id: 'A',
name: 'Apples',
color: "#EC2500"
}, {
id: 'B',
name: 'Bananas',
color: "#ECE100"
}, {
id: 'O',
name: 'Oranges',
color: '#EC9800'
}, {
name: 'Anne',
parent: 'A',
value: 5
}, {
name: 'Rick',
parent: 'A',
value: 3
}, {
name: 'Peter',
parent: 'A',
value: 4
}, {
name: 'Anne',
parent: 'B',
value: 4
}, {
name: 'Rick',
parent: 'B',
value: 10
}, {
name: 'Peter',
parent: 'B',
value: 1
}, {
name: 'Anne',
parent: 'O',
value: 1
}, {
name: 'Rick',
parent: 'O',
value: 3
}, {
name: 'Peter',
parent: 'O',
value: 3
}, {
name: 'Susanne',
parent: 'Kiwi',
value: 2,
color: '#9EDE00'
}]
}],
title: {
text: 'Treemap 1'
}
});
var chart2 = Highcharts.chart('treemap2', {
plotOptions: {
series: {
point: {
events: {
mouseOver: function(event) {
for (var i = 0; i < chart1.series[0].data.length; i++) {
if (chart1.series[0].data[i].name == event.target.name && chart1.series[0].data[i].parent == event.target.parent) {
chart1.series[0].data[i].setState('hover')
}
}
},
mouseOut: function(event) {
for (var i = 0; i < chart1.series[0].data.length; i++) {
if (chart1.series[0].data[i].name == event.target.name && chart1.series[0].data[i].parent == event.target.parent) {
chart1.series[0].data[i].setState('')
}
}
}
}
}
}
},
series: [{
type: "treemap",
layoutAlgorithm: 'stripes',
alternateStartingDirection: true,
levels: [{
level: 1,
layoutAlgorithm: 'sliceAndDice',
dataLabels: {
enabled: true,
align: 'left',
verticalAlign: 'top',
style: {
fontSize: '15px',
fontWeight: 'bold'
}
}
}],
data: [{
id: 'A',
name: 'Apples',
color: "#EC2500"
}, {
id: 'B',
name: 'Bananas',
color: "#ECE100"
}, {
id: 'O',
name: 'Oranges',
color: '#EC9800'
}, {
name: 'Anne',
parent: 'A',
value: 5
}, {
name: 'Rick',
parent: 'A',
value: 3
}, {
name: 'Peter',
parent: 'A',
value: 4
}, {
name: 'Anne',
parent: 'B',
value: 4
}, {
name: 'Rick',
parent: 'B',
value: 10
}, {
name: 'Peter',
parent: 'B',
value: 1
}, {
name: 'Anne',
parent: 'O',
value: 1
}, {
name: 'Rick',
parent: 'O',
value: 3
}, {
name: 'Peter',
parent: 'O',
value: 3
}, {
name: 'Susanne',
parent: 'Kiwi',
value: 2,
color: '#9EDE00'
}]
}],
title: {
text: 'Treemap 2'
}
});
.treemap-chart {
float: left;
width: 50%
}
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/treemap.js"></script>
<div id="treemap1" class="treemap-chart"></div>
<div id="treemap2" class="treemap-chart"></div>
Working jsfiddle example: https://jsfiddle.net/ewolden/czn1rjxu/2/
I am trying to make a dropdown filter for angular ui-grid. I originally found the how-to article here, and upon not being able to work it, i went back to the source to try to work it. I am still having no success. the column filter just looks like a regular filter, without any dropdown. Can someone help me fix it up?
Column def:
{
field: 'sex'
, displayName: 'SEX'
, width: '120'
, type: uiGridConstants.filter.SELECT
, filter: { selectOptions: [ { value: 'male', label: 'male' }, { value: 'female', label: 'female' } ] }
}
This is how it looks (if I click the input, its just accepts text)
Is there something else im missing?
-----UPDATE WITH MY WHOLE SETUP-----------
//options for the main grid
$scope.gridOptions = {
enableFiltering: true,
multiSelect: false,
onRegisterApi: function(gridApi){
$scope.gridApi = gridApi; //so we can use gridapi functions of ui-grid
//handler for clicking rows and getting row object
gridApi.selection.on.rowSelectionChanged($scope, function(row){
thisRow = gridApi.selection.getSelectedRows() //gets the clicked row object
console.log(thisRow[0].uniqueId)
});
},
data: 'myData'
, rowTemplate: rowTemplate()
, columnDefs: [
{
field: 'alert'
, displayName: 'ALERTS'
, width: '70'
, headerCellClass: $scope.highlightFilteredHeader
,sort: {
direction: uiGridConstants.DESC,
priority: 1
}
},
{
field: 'firstName'
, displayName: 'FIRST NAME'
, width: '130'
, headerCellClass: $scope.highlightFilteredHeader
},
{
field: 'lastName'
, displayName: 'LAST NAME'
, width: '130'
, headerCellClass: $scope.highlightFilteredHeader
},
{
field: 'dob'
, displayName: 'DOB'
, width: '130'
, headerCellClass: $scope.highlightFilteredHeader
},
{
field: 'careCoordinatorName'
, displayName: 'Care Coordinator Name'
, width: '130'
, headerCellClass: $scope.highlightFilteredHeader
},
{
field: 'userStatus'
, displayName: 'STATUS'
, width: '130'
, headerCellClass: $scope.highlightFilteredHeader
},
{
field: 'homeNum'
, displayName: 'PATIENT HOME #'
, width: '130'
, headerCellClass: $scope.highlightFilteredHeader
},
{
field: 'cellNum'
, displayName: 'PATIENT CELL #'
, width: '130'
, headerCellClass: $scope.highlightFilteredHeader
},
{
field: 'mi'
, displayName: 'MI'
, width: '60'
, headerCellClass: $scope.highlightFilteredHeader
},
{
field: 'sex'
, displayName: 'SEX'
, width: '120'
, type: uiGridConstants.filter.SELECT
, filter: { selectOptions: [ { value: 'male', label: 'male' }, { value: 'female', label: 'female' } ] }
}
]
};
Row template (if relevant):
function rowTemplate() {
return '<div ng-dblclick="grid.appScope.rowDblClick(row)" ng-repeat="(colRenderIndex, col) in colContainer.renderedColumns track by col.uid" ui-grid-one-bind-id-grid="rowRenderIndex + \'-\' + col.uid + \'-cell\'" class="ui-grid-cell" ng-class="{ \'ui-grid-row-header-cell\': col.isRowHeader }" role="{{col.isRowHeader ? \'rowheader\' : \'gridcell\'}}" ui-grid-cell></div>';
}
Grid HTML
<div id="grid1" ui-grid="gridOptions" ui-grid-importer class="grid" ui-grid-resize-columns ui-grid-move-columns ui-grid-auto-resize ui-grid-edit ui-grid-selection ui-grid-cellNav ui-grid-paging external-scopes="gridHandlers"></div>
------UPDATE 2-----------
After changing coldef to
{
field: 'sex',
displayName: 'SEX',
width: '120',
//type: uiGridConstants.filter.SELECT,
filter: {
type: uiGridConstants.filter.SELECT, // <- move this to here
selectOptions: [
{ value: 'male', label: 'male' },
{ value: 'female', label: 'female' }
]
}
}
This is how my column now looks (with another column to the left for comparison)
------UPDATE 3-----------
When I inspected the area, I could see the code for the select. So no we know its there, its just not showing
-----UPDATE 4----------
Materializecss was making it invisible. it was there the whole time
select {
display: inline !important;
height: 15px !important;
}
solved the problem
Ah, I believe your problem is that the type option for the coldef is in the wrong location. I've expanded the code a bit for readability; you can easily get lost in the objects if they are too compressed.
What you have:
{
field: 'sex',
displayName: 'SEX',
width: '120',
type: uiGridConstants.filter.SELECT,
filter: {
selectOptions: [
{ value: 'male', label: 'male' },
{ value: 'female', label: 'female' }
]
}
}
What it should be:
{
field: 'sex',
displayName: 'SEX',
width: '120',
//type: uiGridConstants.filter.SELECT,
filter: {
type: uiGridConstants.filter.SELECT, // <- move this to here
selectOptions: [
{ value: 'male', label: 'male' },
{ value: 'female', label: 'female' }
]
}
}